View Full Version : Dynamic Calendar II

04-14-2005, 12:38 PM
Script Name: Dynamic Calendar II
Script Link: http://www.dynamicdrive.com/dynamicindex6/dcalendar2.htm

I have two questions about this script:

1) Is it possible to adjust it so that when you change months it doesn't jump around when you got to a month that has 6 week lines (as oppsed to the normal 5)?

2) Is it possible to resize the whole calendar, and make it take up most of a page?


04-14-2005, 06:31 PM
If you put it in an element that is absolutely positioned with top and left coordinates specified, it will stop jumping but, formatting it into other content becomes a problem. Or, you could put it in a table with a single row and cell. make the cell like:

<td valign="top" height="280">calendar html goes here</td>280 seems to work fine for the demo calendar, if your second idea is used, 280 will need to be a much larger number. As for the second idea - fullpage, easy. Just change every occurrence of '<td' (without the quotes) in the script to '<td class=cal' (without the quotes). Then use this style declaration in the head of the page:
<style type="text/css">
td.cal {font-size:8em;}
</style>That size is good for 1024x768 resolution, fullscreen. I might, when I get a chance write a routine that will dynamically resize the font for different viewport/screen sizes, but most browsers, including IE, can and often just 'automatically' do this with font sizes set by em's.

04-14-2005, 09:46 PM
Thanks for that.
The first part worked fine, and it now no longer jumps around.

However, with the resizing part for some reason the section above the actual calendar (the next and last buttons, and the month and year boxes) are all over the place. It happens to varying amounts depending on the number i put in the style definition (I chose 3, as 8 was a little too large for my page).

I have attached my html as a txt doc, as once again, this is for my intranet!

Thanks again,

04-14-2005, 10:16 PM
I almost don't have to look but I will. You either added the class=cal to the <td tags in the html code as well as the ones in the script (most likely) or you got the style declaration wrong. Yep, I checked, take the class=cal declarations out of the <td tags below the <body tag and you should be fine.

04-15-2005, 12:10 AM
OK, lets play spot the newbie who doesn't have a clue what he's doing... I win! (I just looked in the mirror) :o

Guess I better keep on learning!

Thanks for that one jscheuer1, you've been a great help!

04-17-2005, 10:22 PM
ok, things have gone strange now...

For some reason my calendar page looks fine in the design view of frontpage, but when i preview it the calendar and dropdown menu shift to the right.

I know about the rules on using 2 scripts on the same page, but it was working on friday and now it isn't. Might it be a conflict of the style sheets or something?

04-18-2005, 03:30 AM
Front Page and other WYSIWYG editors do not always show an accurate 'preview'. Also make sure FP has not altered your code, it has been known to do that as well. These are two of many reasons I abhor such editors. Try the page cleanly in a browser before you decide it isn't working. Always backup work before exposing it to FP and other WYSIWYG editors.

04-18-2005, 08:27 PM
I think it was an issue with IE5 (which is on my work laptop), because when i copied my work back to the server today and previewed the page in IE6 it works fine.

Oh well, better download the new version ;)

05-03-2005, 01:38 PM
I have another couple of formatting questions regarding this script.

1) Can I reduce the gap between the actual calendar and the selection area at the top for choosing the month/year?

2) Is it possible to make the "day" boxes wider and have text/links in them?

I have an example of what I have done so far here:



05-03-2005, 05:01 PM
Mine has no such large gap, you've been allowing FP to turn your some of your code into a picture again.

What kind of links did you have in mind? The days are generated by a set of routines powered by several 'for (var i = 1; i < 8; i++)' statements. If you want the links to be something like this:

<a href="3May2005.htm">Today's Events</a>That could be done but, it would be done for each and every day, or just for the current day, or just for the current month. A range of days centering on the current day should be possible. Even individual dates but, the coding for that could be tedious. A subroutine and an array might be added so that individual date links could be configured. At that rate, why not make a calendar with the links you want on it?

05-03-2005, 10:31 PM

You got me thinking, once again. Anyways, I've come up with a calendar script that allows for 'special days', either one time only or every year. I'm a little pressed for time right now, so I'll attach it, hopefully it will need no explanation. Check for bugs.

05-04-2005, 10:46 AM

HTML_String += '<td class=cal BGCOLOR="FFFFFF" BORDERCOLOR="000000"><a style="text-decoration:none" href="events.htm#'+Day_Counter+'_'+Month_Label[Month].toLowerCase()+'_'+Special_Days[k][2].toLowerCase()+'.htm"><strong><font color="'+fcol+'">&nbsp;' + Day_Counter + '&nbsp;</font></strong><br><center><font style="font-size:'+specFont+'px"><u>'+Special_Days[k][3]+'</u></a></font></center></td>';Basically The calendar is on one page with a list of events on another. I thought it would be nice if the events appeared on the calendar and the users could simply click on the date and it would take them to the page with more info on.
I added in the highlighted (red) code and have taken out the highlighted (blue) code. Then I placed the relevant <A NAME="generated date"> anchor in my events page. This seems to work ok, but if you can suggest a better way I'd be grateful to hear it.

Also, I am a little confused with all the [2] and [3] business in the same line (above) as well as the similar ones in this line
if (Special_Days[k][0]==Month_Label[Month]&&Special_Days[k][1]==Day_Counter&&((Special_Days[k][2]==Year)||(Special_Days[k][2]=='all_Years'))) {

Do they have anything to do with the array configuration at the top of the code? Or is it just coincidental?

I have a limited height to work with though, so when I reduced the size of the calendar slightly
font-size:2em; the words "mothers day" in your calendar go to 2 lines, and this increases the height of the whole line. Is there a simple way of increasing the width instead of it wrapping?
I have updated the same example page as before with the changes so far.

BTW, I liked the birthday event! ;)

Thanks for your help.


05-04-2005, 12:08 PM
Answers from last to first:

//Set Font Size for Special_Days Link
var specFont=10
try setting that to 9.

Also, you can give yourself a little more room to play with by using decimal fractions for the overall calendar size (from the style section) ex:


Another thing you can do is to put style for font size directly into the Special_Days array for individual items (but better to use the configuration mentioned above):

//Configure Special_Days
var Special_Days = new Array;
Special_Days[0]=['December','25','all_Years','Merry Christmas!']
Special_Days[1]=['August','28','all_Years','Happy BirthDay!']
Special_Days[2]=['January','1','all_Years','Happy New Year!']
Special_Days[3]=['May','8','2005','<font style="font-size:9px">Mother\'s Day</font>']

Alright, while that is above us, if k equals 0, then Special_Days[k][0] equals December, Special_Days[k][1] equals 25, Special_Days[k][2] equals all_Years, Special_Days[k][3] equals Merry Christmas! If k equals 2, then Special_Days[k][0] equals January.

In the code, k is run through all its possible values in the array (in this case 0-3) to test if any given date (Special_Days[k][1]) equals the current date during calendar creation, and if the current month matches Special_Days[k][0] (the special day's month), and similarly for the year (Special_Days[k][2]), with all_Years being accepted for any year. If all three conditions are met, Special_Days[k][3] (the label for the day) is retrieved and put into the calendar for that day, along with the link and color effects.

Oh, and the changes you made to the generated link are fine for your purposes and I cannot think of a better way to achieve that.

05-04-2005, 02:27 PM

Thanks for explaining that, it all makes sense now.

With regards to the spacing issue, I tried your suggestions, but it still doesn't look quite how I would like it. I was thinking more along the lines of making each "day" cell wider, to give the calendar a more rectangular overall look, as opposed to being fairly square.

I tried playing with the CELLSPACING and cellpadding in this line:

var HTML_String = '<table><tr><td class=cal valign="top"><table BORDER=4 CELLSPACING=1 cellpadding=2 FRAME="box" BGCOLOR="C0C0C0" BORDERCOLORLIGHT="808080">';
but all I managed to do was increase the size of the cells in all directions, rendering it pointless due to my height restrictions. What I really need was a way of just increasing the horizonal size.

Also, would it be possible to decrease the font-size of the day numbers only, keeping the headings their normal size? I was thinking that this would be another way of saving some space for my event links.

Thanks once again.


05-04-2005, 03:06 PM
I was thinking more along the lines of making each "day" cell wider, to give the calendar a more rectangular overall look, as opposed to being fairly square.Personally, I don't like that but, it is easily accomplished. In a text editor, notepad is fine (it would be a good idea to make a backup copy first, in case you don't like the result and find it hard to reverse your changes) do a replace all for &nbsp; with &nbsp;&nbsp; - in other words replace all occurrences of
&nbsp; with:

05-04-2005, 03:47 PM
In a text editor,
Are you trying to insinuate that WYSIWYG's are no good? ;)

I actually added a couple of these
&nbsp; and it looks much more to my liking now.

I would still like the number font smaller and maybe moved to the top-left of each cell, but no matter what I try and change I seem to get no result. Is something overriding my changes to the HTML_String's? Or am I maybe just being a complete idiot here? (either is quite possible :o )



05-04-2005, 05:57 PM
You now have three occurrences of:

&nbsp;&nbsp;&nbsp;&nbsp;' + Day_Counter + '&nbsp;&nbsp;&nbsp;&nbsp;in the file, which is fine but, from what you say, you'd rather each of them be:

&nbsp;&nbsp;' + Day_Counter + '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;you also have two occurrences of:

<font style="font-size:'+specFont+'px">&nbsp;&nbsp;&nbsp;&nbsp;</font>which you might want to have each be:

<font style="font-size:'+specFont+'px">&nbsp;&nbsp;<br>&nbsp;&nbsp;</font>

05-06-2005, 12:26 PM

I tried your first suggestion and it worked great, unfortunately the second one increased the height of the boxes too much.

Now another question!
How would I change/add another variable so that I can have occasions marked but NOT having links attached to them?

I'm thinking of adding in an extra value in the array and only if that value is say a "y" as opposed to an "n" then it creates the link.


New Problem:
I just tried adding more than one occasion to the same day and only the first is displayed... Is this a permanent problem? I'm guessing that it causes a conflict and resolves it by only displaying the first occasion in the array.


05-06-2005, 04:22 PM
That's why I said might with that one. If you use it though and decrease the font to say, 1.8em in the style section, it might look good to you.

Getting a special day with no link would be a minor rewrite and could be done in the way you propose, just needs to be coded in. I'll have a look at doing so soon.

Having two special days on the same day can be done, sort of. You would have to list them both on the same array entry though, and they would both link to the same place. Ex:

Special_Days[2]=['January','1','all_Years','Happy New Year!<br>Mummer\'s Day Parade']Notice the <br>, you can use other HTML for different colors and what not, if you like. I currently have my Christmas one look like this:

Special_Days[0]=['December','25','all_Years','<font style="color:green">Merry</font> <font style="color:red">Christmas</font><font style="color:green">!</font>']The main reason you cannot use two special days for the same date is that once one is found, the day number is incremented so as a result, the second will not be found. If the day number is not incremented, you would get two days with the same number written to the calendar.

05-06-2005, 05:13 PM
OK, I've made the modification but, to the original file I attached before other modifications we made. Since you have not updated your live example to reflect all the changes you last mentioned, I figured it was pointless to use that. You will have to add your modifications again. That being said, to the original .zip file which is still attached earlier in this thread, replace this line:

HTML_String += '<td class=cal BGCOLOR="FFFFFF" BORDERCOLOR="000000"><a style="text-decoration:none" href="'+Day_Counter+'_'+Month_Label[Month].toLowerCase()+'_'+Special_Days[k][2].toLowerCase()+'.htm"><strong><font color="'+fcol+'">&nbsp;' + Day_Counter + '&nbsp;</font></strong><br><center><font style="font-size:'+specFont+'px"><u>'+Special_Days[k][3]+'</u></a></font></center></td>';with these lines:

HTML_String += '<td class=cal BGCOLOR="FFFFFF" BORDERCOLOR="000000">'
if (Special_Days[k][4]=='link')
HTML_String += '<a style="text-decoration:none" href="'+Day_Counter+'_'+Month_Label[Month].toLowerCase()+'_'+Special_Days[k][2].toLowerCase()+'.htm">'
HTML_String += '<strong><font color="'+fcol+'">&nbsp;' + Day_Counter + '&nbsp;</strong><br><center><font style="font-size:'+specFont+'px">'
if (Special_Days[k][4]=='link')
HTML_String += '<u>'
HTML_String += Special_Days[k][3]
if (Special_Days[k][4]=='link')
HTML_String += '</u></a>'
HTML_String += '</font></font></center></td>';and the Special_Days array now takes this format:

//Configure Special_Days
var Special_Days = new Array;
Special_Days[0]=['December','25','all_Years','Merry Christmas!','link']
Special_Days[1]=['August','28','all_Years','Happy BirthDay!','nolink']
Special_Days[2]=['January','1','all_Years','Happy New Year!','link']
Special_Days[3]=['May','8','2005','Mother\'s Day','nolink']This incidentally, allows for two special days on one date to have two different links, for example:

Special_Days[2]=['January','1','all_Years','<a href="somelink.htm">Happy New Year!</a><br><a href="someother.htm">Mummer\'s Day Parade</a>','nolink']

12-07-2007, 03:11 PM
I want the week to start with mondey, and weekend be painted in red color. How to make it.