PDA

View Full Version : Simple calendar creator



alex1812
12-30-2010, 11:18 AM
I am not an expert in javascript but I know some basics.
I use for my personal site the simple calendar creator script by Brian Gosselin which I attach.
I have tried many ways to change the appearance of the dates i.e from "SMTWTFS" to something like "Su, Mo, Tu, We, Th, Fr, Sa" but I have not been succesful doing it. Any idea on how to modify the script to get it ?
P.s
I wish to all of you Happy New Year



function buildCal(m, y, cM, cH, cDW, cD, brdr, sDay, action){
var mn=['January','February','March','April','May','June','July','August','September','October','November','December'];
var dim=[31,0,31,30,31,30,31,31,30,31,30,31];

if(sDay<1 || sDay>7)sDay=1;

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 tmpod=oD.od-sDay;
if(tmpod<0)tmpod=7+tmpod;
oD.od=tmpod+1;

var wkstr="SMTWTFS".substr(sDay-1,"SMTWTFS".length)+"SMTWTFS".substr(0,sDay-1);

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

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

dpcoombs
12-31-2010, 05:45 AM
Use this instead:

<script type="application/javascript" language="javascript">
function buildCal(m, y, cM, cH, cDW, cD, brdr, sDay, action){
var mn=['January','February','March','April','May','June','July','August','September','October','November','December'];
var dn=['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
var dim=[31,0,31,30,31,30,31,31,30,31,30,31];

if(sDay<1 || sDay>7)sDay=1;

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 tmpod=oD.od-sDay;
if(tmpod<0)tmpod=7+tmpod;
oD.od=tmpod+1;


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

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

I replaced this:
var wkstr="SMTWTFS".substr(sDay-1,"SMTWTFS".length)+"SMTWTFS".substr(0,sDay-1);
with this:
var dn=['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
The day names can now be anything you like.
and this line:
for(s=0;s<7;s++)t+='<td class="'+cDW+'">'+wkstr.substr(s,1)+'</td>';
with this:
for(s=0;s<7;s++)t+='<td class="'+cDW+'">'+dn[s]+'</td>';

Good luck,
David

alex1812
12-31-2010, 04:49 PM
Thank you dpcoombs.It works perfect. It was the best present for Christmas.
Also I thing it is an improvment to Simple Calendar as now it can be multilingual.
I will work also to improve it with different colours on weekend days. Again thank you for your post.

alex1812
12-31-2010, 05:06 PM
The only think is that, if you want to start the week from Monday you have to write
var dn=[ 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];

and change the sDay from 1 to 2 whenever you use it as an output.

dpcoombs
12-31-2010, 11:59 PM
Yes, you're right. I'll try to fix that problem, but it's New Year's Eve, so not tonight!.
David