11 replies to this topic

[ZipOnTrousers]

Hi, was wondering if anyone could point me to any examples of pages that contain multiple event calendars. The page im going to create will have a calendar for each month of a year, and each calendar will have certain dates highlighted which will display a box with information on that date on roll over. Are there any solutions which do this already that I can study or does anyone have any advice in implementing this?

[ZipOnTrousers]

Sorry to double post, but I've narrowed down what I need to do a bit more.

I have generated using javascript and Zellers Congruence a page that contains a calendar for each month in the year. As it stands the calendars are basically just tables with the headings Monday - Sunday and the correct dates lined up in the right places for each day. What I really need to do now is make the calendars interactive so that when the user hovers over certain dates a box is displayed with info on an event that occured on that date. i.e. the user hovers over December 25th and a box pops up and says "Christmas Day". There will be a list of certain dates I need to display information on, so is there an easy way to do this in Javascript? Would I need to create an array of the necessary dates and then somehow check all the dates in the calendars against this array, and if they exist make them interactive?

Any help on this would be really appreciated...

[amrosama]

-yes you can create an array of objects like this:

var events=[

  {

    day:25,

    month:12,

    evenTitle:'Christmas Day'

  },

  {

   day:30,

   month:10,

   evenTitle:'my birthday'

  }

];

and on each day container or td that holds the day you need to check the date with the array in a loop to see if theres an event or no then display the message in a DIV with absolute position with the mouse position
-are you using javascript framework like jquery or mootools?

[ZipOnTrousers]

Sorry for the delay but I was sidetracked for several weeks with coursework and whatnot, so now I'm back to this again. Not using either of those, I'm just writing this from scratch in TextWrangler.

I've written the following function:

function getImportantDate (day) {
    for (i = 0; i < importantDates.length; i++) {
        if (day == importantDates[i].day) {
            document.write("<DIV class = \"importantDateHover\">" + importantDates[i].eventTitle + "<BR>" + importantDates[i].eventText + "</DIV>");
        }
    }
}

Which is supposed to loop through my array and compare the current "dayCount" (see below) with my array of dates. If the dayCount matches the objects date property, the function is supposed to write the object's eventTitle and eventText to a suitable div with a class, which is then going to be styled by CSS.

Below is the Javascript that actually generates the calendar:

function calendar (month) {
    //open up a table
    document.write("<table class =\"datesTable\"><tr>");
        //put in headings
document.write ("<th>M</th><th>T</th><th>W</th><th>Th</th><th>F</th><th>S</th><th>Su</th></th>");

    //end the heading row
    document.write ("<tr>");

    //put initial empty cells into first row
    monthStart = getDay(1,month) - 0;

    //make sure monthStart is between 0 and 6
    if (monthStart == -1)
        monthStart = 6;

    // put in the blank cells at the beginning of the month
    for (i = 0; i < monthStart; i++) {
        document.write ("<TD> </TD>");
    }

    //complete first row with the dates of the first week
    dayCount = 1;
    for (i = monthStart; i < 7; i++) {
        document.write ("<TD>" + dayCount + "</TD>");
        dayCount++;
    }

    //fill in the remaining complete weeks
    numberOfFullRows = Math.floor((monthStart + getNumberOfDays (month)) / 7);
    for (i = 1; i < numberOfFullRows; i++) {
        document.write("<TR>");
        for (j = 0; j < 7; j++) {
            document.write ("<TD>" + dayCount + "</TD>");
            dayCount++;
        }
        document.write("</TR>");
    }

    // fill in the last few days if necessary
    remainingDays = (monthStart + getNumberOfDays (month)) % 7;
    if (remainingDays > 0) {
        //start the last row
        document.write ("<TR>");

        // fill in the remaining days
        for ( i = 0; i < remainingDays; i++) {
            document.write ("<TD>" + dayCount + "</TD>");
            dayCount++;
        }

        //complete last row with blank cells
        for (i = 0; i < 7 - remainingDays; i++) {
            document.write ("<TD> </TD>");
        }

        //close off the last row
        document.write ("</TR>");
    }

    //close off the table
    document.write("</TABLE>");

}

I plan to use the dayCount variable as the parameter to the getImportantDates function, but I'm having trouble with actually placing the getImportantDates function into the calendar generating function, as regardless of where I put it it seems to prevent the calendar function from completing. Do you have any suggestions as to how to integrate these two? Or a better way to get this working?

[amrosama]

welcome back to the thread :amr:
you can follow an easier approach here.
you have done great so far. i think you just need to fire the events.
the best approach to do so is to do it directlly in the function that prints the actual calendar. for example when printing a certain date you check if its special or not if yes add "onclick" or "onmouseover" event with the "getImportantDate (day)" you wrote.
for example :

    

for (i = monthStart; i < 7; i++) {

        document.write ("<TD onmouseover='getImportantDate ("+i+")'>" + dayCount + "</TD>");

        dayCount++;

    }

that would work but becareful:
-this will loop through "importantDates" array when mouse moves over any "TD" even if its date is not special. so i would recommend that you add that event only if that date is special by making a function "is_special(day,month)" (or something like that)
-in your "getImportantDate" you forgot to check for the month too :)

let us know if that worked well for you

[ZipOnTrousers]

Thanks for pointing out the month thing, I actually noticed that soon after posting and updated it a bit. I changed my function around a bit and it now looks like this:

function getImportantDate (importantDay, importantMonth) {
    for (i = 0; i < importantDates.length; i++) {
        if (importantDay == importantDates[i].day && importantMonth == importantDates[i].month) {
            return  importantDates[i].eventTitle;
        } 
    }
}

I tried what you suggested, and it seems like the program will generate TDs up until the point it reaches the first date that should be an event and then will just stop generating TDs. There also seems to be a lot of blank TDs being made and the word "undefined" seems to be displayed several times... Would it help if I sent you the files I'm using so you can get a better look at it? There may be something I don't realise is relevant that is messing something up... its just one HTML, one small CSS and the .JS file.

[amrosama]

the unidentified that were printed were caused by statements like this:

		document.write ("<TD>" + dayCount + getImportantDate(dayCount, month)  +  "</TD>");

because it runs the getimportantdates function and puts the return inside the TD which is "unientified"
anyways the fix was

		document.write ("<TD onclick='getImportantDate("+dayCount+","+ month+") '>" + dayCount  +  "</TD>");

but it looked bad :D
a better way is to give each TD an id and use that id to assign the events. read the comments in the file. hope it helps

Attached Files

•  myscript..js   6.91K   22 downloads

[ZipOnTrousers]

Thanks man, I'm still having a bit of trouble getting the right message to be displayed for the right date but its getting there. I'll get back to you later tonight or tomorrow with progress. Out of interest, did this work for you in IE on Windows? I'm on a mac, works fine in safari so far but Firefox doesn't like it much. Will test on windows later today as well.

Cheers!

[amrosama]

oops i forgot to remove this line:

console.log(id)

its at line 238 inside assignImportantDays function remove it and it will work fine . even on ie

[ZipOnTrousers]

K I've been struggling to get the DIV to actually display, but now I've realised I can't even get the right information to be displayed inside the alert. It works fine when im just trying to output a string but I can't seem to use properties in there.

i.e.

alert(importantDate[i].eventTitle);

Shouldn't this just treat the property as a parameter to the alert function and display it? Or am I going about this wrong?

I thought it would be fairly easy and just a case of telling the <DIV> to display only on rollover and then I'd be able to position it just above and to the right of the TD that had been rolled over. Maybe not...

[ZipOnTrousers]

Thanks for all your help with this amrosama, I now have it working exactly as it needs to. Definitely wouldn't have managed this without your help, cheers.

- Zip

[amrosama]

great man,
glad it helped :)