Calendar

[sthlmkatta]

1) Script Title: Calendar

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...iccalendar.htm

3) Describe problem: Everything works fine for me but I would like to change some design parts in the calendar. For example I want to change the names of the days (I would like to have the Swedish initials of the dates) and also I want to change the order of the days. In Sweden we have Monday first in our calendars. I have changed the name of the month in the js code but I couldnt find the names of the week days.

I would also like to change to red color the days in the weekend, how to I tell the code to just color Sundays and Saturdays?

Thanks!

/ Katarina

[djr33]

The calendar is written in a very "basic" way, so it is difficult to change some of it. It doesn't have many options for customization.

You already solved this, but for anyone else with a similar question, here's how to change the months. In basiccalendar.js, change the names of each month in this line:

var mn=['January','February','March','April','May','June','July','August','September','October','November','December'];

To change the days, change the letters in this line:

for(s=0;s<7;s++)t+='<td class="'+cDW+'">'+"SMTWTFS".substr(s,1)+'</td>';

For Swedish, that would be MTOTFLS. Note that this starts with Sunday. We'll change the dates a different way, but that works.


I had trouble fixing the dates so that Monday would appear first, but this works. There's a bug, but it's part of the calendar. What I did was change some of the numbers starting with the second for loop:

function buildCal(m, y, cM, cH, cDW, cD, brdr){
var mn=['january','february','mars','april','maj','juni','juli','augusti','september','oktober','november','december'];
var dim=[31,0,31,30,31,30,31,31,30,31,30,31];

var oD = new Date(y, m-1, 1); //DD replaced line to fix date bug when current day is 31st
oD.od=oD.getDay()+1; //DD replaced line to fix date bug when current day is 31st

var todaydate=new Date() //DD added
var scanfortoday=(y==todaydate.getFullYear() && m==todaydate.getMonth()+1)? todaydate.getDate() : 0 //DD added

dim[1]=(((oD.getFullYear()%100!=0)&&(oD.getFullYear()%4==0))||(oD.getFullYear()%400==0))?29:28;
var t='<div class="'+cM+'"><table class="'+cM+'" cols="7" cellpadding="0" border="'+brdr+'" cellspacing="0"><tr align="center">';
t+='<td colspan="7" align="center" class="'+cH+'">'+mn[m-1]+' - '+y+'</td></tr><tr align="center">';
for(s=0;s<7;s++)t+='<td class="'+cDW+'">'+"MTOTFLS".substr(s,1)+'</td>';
t+='</tr><tr align="center">';
for(i=-5;i<=36;i++){
var x=((i-oD.od>=0)&&(i-oD.od<dim[m-1]))? i-oD.od+1 : '&nbsp;';
if (x==scanfortoday) //DD added
x='<span id="today">'+x+'</span>' //DD added
t+='<td class="'+cD+'">'+x+'</td>';
if(((i)%7==1)&&(i<37))t+='</tr><tr align="center">';
}
return t+='</tr></table></div>';
}

The bug is that for a month like this month, there is an extra week before the month begins. But that's a problem in the original script, except that the extra week appears after the calendar.
The way to fix this would be to check if there will be a blank week and if so, don't display it. I'm not sure how this should be integrated.

I hope someone else can help with that. I'll post a bug report.

[sthlmkatta]

Thank you so much Daniel! You really saved me!

I have another question though. Is it possible to change the colors of the Saturdays and Sundays? The assignment demands us to color Saturdays grey and Sundays red.

Thanks again!

/ Katarina

[djr33]

Due to the way it loops, that's complicated. Honestly, you could probably rewrite this using a somewhat more logical loop with more options if you need that.

You could try to color them by checking what number i is. Try adding it above this line:

t+='<td class="'+cD+'">'+x+'</td>';

So you could end up with something like this:

if((i)%7==3||(i)%7==4) t+='<td class="'+cD+' weekend">'+x+'</td>';
else t+='<td class="'+cD+'">'+x+'</td>';

Then you will need to add a definition for the weekend class in your CSS.
The only thing left to change (if that works-- I didn't test it) is to figure out what numbers (right now 3 and 4) refer to saturday and sunday. Just test them.

Note: is this a homework assignment? We don't usually do homework for others-- it's best to practice yourself.

[djr33]

Well, here's a reply in the bug reports section that may be helpful for you:
http://www.dynamicdrive.com/forums/s...ad.php?t=66885

[vwphillips]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">

.main {
width:200px;
border:1px solid black;
}

.month {
background-color:black;
font:bold 12px verdana;
color:white;
}

.daysofweek {
background-color:gray;
font:bold 12px verdana;
color:white;
}

.days {
font-size: 12px;
font-family:verdana;
color:black;
background-color: lightyellow;
padding: 2px;
}

.today{
font-weight: bold;
color: red;
}

.satsun {
  background-Color:#FFCC66;
}

</style>


<script type="text/javascript" >

/***********************************************
* Basic Calendar-By Brian Gosselin at http://scriptasylum.com/bgaudiodr/
* Script featured on Dynamic Drive (http://www.dynamicdrive.com)
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
function buildCal(days,cM,brdr,cH,cDW,cD,today,satsun){
 var mn=['January','February','March','April','May','June','July','August','September','October','November','December'];
 var todaydate=new Date(),y=todaydate.getFullYear(),m=todaydate.getMonth()+1,d=new Date(y,m-1,1).getDay(),md=new Date(y,m,1,-1,1,1).getDate(),ud=days.split(',')[1]=='ddmmyy',i=!ud||d==0?0:7,os=ud?-6:0,t,s=0,day,nd;
 t='<div class="'+cM+'"><table class="'+cM+'" cols="7" cellpadding="0" border="'+brdr+'" cellspacing="0"><tr align="center">';
 t+='<td colspan="7" align="center" class="'+cH+'">'+mn[m-1]+' - '+y+'</td></tr><tr align="center">';
 for(;s<7;s++){
  t+='<td class="'+cDW+'">'+days.substr(s,1)+'</td>';
 }
 t+='</tr><tr align="center">';
 for(;i<50;i++){
  day=i+os>=d&&i<md+d-os?i+1+os-d:'&nbsp;';
  if (i<20||isFinite(day)||i%7!=0){
   nd=isFinite(day)?new Date(y,m-1,day,1,1,1).getDay():'?';
   t+='<td class="'+cD+(day==todaydate.getDate()&&today?' today':'')+(satsun&&(nd==0||nd==6)?' satsun':'')+'">'+day+'</td>';
   if(i%7==6){
    t+='</tr><tr align="center">';
   }
  }
  else {
   break
  }
 }
 return t+='</tr></table></div>';
}


</script> </head>

<body>

<script type="text/javascript">


document.write(buildCal("MTWTFSS,ddmmyy",",main", 1, "month", "daysofweek", "days","today","satsun"));
</script>
<script type="text/javascript">


document.write(buildCal("SMTWTFS,mmddyy",",main", 1, "month", "daysofweek", "days","today","satsun"));
</script>

</body>

</html>

[sthlmkatta]

Hello again Daniel!

The color thing works but the problem now is that the calender has doubled itself, which is very strange and I cant understand why?

Ps. This is not homework, this is a friend who needs my help

[sthlmkatta]

I fixed it Thanks anyway!