Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: Basic Calendar: empty week appears

  1. #1
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default Basic Calendar: empty week appears

    1) Script Title: Basic Calendar

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

    3) Describe problem: In some months (such as this month-- January 2012), there is an extra week at the end of the calendar. The current logic in the calendar does not have an option to fix this. There needs to be a conditional statement to figure out if an extra week is needed at the beginning, or at the end, or neither.

    This relates to the following thread:
    http://www.dynamicdrive.com/forums/s...ad.php?t=66875

    If that logic can be added, then the calendar script can easily be set to start on Mondays instead of Sundays, but that's not part of the bug.
    Daniel - Freelance Web Design | <?php?> | <html>| español | Deutsch | italiano | português | català | un peu de français | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,821
    Thanks
    2
    Thanked 425 Times in 419 Posts

    Default

    Code:
    <!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;
    }
    
    .days #today{
    font-weight: bold;
    color: red;
    }
    
    </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, cH, cDW, cD, brdr,ddmmyy){
     var mn=['January','February','March','April','May','June','July','August','September','October','November','December'];
     var todaydate=new Date(),d=ddmmyy=='ddmmyy',i=d?-5:1,max=d?37:42,os=d?1:0,p=d?2:1,m,y,dim,oD,scanfortoday,t,s=0,x;
    
     m=todaydate.getMonth()+1 //get current month (1-12)
     y=todaydate.getFullYear() //get current year
     dim=new Date(y,m,1,-1,1,1).getDate();
    
     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
    
     scanfortoday=(y==todaydate.getFullYear() && m==todaydate.getMonth()+1)? todaydate.getDate() : 0 //DD added
    
    
     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<max;i++){
    //  for(var i=1;i<43;i++){
       x=((i-oD.od>=0)&&(i-oD.od<dim))? i-oD.od+1 : '&nbsp;';
       if (i<max&&(i<20||isFinite(x)||i%7!=p)){
        if (x==scanfortoday){ //DD added
         x='<span id="today">'+x+'</span>' //DD added
        }
        t+='<td class="'+cD+'">'+x+'</td>';
        if(i%7==os&&i<max){
         t+='</tr><tr align="center">';
        }
       }
       else {
        break
       }
      }
      return t+='</tr></table></div>';
    }
    
    
    </script> </head>
    
    <body>
    <script type="text/javascript">
    
    
    document.write(buildCal("MTWTFSS",",main", "month", "daysofweek", "days", 1,'ddmmyy'));
    </script>
    <script type="text/javascript">
    
    
    document.write(buildCal("SMTWTFS",",main", "month", "daysofweek", "days", 1));
    </script>
    </body>
    
    </html>
    Last edited by vwphillips; 01-12-2012 at 04:58 PM. Reason: removed redundent code
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. The Following User Says Thank You to vwphillips For This Useful Post:

    djr33 (01-12-2012)

  4. #3
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,821
    Thanks
    2
    Thanked 425 Times in 419 Posts

    Default

    corrected and included posted weekend hi light request

    Code:
    <!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">';
     while (i<20||isFinite(day)||i%7!=0){
      day=i+os>=d&&i<md+d-os?i+1+os-d:'&nbsp;';
      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">';
      }
      i++;
     }
     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>
    Last edited by vwphillips; 01-14-2012 at 09:59 AM. Reason: changes in red
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  5. #4
    Join Date
    Aug 2004
    Posts
    9,918
    Thanks
    3
    Thanked 969 Times in 957 Posts
    Blog Entries
    15

    Default

    Thanks for the fix! I'll probably be incorporating the changes to the official version later this week.
    DD Admin

  6. #5
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,821
    Thanks
    2
    Thanked 425 Times in 419 Posts

    Default

    see post 3 fpr changes in red
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  7. #6
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,821
    Thanks
    2
    Thanked 425 Times in 419 Posts

    Default

    with back forward of months

    Code:
    <!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+'">';
     t+='<table class="'+cM+" "+y+" "+m+" "+days+" "+cD+" "+today+" "+satsun+'" cols="7" cellpadding="0" border="'+brdr+'" cellspacing="0" ><tr align="center">';
     t+='<td align="center" class="'+cH+'" onmouseup="UpDate(this,-1);" style="cursor:pointer;" >&lt;</td>';
     t+='<td colspan="5" align="center" class="'+cH+'">'+mn[m-1]+' - '+y+'</td>';
     t+='<td align="center" class="'+cH+'" onmouseup="UpDate(this,1);" style="cursor:pointer;" >&gt;</td>';
     t+='</tr><tr align="center">';
     for(;s<7;s++){
      t+='<td class="'+cDW+'">'+days.substr(s,1)+'</td>';
     }
     t+='</tr><tr align="center">';
     while (i<20||(isFinite(day)&&day!=md)||i%7!=0){
      day=i+os>=d&&i<md+d-os?i+1+os-d:'&nbsp;';
      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">';
      }
      i++;
     }
     return t+='</tr></table></div>';
    }
    
    function UpDate(t,bf){
     while (t.nodeName.toUpperCase()!='TABLE'){
      t=t.parentNode;
     }
     var mn=['January','February','March','April','May','June','July','August','September','October','November','December'];
     var clone=t.cloneNode(false),tbdy=document.createElement('TBODY'),trs=t.getElementsByTagName('TR'),title=trs[0].cloneNode(true),ttds=title.getElementsByTagName('TD'),data=t.className.split(' '),y=data[1],m=data[2],days=data[3],today=new Date(),todaydate=new Date(y,m-1+bf,1,1,1),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,day,nd,ntr,ntd;
     ttds[0].onclick=function(){ UpDate(this,-1); };
     ttds[1].onclick=function(){ UpDate(this,1); };
     clone.className=data[0]+' '+y+' '+m+' '+days+' '+data[4]+' '+data[5]+' '+data[6];
     clone.appendChild(tbdy);
     ttds[1].innerHTML=mn[m-1]+' - '+y;
     tbdy.appendChild(title);
     tbdy.appendChild(trs[1].cloneNode(true));
     while (i<50&&(i<20||(isFinite(day)&&day!=md)||i%7!=0)){
      day=i+os>=d&&i<md+d-os?i+1+os-d:'&nbsp;';
      if (i%7==0||!ntr){
       ntr=trs[2].cloneNode(false);
       tbdy.appendChild(ntr);
      }
      ntd=document.createElement('TD');
      nd=isFinite(day)?new Date(y,m-1,day,1,1,1).getDay():'?';
      ntd.className=data[4]+(day==today.getDate()&&y==today.getFullYear()&&m-1==today.getMonth()&&data[5]!='undefined'?' '+data[5]:'')+(data[6]!='undefined'&&(nd==0||nd==6)?' '+data[6]:'')
      ntd.innerHTML=day;
      ntr.appendChild(ntd);
      i++
     }
     t.parentNode.replaceChild(clone,t);
    }
    </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>
    the change in red is relevant to post 3
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  8. #7
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,821
    Thanks
    2
    Thanked 425 Times in 419 Posts

    Default

    better?

    Code:
    <!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;
    padding: 0px;
    }
    
    .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,more){
     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;
     return build([brdr,cH,cDW,cD,today,satsun,days,y,m,cM],more);
    }
    
    function build(data,more){
     var mn=['January','February','March','April','May','June','July','August','September','October','November','December'];
     var y=data[7],m=data[8],today=new Date(),todaydate=new Date(),d=new Date(y,m-1,1).getDay(),md=new Date(y,m,1,-1,1,1).getDate(),ud=data[6].split(',')[1]=='ddmmyy',i=!ud||d==0?0:7,os=ud?-6:0,t,s=0,day,nd;
     t='<div class="'+data[9]+'">';
     t+='<table class="'+data.join(' ')+'" cols="7" cellpadding="0" border="'+data[0]+'" cellspacing="0" ><tr align="center">';
     if (more!=false){
      t+='<td align="center" class="'+data[1]+'" onmouseup="UpDate(this,-1);" style="cursor:pointer;" >&lt;</td>';
     }
     t+='<td colspan="'+(more!=false?'5':'7')+'" align="center" class="'+data[1]+'">'+mn[m-1]+' - '+y+'</td>';
     if (more!=false){
      t+='<td align="center" class="'+data[1]+'" onmouseup="UpDate(this,1);" style="cursor:pointer;" >&gt;</td>';
     }
     t+='</tr><tr align="center">';
     for(;s<7;s++){
      t+='<td class="'+data[2]+'">'+data[6].substr(s,1)+'</td>';
     }
     t+='</tr><tr align="center">';
     while (i<20||(isFinite(day)&&day!=md)||i%7!=0){
      day=i+os>=d&&i<md+d-os?i+1+os-d:'&nbsp;';
      nd=isFinite(day)?new Date(y,m-1,day,1,1,1).getDay():'?';
      t+='<td class="'+data[3]+(today&&today!='undefined'&&day==today.getDate()&&y==today.getFullYear()&&m-1==today.getMonth()?' '+data[4]:'')+(data[5]&&data[5]!='undefined'&&(nd==0||nd==6)?' '+data[5]:'')+'">'+day+'</td>';
      if(i%7==6){
       t+='</tr><tr align="center">';
      }
      i++;
     }
     return t+='</tr></table></div>';
    }
    
    function UpDate(t,bf){
     while (t.nodeName.toUpperCase()!='TABLE'){
      t=t.parentNode;
     }
     if (t.nodeName.toUpperCase()=='TABLE'){
      var data=t.className.split(' '),y=data[7],m=data[8],todaydate=new Date(y,m-1+bf,1,1,1),y=todaydate.getFullYear(),m=todaydate.getMonth()+1;
      t.parentNode.innerHTML=build([data[0],data[1],data[2],data[3],data[4],data[5],data[6],y,m,data[9]]);
     }
    }
    </script>
    </head>
    
    <body>
    
    <script type="text/javascript">
    
     document.write(buildCal('MTWTFSS,ddmmyy','main',1,'month','daysofweek','days','today','satsun',false));
    
    </script>
    
    <script type="text/javascript">
    
     document.write(buildCal('SMTWTFS,mmddyy','main',1,'month','daysofweek','days','today','satsun'));
    
    </script>
    
    </body>
    
    </html>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  9. #8
    Join Date
    Aug 2004
    Posts
    9,918
    Thanks
    3
    Thanked 969 Times in 957 Posts
    Blog Entries
    15

    Default

    With the latest code, I noticed that cycling though the months causes the border width of the calender to increase incrementally as well.
    DD Admin

  10. #9
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,821
    Thanks
    2
    Thanked 425 Times in 419 Posts

    Default

    sorry about that

    Code:
    <!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;
    padding: 0px;
    }
    
    .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,more){
     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;
     return build([brdr,cH,cDW,cD,today,satsun,days,y,m,cM],more,true);
    }
    
    function build(data,more,srt){
     var mn=['January','February','March','April','May','June','July','August','September','October','November','December'];
     var y=data[7],m=data[8],today=new Date(),todaydate=new Date(),d=new Date(y,m-1,1).getDay(),md=new Date(y,m,1,-1,1,1).getDate(),ud=data[6].split(',')[1]=='ddmmyy',i=!ud||d==0?0:7,os=ud?-6:0,t='',s=0,day,nd;
     if (srt){
      t+='<div class="'+data[9]+'">';
     }
     t+='<table class="'+data.join(' ')+'" cols="7" cellpadding="0" border="'+data[0]+'" cellspacing="0" ><tr align="center">';
     if (more!=false){
      t+='<td align="center" class="'+data[1]+'" onmouseup="UpDate(this,-1);" style="cursor:pointer;" >&lt;</td>';
     }
     t+='<td colspan="'+(more!=false?'5':'7')+'" align="center" class="'+data[1]+'">'+mn[m-1]+' - '+y+'</td>';
     if (more!=false){
      t+='<td align="center" class="'+data[1]+'" onmouseup="UpDate(this,1);" style="cursor:pointer;" >&gt;</td>';
     }
     t+='</tr><tr align="center">';
     for(;s<7;s++){
      t+='<td class="'+data[2]+'">'+data[6].substr(s,1)+'</td>';
     }
     t+='</tr><tr align="center">';
     while (i<20||(isFinite(day)&&day!=md)||i%7!=0){
      day=i+os>=d&&i<md+d-os?i+1+os-d:'&nbsp;';
      nd=isFinite(day)?new Date(y,m-1,day,1,1,1).getDay():'?';
      t+='<td class="'+data[3]+(today&&today!='undefined'&&day==today.getDate()&&y==today.getFullYear()&&m-1==today.getMonth()?' '+data[4]:'')+(data[5]&&data[5]!='undefined'&&(nd==0||nd==6)?' '+data[5]:'')+'">'+day+'</td>';
      if(i%7==6){
       t+='</tr><tr align="center">';
      }
      i++;
     }
     t+='</tr></table>'
     if (srt){
      t+='</div>'
     }
     return t;
    }
    
    function UpDate(t,bf){
     while (t.nodeName.toUpperCase()!='TABLE'){
      t=t.parentNode;
     }
     if (t.nodeName.toUpperCase()=='TABLE'){
      var data=t.className.split(' '),y=data[7],m=data[8],todaydate=new Date(y,m-1+bf,1,1,1),y=todaydate.getFullYear(),m=todaydate.getMonth()+1;
      t.parentNode.innerHTML=build([data[0],data[1],data[2],data[3],data[4],data[5],data[6],y,m,data[9]]);
     }
    }
    </script>
    </head>
    
    <body>
    
    
    <script type="text/javascript">
    
     document.write(buildCal('MTWTFSS,ddmmyy','main',1,'month','daysofweek','days','today','satsun',false));
    
    </script>
    
    <script type="text/javascript">
    
     document.write(buildCal('SMTWTFS,mmddyy','main',1,'month','daysofweek','days','today','satsun'));
    
    </script>
    
    </body>
    
    </html>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  11. #10
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,821
    Thanks
    2
    Thanked 425 Times in 419 Posts

    Default

    with date input

    Code:
    <!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">
    
    .parent {
     width:200px;
    }
    
    .parent2 {
     position:absolute;left:180px;top:220px;width:200px;
    }
    
    .main {
    width:200px;
    border:1px solid black;
    padding: 0px;
    }
    
    .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
    ***********************************************/
    var Months=['January','February','March','April','May','June','July','August','September','October','November','December'];
    
    function buildCal(pcls,days,cM,brdr,cH,cDW,cD,today,satsun,more,id){
     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;
     return build([brdr,cH,cDW,cD,today,satsun,days,y,m,id,cM],more,pcls);
    }
    
    function build(data,more,pcls){
     var obj=document.getElementById(data[9]),y=data[7],m=data[8],today=new Date(),todaydate=new Date(),d=new Date(y,m-1,1).getDay(),md=new Date(y,m,1,-1,1,1).getDate(),ud=data[6].split(',')[1]=='ddmmyy',i=!ud||d==0?0:7,os=ud?-6:0,t='',s=0,day,nd;
     if (pcls){
      t+='<div class="'+pcls+'">';
     }
     t+='<table class="'+data.join(' ')+'" cols="7" cellpadding="0" border="'+data[0]+'" cellspacing="0" ><tr align="center">';
     if (more!=false){
      t+='<td align="center" class="'+data[1]+'" onmouseup="UpDate(this,-1);" style="cursor:pointer;" >&lt;</td>';
     }
     t+='<td colspan="'+(more!=false?'5':'7')+'" align="center" class="'+data[1]+'">'+Months[m-1]+' - '+y+'</td>';
     if (more!=false){
      t+='<td align="center" class="'+data[1]+'" onmouseup="UpDate(this,1);" style="cursor:pointer;" >&gt;</td>';
     }
     t+='</tr><tr align="center">';
     for(;s<7;s++){
      t+='<td class="'+data[2]+'">'+data[6].substr(s,1)+'</td>';
     }
     t+='</tr><tr align="center">';
     while (i<20||(isFinite(day)&&day!=md)||i%7!=0){
      day=i+os>=d&&i<md+d-os?i+1+os-d:'&nbsp;';
      nd=isFinite(day)?new Date(y,m-1,day,1,1,1).getDay():'?';
      t+='<td '+(obj&&day!='&nbsp;'?' onmouseup="Input(this);" style="cursor:pointer;" ':'')+'class="'+data[3]+(today&&today!='undefined'&&day==today.getDate()&&y==today.getFullYear()&&m-1==today.getMonth()?' '+data[4]:'')+(data[5]&&data[5]!='undefined'&&(nd==0||nd==6)?' '+data[5]:'')+'">'+day+'</td>';
      if(i%7==6){
       t+='</tr><tr align="center">';
      }
      i++;
     }
     t+='</tr></table>'
     if (pcls){
      t+='</div>'
     }
     return t;
    }
    
    function UpDate(t,bf){
     while (t.nodeName.toUpperCase()!='TABLE'){
      t=t.parentNode;
     }
     if (t.nodeName.toUpperCase()=='TABLE'){
      var data=t.className.split(' '),y=data[7],m=data[8],todaydate=new Date(y,m-1+bf,1,1,1),y=todaydate.getFullYear(),m=todaydate.getMonth()+1;
      t.parentNode.innerHTML=build([data[0],data[1],data[2],data[3],data[4],data[5],data[6],y,m,data[9],data[10]]);
     }
    }
    
    function Input(t){
     var day=t.innerHTML,data,ud,m,day;
     while (t.nodeName.toUpperCase()!='TABLE'){
      t=t.parentNode;
     }
     if (t.nodeName.toUpperCase()=='TABLE'){
      data=t.className.split(' '),ud=data[6].split(',')[1]=='ddmmyy',m=Months[data[8]-1].substring(0,3),day=day>9?day:'0'+day,obj=document.getElementById(data[9]);
      obj[obj.nodeName.toUpperCase()!='INPUT'?'innerHTML':'value']=(ud?day:m)+'-'+(ud?m:day)+'-'+data[7];
     }
    }
    
    </script>
    </head>
    
    <body>
    
    <span id="tst" />Date</span>
    <script type="text/javascript">
    
     document.write(buildCal('parent','MTWTFSS,ddmmyy','main',1,'month','daysofweek','days','today','satsun',false,'tst'));
    
    </script>
    <br /><br />
    <input id="tst1" />
    <script type="text/javascript">
    
     document.write(buildCal('parent2','SMTWTFS,mmddyy','main',1,'month','daysofweek','days','today','satsun',true,'tst1'));
    
    </script>
    
    
    </body>
    
    </html>
    Last edited by vwphillips; 01-19-2012 at 12:13 PM.
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •