Ivan W. Lam | Reusable Calendar Project Update 2 < PHP < Programming < Experiments

http://ivanwlam.com/experiments/programming

Reusable Calendar Project Update 2

Summary

A work-in-progress update of the reusable calendar project I introduced last time where the frame that goes around the dates of the month moves instead having a different layout for each month.

In this update, the basic functions are added to the arrows. When the arrows are clicked, the script updates the new month and year in the background and updates the date display and calendar frame and cross-outs strips with jQuery animation.

Currently, the calendar can only move by pressing the arrows, month by month. The next stage will involve the ability to click on the month and year digits to jump to a different month, year, decade, century, or millennium.

Notes

I didn’t think the project would work so smoothly so far. I guess a lot of planning and thinking ahead pays off. But the next stage might be a bit tricky, since there will probably be a lot more things to manage with the individual month and year digits being clickable.

You may see the ongoing version that changes and is added upon as time goes on.

Date Created

13 August 2009

Help

jquery.js

This entry was posted on Thursday, August 13th, 2009 at 22:13 and is filed under PHP and jQuery. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Tags: calendar, month, reusable, update, wide, year.

Example

Update 2: calendar-090813.php

PHP in <head>

 <?php
 
 function getInputYr(){
 //    $y=2009;
     $y=date("Y",time());
     return $y;
     }
 function getInputMonth(){
 //    $m=8;
     $m=date("n",time());
     return $m;
     }
 function getInputDay(){
 //    $d=1;
     $d=date("j",time());
     return $d;
     }
 
 
 /* calendar math */
 
 function getDow($y=1582,$m=10,$d=1){
     //dow=day of the week
     
     $yd=$y-1583;
     
     //constants
     $con4=$yd+2;
     $con100=$yd+82;
     $con400=$yd+382;
     
     //potentials/maximum leaps
     $pot4=floor($con4/4);
     $pot100=floor($con100/100);
     $pot400=floor($con400/400);
     
     
     $numNoLeaps=$pot100-$pot400;
     $numLeaps=$pot4-$numNoLeaps;
     
 //    $yrStart=($yd+$numLeaps+6)%7;
     
     //values to add for each month. going to pull only one digit at any given time
     $monthStartList="033614625035";
     
     //add 1 if it's a leap year and it's march or later
     if(isLeap()==true && $m>=3){$leapConst=1;}
         else {$leapConst=0;}
     
     //put all the values together, find the remainder to get day of the week that date lands on
     $dow=($yd+$numLeaps+6+$monthStartList[$m-1]+$d-1+$leapConst)%7;
     
     //have the format just in case
 //    $days_arr=array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
     
     return $dow;
     }
 
 function isLeap(){
     $y=getInputYr();
     
     //every year divisible by 100 doesn't get a leap day
     //but every year divisible by 400 gets a leap,
     //so the 400 must be sought out first
     if($y%400==0){$leap=true;}
     elseif($y%100==0){$leap=false;}
     elseif($y%4==0){$leap=true;}
     else{$leap=false;}
     
     return $leap;
     }
 
 /* end calendar math */
 
 function getMonth_F($m=1){
 
     //formatting the date to text
     $monthList=array("January","February","March","April","May","June","July","August","September","October","November","December");
     $str=$monthList[(getInputMonth()-1)];
     
     return $str;
     }
 
 function getWkStartPos(){
     //find the dow of the 1st of the month
     //adjust the wkStartPos according to the dow value
     //example: if 1st of month starts on thursday (dow==4),
     //the start of the week (sunday) will have to be at dow==0, but its position in the reusable calendar is wkStartPos==2
     $dow=getDow(getInputYr(),getInputMonth(),1);
     $wkStartPos=6-$dow;
     
     return $wkStartPos;
     }
 
 function getDowHeader($i){
     //pretty much for non-script/non-style version, since the css and js overrides the actual text
     $dowHeaderList="SMTWRFA";
     $wkStartPos=getWkStartPos();
     //when the php generates the <th> and count by $i, if it's between the columns that the calendar is showing, put the day of the week in the <th>
     if($i>=$wkStartPos && $i<=$wkStartPos+6){
         echo tabs(2).'<th class="dowHeader" id="dowHeader'.($i-$wkStartPos).'" >';
         echo '<span>';
         echo $dowHeaderList[($i-$wkStartPos)];
         echo '</span>';
         echo '</th>';
         } else {
         echo tabs(2).'<th></th>';
         }
     }
 
 //for css-less and js-less versions
 function formatShowDayPre(){echo '<big><b>';}
 function formatHideDayPre(){echo '<small><del>';}
 
 //mainly for css-less and js-less versions
 //shrink and cross out the days on the reusable calendar that don't apply to the month
 //but bold and enlarge the days that do so it's visually distinguishable even if you don't have css or js
 function currentMonthCellPre($rowNum,$i){
 
     $dow=getDow(getInputYr(),getInputMonth(),1);
     $wkStartPos=getWkStartPos();
     
     $wkStartPos=getWkStartPos();
     if($i>=$wkStartPos && $i<=$wkStartPos+6){//within columns
         if($rowNum<4){ //rows that don't have 29-31
             formatShowDayPre();
             } else {
             $m=getInputMonth();
             if($m==1 || $m==3 || $m==5 || $m==7 || $m==8 || $m==10 || $m==12){ //if month has 31 days, show all days
                 formatShowDayPre();
                 } elseif($m==4 || $m==6 || $m==9 || $m==11){//if it's 30 days
                 //cross out 31
                 if(($wkStartPos>1 && $i==8 && $rowNum==4)
                  || ($wkStartPos<=1 && $i==1 && $rowNum==5)){
                     formatHideDayPre();
                     } else {
                     formatShowDayPre();
                     }
                 } else { //if it's february
                 if(($rowNum==5) || ($i>6)){
                     formatHideDayPre(); //automatically cross it out since february's don't have 30 or 31
                     } else {
                     if(isLeap()==false){
                         if($i==6){
                             formatHideDayPre();
                             } else {
                             formatShowDayPre();
                             }
                         } else {
                         formatShowDayPre();
                         }
                     }
                 //if it has 28 days, cross out 29, 30, 31
                 //if it has 29 days, cross out 30, 31
                 }
             }
         } else {
         formatHideDayPre();
         }
     }
 
 //for css-less and js-less versions
 function formatShowDayPost(){echo '</b></big>';}
 function formatHideDayPost(){echo '</del></small>';}
 
 //mainly for css-less and js-less versions
 //closing tags for shrink/cross and enlarge/bold
 function currentMonthCellEnd($rowNum,$i){
 
     $wkStartPos=getWkStartPos();
     if($i>=$wkStartPos && $i<=$wkStartPos+6){
         if($rowNum<4){ //rows that don't have 29-31
             formatShowDayPost();
             } else {
             $m=getInputMonth();
             if($m==1 || $m==3 || $m==5 || $m==7 || $m==8 || $m==10 || $m==12){ //if month has 31 days, show all days
                 formatShowDayPost();
                 } elseif($m==4 || $m==6 || $m==9 || $m==11){//if it's 30 days
                 //cross out 31
                 if(($wkStartPos>1 && $i==8 && $rowNum==4)
                  || ($wkStartPos<=1 && $i==1 && $rowNum==5)){
                     formatHideDayPost();
                     } else {
                     formatShowDayPost();
                     }
                 } else { //if it's february
                 if(($rowNum==5) || ($i>6)){
                     formatHideDayPost(); //automatically cross it out since february's don't have 30 or 31
                     } else {
                     if(isLeap()==false){
                         if($i==6){
                             formatHideDayPost();
                             } else {
                             formatShowDayPost();
                             }
                         } else {
                         formatShowDayPost();
                         }
                     }
                 //if it has 28 days, cross out 29, 30, 31
                 //if it has 29 days, cross out 30, 31
                 }
             }
         } else {
         formatHideDayPost();
         }
     }
 ?>

External CSS file linked in <head>

 @charset "utf-8";
 /* CSS Document */
 
 body{background-color:#ddeeff;}
 
 th.dowHeader span{display:none;}
 
 #calendarContainer{
     position:relative;
     }
 
 #calendarGridUnit{
     width:260px;
     height:160px;
     position:relative;
     left:0px;
     top:0px;
     background-image:url('/images/fauxTrans/090430-fauxTrans_centerCenter.png');
     background-repeat:repeat;
     padding:20px;
     }
 
 table#calendarTable{
     width:260px;
     height:140px;
     position:absolute;
     }
 
 #calendarTable tr{
     height:20px;
     }
 #calendarTable td,
 #calendarTable th{
     width:20px;
     height:20px;
     }
     
 #calendarTable,
 #calendarTable tr,
 #calendarTable th,
 #calendarTable td{padding:0;}
 
 #calendarTable td.dateCell{
     background-image:url('/images/calendar/090811-mainCalText.png');
     background-repeat:no-repeat;
     }
 
 #calendarTable th.dowHeader span,
 #calendarTable td.dateCell span{display:none;}
 
 #dowHeader0{background-position:0px 0px;}
 #dowHeader1{background-position:-20px 0px;}
 #dowHeader2{background-position:-40px 0px;}
 #dowHeader3{background-position:-60px 0px;}
 #dowHeader4{background-position:-80px 0px;}
 #dowHeader5{background-position:-100px 0px;}
 #dowHeader6{background-position:-120px 0px;}
 
 #dateCell-0-6{background-position:-120px -20px;}
 #dateCell-0-7{background-position:-140px -20px;}
 #dateCell-0-8{background-position:-160px -20px;}
 #dateCell-0-9{background-position:-180px -20px;}
 #dateCell-0-10{background-position:-200px -20px;}
 #dateCell-0-11{background-position:-220px -20px;}
 #dateCell-0-12{background-position:-240px -20px;}
 
 #dateCell-1-0{background-position:0px -40px;}
 #dateCell-1-1{background-position:-20px -40px;}
 #dateCell-1-2{background-position:-40px -40px;}
 #dateCell-1-3{background-position:-60px -40px;}
 #dateCell-1-4{background-position:-80px -40px;}
 #dateCell-1-5{background-position:-100px -40px;}
 #dateCell-1-6{background-position:-120px -40px;}
 #dateCell-1-7{background-position:-140px -40px;}
 #dateCell-1-8{background-position:-160px -40px;}
 #dateCell-1-9{background-position:-180px -40px;}
 #dateCell-1-10{background-position:-200px -40px;}
 #dateCell-1-11{background-position:-220px -40px;}
 #dateCell-1-12{background-position:-240px -40px;}
 
 #dateCell-2-0{background-position:0px -60px;}
 #dateCell-2-1{background-position:-20px -60px;}
 #dateCell-2-2{background-position:-40px -60px;}
 #dateCell-2-3{background-position:-60px -60px;}
 #dateCell-2-4{background-position:-80px -60px;}
 #dateCell-2-5{background-position:-100px -60px;}
 #dateCell-2-6{background-position:-120px -60px;}
 #dateCell-2-7{background-position:-140px -60px;}
 #dateCell-2-8{background-position:-160px -60px;}
 #dateCell-2-9{background-position:-180px -60px;}
 #dateCell-2-10{background-position:-200px -60px;}
 #dateCell-2-11{background-position:-220px -60px;}
 #dateCell-2-12{background-position:-240px -60px;}
 
 #dateCell-3-0{background-position:0px -80px;}
 #dateCell-3-1{background-position:-20px -80px;}
 #dateCell-3-2{background-position:-40px -80px;}
 #dateCell-3-3{background-position:-60px -80px;}
 #dateCell-3-4{background-position:-80px -80px;}
 #dateCell-3-5{background-position:-100px -80px;}
 #dateCell-3-6{background-position:-120px -80px;}
 #dateCell-3-7{background-position:-140px -80px;}
 #dateCell-3-8{background-position:-160px -80px;}
 #dateCell-3-9{background-position:-180px -80px;}
 #dateCell-3-10{background-position:-200px -80px;}
 #dateCell-3-11{background-position:-220px -80px;}
 #dateCell-3-12{background-position:-240px -80px;}
 
 #dateCell-4-0{background-position:0px -100px;}
 #dateCell-4-1{background-position:-20px -100px;}
 #dateCell-4-2{background-position:-40px -100px;}
 #dateCell-4-3{background-position:-60px -100px;}
 #dateCell-4-4{background-position:-80px -100px;}
 #dateCell-4-5{background-position:-100px -100px;}
 #dateCell-4-6{background-position:-120px -100px;}
 #dateCell-4-7{background-position:-140px -100px;}
 #dateCell-4-8{background-position:-160px -100px;}
 #dateCell-4-9{background-position:-180px -100px;}
 #dateCell-4-10{background-position:-200px -100px;}
 #dateCell-4-11{background-position:-220px -100px;}
 #dateCell-4-12{background-position:-240px -100px;}
 
 #dateCell-5-0{background-position:0px -120px;}
 #dateCell-5-1{background-position:-20px -120px;}
 #dateCell-5-2{background-position:-40px -120px;}
 #dateCell-5-3{background-position:-60px -120px;}
 #dateCell-5-4{background-position:-80px -120px;}
 #dateCell-5-5{background-position:-100px -120px;}
 #dateCell-5-6{background-position:-120px -120px;}
 #dateCell-5-7{background-position:-140px -120px;}
 #dateCell-5-8{background-position:-160px -120px;}
 
 #dateCell-6-0{background-position:0px -140px;}
 #dateCell-6-1{background-position:-20px -140px;}
 
 #calFrame{
     width:180px;
     height:20px;
     position:relative;
     left:-20px;
     top:0px;
     }
     
 #calFrame-top,
 #calFrame-bottom{width:180px;height:20px;}
 
 #calFrame-left,
 #calFrame-right{width:20px;height:120px;}
 
 #calFrame-left,
 #calFrame-right,
 #calFrame-bottom{position:absolute;}
 
 .calFrameElem{
     background-image:url('/images/calendar/090811-calFrameWHeader.png');
     background-repeat:no-repeat;
     }
 
 #calFrame-top{background-position:0px 0px;}
 #calFrame-left{
     background-position:0px -20px;
     top:20px;
     }
 #calFrame-right{
     background-position:-160px -20px;
     right:0px;
     top:20px;
     }
 #calFrame-bottom{
     background-position:0px -140px;
     top:140px;
     }
 
 #calCross{
     width:200px;
     height:20px;
     position:absolute;
     top:140px;
     left:80px;
     }
 
 .calCrossElem{
     height:20px;
     background-image:url('/images/calendar/090811-calCross.png');
     background-repeat:no-repeat;
     position:absolute;
     }
 
 #calCross-top{
     width:200px;
     background-position:0px -20px;
     }
 
 #calCross-bottom{
     width:60px;
     background-position:-140px 0px;
     right:0px;
     top:-20px;
     }
     
 /* date display */
 
 #dateDisplay{
     width:220px;
     height:60px;
     position:absolute;
     top:20px;
     left:320px;
     }
 
 #ddMonth,
 #ddYear1,
 .ddYear234{
     background-image:url('/images/calendar/090812-dd-words-strips-shrink.png');
     background-repeat:no-repeat;
     position:absolute;
     top:10px;
     }
     
 #ddMonth{
     width:36px;
     height:260px;
     background-position:0px 0px;
     left:52px;
     }
     
 #ddYear1{
     width:16px;
     height:200px;
     background-position:-40px 0px;
     left:92px;
     }
     
 .ddYear234{
     width:16px;
     height:220px;
     background-position:-60px 0px;
     }
 
 #ddYear2{left:112px;}
 #ddYear3{left:132px;}
 #ddYear4{left:152px;}
 
     
 #dateFrame{
     width:220px;
     height:20px;
     position:relative;
     }
     
 .dateFrameElem{
     background-image:url('/images/calendar/090812-dateFrame.png');
     background-repeat:no-repeat;
     position:absolute;
     }
     
 #dateFrame-top,
 #dateFrame-bottom{
     width:220px;
     height:20px;
     }
 
 #dateFrame-left,
 #dateFrame-right{
     width:40px;
     height:20px;
     top:20px;
     }
 
 #dateFrame-top{background-position:0px 0px;}
 #dateFrame-left{background-position:0px -20px;}
 #dateFrame-right{
     background-position:-180px -20px;
     right:0px;
     }
 #dateFrame-bottom{
     background-position:0px -40px;
     top:40px;
     }
     
 #dateFrame-leftArrow,
 #dateFrame-rightArrow{
     width:20px;
     height:20px;
     background-repeat:no-repeat;
     position:absolute;
     top:20px;
     cursor:pointer;
     }
 
 #dateFrame-leftArrow{
     background-image:url('/images/calendar/090812-dateFrame-leftArrow.png');
     left:10px;
     }
 
 #dateFrame-rightArrow{
     background-image:url('/images/calendar/090812-dateFrame-rightArrow.png');
     right:10px;
     }

PHP in Example

 <div>
 <h3>Reusable Calendar</h3>
 <h4><?php echo getMonth_F()." ".getInputYr(); ?></h4>
     <div id="calendarContainer">
         <div id="dateDisplay">
             <?php 
             
             //calculate and offset the css top values of the display strips depending on what month and year it is
             $m=getInputMonth();
             $monthTop=(25-(15*$m));
             
             $y=getInputYr();
             $y1=floor(($y/1000));
             $y2=floor(($y-($y1*1000))/100);
             $y3=floor(($y-($y1*1000)-($y2*100))/10);
             $y4=$y-($y1*1000)-($y2*100)-($y3*10);
             
             $y1Top=25-(15*$y1);
             $y2Top=10-(15*$y2);
             $y3Top=10-(15*$y3);
             $y4Top=10-(15*$y4);
             ?>
             <!-- some things in this div need to be built in js 
             basically, js-less versions won't see any of this, which means users won't see the date display, since they can't really interactive with the display w/o js.
             -->
             <div id="ddMonth" style="top:<?php echo $monthTop; ?>px;"></div>
             <div id="ddYear1" style="top:<?php echo $y1Top; ?>px;" ></div>
             <div id="ddYear2" class="ddYear234" style="top:<?php echo $y2Top; ?>px;" ></div>
             <div id="ddYear3" class="ddYear234" style="top:<?php echo $y3Top; ?>px;" ></div>
             <div id="ddYear4" class="ddYear234" style="top:<?php echo $y4Top; ?>px;" ></div>
             <div id="dateFrame">
                 <div id="dateFrame-top" class="dateFrameElem"></div>
                 <div id="dateFrame-left" class="dateFrameElem"></div>
                 <div id="dateFrame-right" class="dateFrameElem"></div>
                 <div id="dateFrame-bottom" class="dateFrameElem"></div>
                 
                 <!-- dateFrame arrows supposed to be added in js -->
             </div>
         
         </div><!-- end #dateDisplay -->
         <div id="calendarGridUnit">
             <table id="calendarTable" cellpadding="0" cellspacing="0">
                 <col align="center" />
                 <col align="center" />
                 <col align="center" />
                 <col align="center" />
                 <col align="center" />
                 <col align="center" />
                 <col align="center" />
                 <col align="center" />
                 <col align="center" />
                 <col align="center" />
                 <col align="center" />
                 <col align="center" />
                 <col align="center" />
                 <tr><?php 
                     for($i=0;$i<13;$i++){
                         getDowHeader($i);
                         }
                     ?>
                 </tr>
                 
                 <?php
                 
                 //just listing out the parameters for filling the table with calendar values
                 $calRowData=array(
                     array("rowStartVal" => 6, "rowEndVal" => 13, "cellValConst" => (-5), "preColspan" => 6),
                     array("rowStartVal" => 0, "rowEndVal" => 13, "cellValConst" => (2)),
                     array("rowStartVal" => 0, "rowEndVal" => 13, "cellValConst" => (9)),
                     array("rowStartVal" => 0, "rowEndVal" => 13, "cellValConst" => (16)),
                     array("rowStartVal" => 0, "rowEndVal" => 9, "cellValConst" => (23), "postColspan" => 4),
                     array("rowStartVal" => 0, "rowEndVal" => 2, "cellValConst" => (30), "postColspan" => 12)
                     );
                 
                 //go through the array above and output the days. if there's empty space before and after, output them
                 foreach($calRowData as $key => $datum){
                     echo tabs(1).'<tr id="calRow-'.$key.'">';
                     if($datum["preColspan"]){
                         echo tabs(2).'<td colspan="'.$datum["preColspan"].'"></td>';
                         }
                     for($i=$datum["rowStartVal"];$i<$datum["rowEndVal"];$i++){
                         echo tabs(2).'<td class="dateCell" id="dateCell-'.$key.'-'.$i.'">';
                         echo '<span>';
                         currentMonthCellPre($key,$i);
                         echo ($i+$datum["cellValConst"]);
                         currentMonthCellEnd($key,$i);
                         echo '</span>';
                         echo '</td>';
                         }
                     if($datum["postColspan"]){
                         echo tabs(2).'<td colspan="'.$datum["postColspan"].'"></td>';
                         }
                     echo tabs(1).'</tr>';
                     nl();
                     }
                 
                 
                 ?>
             
                                 
             
             </table>
             <div id="calCross" style="left:<?php 
                 //determine position of the crosses
                 $calCrossLeft=0;
                 
                 //similar to the css-less stylings: find out what month it is, and move the cross-out strip accordingly to cross out days that don't exist in those months
                 $m=getInputMonth();
                 if($m==1 || $m==3 || $m==5 || $m==7 || $m==8 || $m==10 || $m==12){ //if month has 31 days, show all days
                     $calCrossLeft=60+20;
                     } elseif($m==4 || $m==6 || $m==9 || $m==11){//if it's 30 days
                     //cross out 31
                     if(($wkStartPos>1)
                      || ($wkStartPos<=1)){
                         $calCrossLeft=20+20;
                         } else {
                         $calCrossLeft=60+20;
                         }
                     } else { //if it's february
                     if(isLeap()==false){
                         $calCrossLeft=(-20+20);
                         } else {
                         $calCrossLeft=0+20;
                         }
                     //if it has 28 days, cross out 29, 30, 31
                     //if it has 29 days, cross out 30, 31
                     }
                 
                 echo ($calCrossLeft);
                 ?>px;">
                 <div id="calCross-top" class="calCrossElem"></div><!--end #calCross-top -->
                 <div id="calCross-bottom" class="calCrossElem"></div><!--end #calCross-bottom -->
             </div><!-- end #calCross -->
             
             
             <!-- again, css-less/js-less won't see the frame, since the highlighting is already done by enlarging and bolding -->
             <div id="calFrame" style="left:<?php echo ((20*getWkStartPos())-20); ?>px;">
                 <div id="calFrame-top" class="calFrameElem" ></div><!-- end #calFrame-top -->
                 <div id="calFrame-left" class="calFrameElem" ></div><!-- end #calFrame-left -->
                 <div id="calFrame-right" class="calFrameElem" ></div><!-- end #calFrame-right -->
                 <div id="calFrame-bottom" class="calFrameElem" ></div><!-- end #calFrame-bottom -->
                 
             </div><!--end #calFrame-->
         </div><!--end #calendarGridUnit -->
 
     </div><!--end #calendarContainer -->
 </div>

Written-out JavaScript at the end of the document

 <script type="text/javascript">
 <!--
 
 $("#dateFrame")
     .append('<div id="dateFrame-leftArrow" title="Previous Month"></div><div id="dateFrame-rightArrow" title="Next Month"></div>'); //add the arrows
 
 //trigger functions when the arrow are clicked
 $("#dateFrame-leftArrow").click(function(){leftArrowClicked();});
 $("#dateFrame-rightArrow").click(function(){rightArrowClicked();});
 
 var currY=<?php echo getInputYr();?>;
 var currM=<?php echo getInputMonth(); ?>;
 
 var newY=currY;
 var newM=currM;
 
 //for "errors" or limitations
 var message="";
 
 //positioning values that may change depending on the graphics
 var ddMonthOffset=25;
 var ddY1Offset=25;
 var ddY234Offset=10;
 
 var ddMonthIncrem=15;
 var ddY1Increm=15;
 var ddY234Increm=15;
 
 var calFrameOffset=20;
 var calFrameIncrem=20;
 
 
 function globalCheck(){
 // nothing that needs checking before actions are triggered, yet
 //    console.log("global check");
     }
 
 function globalUpdate(){
 //always update the values and positions of things when an interactive event is triggered
 //    console.log("global update");
 
     //move the display and calendar fauxTrans
     updateDdTops();
     updateCal();
     
     //assign the new values to the old values
     currM=newM;
     currY=newY;
     
     //change the tooltip when rolling over the arrows
     updateArrowTitleAttr();
     
     //if there's an error/limitation issue, show it
     displayMessage();
     
 //    console.log("//");
     }
     
 function leftArrowClicked(){
 //    console.log("left");
     //always start with a check
     globalCheck();
     
     //determine the new months and years depending on the conditions, such as year change and the october 1582 start-of-gregorian-calendar limit
     if(currY==1582 && currM==10){
         //can't go any earlier than october 1582, when the gregorian calendar was first adopted
         newM=currM;
         newY=currY;
         message="oct1852";
         } else if(currM==1){
         //year change
         newM=12;
         newY=currY-1;
         clearMessage();
         } else {
         //normal
         newM=currM-1;
         newY=currY;
         clearMessage();
         }
     
     //update everything when it's all said that d one
     globalUpdate();
     }
 
 function rightArrowClicked(){
 //    console.log("right");
     // always start with a check
     globalCheck();
     
     //determine the new months and years depending on the conditions, such as year change and the dec 9999 end-of-four-digit years limit
     if(currY==9999 && currM==12){
         newM=currM;
         newY=currY;
         message="dec9999";
         } else if (currM==12){
         //year change
         newM=1;
         newY=currY+1;
         clearMessage();
         } else {
         //normal
         newM=currM+1;
         newY=currY;
         clearMessage();
         }
     globalUpdate();
     }
     
 function updateDdTops(){
     //find out new position for the strips, the mov them
 
     var newDdMonthTop=ddMonthOffset-(ddMonthIncrem*newM);
     
     var newY1=Math.floor(newY/1000);
     var newY2=Math.floor((newY-(newY1*1000))/100);
     var newY3=Math.floor((newY-(newY1*1000)-(newY2*100))/10);
     var newY4=(newY-(newY1*1000)-(newY2*100)-(newY3*10));
     
     var newDdY1Top=ddY1Offset-(ddY1Increm*newY1);
     var newDdY2Top=ddY234Offset-(ddY234Increm*newY2);
     var newDdY3Top=ddY234Offset-(ddY234Increm*newY3);
     var newDdY4Top=ddY234Offset-(ddY234Increm*newY4);
     
     $("#ddMonth").animate(
         {"top":newDdMonthTop+"px"}
         );
         
     $("#ddYear1").animate(
         {"top":newDdY1Top+"px"}
         );
         
     $("#ddYear2").animate(
         {"top":newDdY2Top+"px"}
         );
         
     $("#ddYear3").animate(
         {"top":newDdY3Top+"px"}
         );
         
     $("#ddYear4").animate(
         {"top":newDdY4Top+"px"}
         );
     }
 
 function updateCal(){
     //two things to update/move: the frame, and the cross strip
     updateCalFrame();
     updateCalCross();
     }
 
 function updateCalFrame(){
     //move the the new position based on the month and the presets
     $("#calFrame").animate(
         {"left":((calFrameIncrem*getWkStartPos())-calFrameOffset)+"px"} //value is temporary
         );
     }
     
 function updateCalCross(){
     //determine position of the crosses
     var calCrossLeft=0;
     var wkStartPos=getWkStartPos();
     
     m=newM;
     if(m==1 || m==3 || m==5 || m==7 || m==8 || m==10 || m==12){ //if month has 31 days, show all days
         calCrossLeft=60+20;
         } else if(m==4 || m==6 || m==9 || m==11){//if it's 30 days
         //cross out 31
         if((wkStartPos>1)
          || (wkStartPos<=1)){
             calCrossLeft=20+20;
             } else {
             calCrossLeft=60+20;
             }
         } else { //if it's february
         if(isLeap()==false){
             calCrossLeft=(-20+20);
             } else {
             calCrossLeft=0+20;
             }
         //if it has 28 days, cross out 29, 30, 31
         //if it has 29 days, cross out 30, 31
         }
                 
     $("#calCross").animate(
         {"left":calCrossLeft+"px"} //value is temporary
         );
     }
 
 //calendar math 
 //similar to php version
 
 function getDow(y,m,d){
     
     var yd=y-1583;
     
     var con4=yd+2;
     var con100=yd+82;
     var con400=yd+382;
     
     var pot4=Math.floor(con4/4);
     var pot100=Math.floor(con100/100);
     var pot400=Math.floor(con400/400);
     
     var numNoLeaps=pot100-pot400;
     var numLeaps=pot4-numNoLeaps;
     
     var yrStart=(yd+numLeaps+6)%7;
     
     var monthStartList="033614625035";
     
     if(isLeap()==true && m>=3){var leapConst=1;}
         else {var leapConst=0;}
     
     var dow=(yd+numLeaps+6+Number(monthStartList.substring(m-1,m))+d-1+leapConst)%7;
     
     return dow;
     }
 
 function isLeap(){
     var y=newY;
     var leap;
     
     if(y%400==0){leap=true;}
     else if(y%100==0){leap=false;}
     else if(y%4==0){leap=true;}
     else{leap=false;}
     
     return leap;
     }
 
 function getWkStartPos(){
     //find the dow of the 1st of the month
     //adjust the wkStartPos according to the dow value
     var dow=getDow(newY,newM,1);
     var wkStartPos=6-dow;
     
     return wkStartPos; // temp: 0 is the left most position
     }
 
 //end calendar math
 
 
 function updateArrowTitleAttr(){
     //change tooltip values by determining id of next and previous months
     var newMPrev;
     var newYPrev;
     var newMNext;
     var newYNext;
     
     $("#dateFrame-leftArrow").css({"display":"block"});
     $("#dateFrame-rightArrow").css({"display":"block"});
     if(currY==1582 && currM==10){
         $("#dateFrame-leftArrow").css({"display":"none"});
         newYPrev=1582;
         newMPrev=10;
         newYNext=1582;
         newMNext=11;
         } else if(currY==9999 && currM==12){
         $("#dateFrame-rightArrow").css({"display":"none"});
         newYPrev=9999;
         newMPrev=11;
         newYNext=9999;
         newMNext=12;
         } else if(currM==1){
         newYPrev=currY-1;
         newMPrev=12;
         newYNext=currY;
         newMNext=2;
         } else if(currM==12){
         newYPrev=currY;
         newMPrev=11;
         newYNext=currY+1;
         newMNext=1;
         } else {
         newYPrev=currY;
         newMPrev=currM-1;
         newYNext=currY;
         newMNext=currM+1;
         }
     
     //change the tooltips
     $("#dateFrame-leftArrow").attr("title",dateFormat_F(newMPrev)+" "+newYPrev);
     $("#dateFrame-rightArrow").attr("title",dateFormat_F(newMNext)+" "+newYNext);
     
     }
     
 //like php version
 function dateFormat_F(monthNumNoLeadZeros){
     var monthList=new Array("January","February","March","April","May","June","July","August","September","October","November","December");
     
     return monthList[(monthNumNoLeadZeros-1)];
     }
     
 //messages
 
 function clearMessage(){
     message="";
     }
     
 function displayMessage(){
     if(message!=""){
 //        console.log(message);
         }
     }
 
 //do an update with everything when the page loads
 globalUpdate();
 
 //-->
 </script>

Experiments at ivanwlam.com

Main Navigation

Experiment Categories:

RSS Feeds: