Make calendar start on the right day

From the following code:

var returnToField = '';
var calDate;

// SET THE INITIAL CALENDAR DATE TO TODAY OR TO THE EXISTING VALUE IN dateField
function setInitialDate() {
 calDate = new Date();

// KEEP TRACK OF THE CURRENT DAY VALUE
    calDay  = calDate.getDate();

    // SET DAY VALUE TO 1... TO AVOID JAVASCRIPT DATE CALCULATION ANOMALIES
    // (IF THE MONTH CHANGES TO FEB AND THE DAY IS 30, THE MONTH WOULD CHANGE TO MARCH
    //  AND THE DAY WOULD CHANGE TO 2.  SETTING THE DAY TO 1 WILL PREVENT THAT)

    calDate.setDate(1);
    }


/// Globals for current day, month, and year

// GET NUMBER OF DAYS IN MONTH
function getDaysInMonth()  {

    var days;
    var month = calDate.getMonth()+1;
    var year  = calDate.getFullYear();
    var day      = calDay;

    // RETURN 31 DAYS
    if (month==1 || month==3 || month==5 || month==7 || month==8 ||
        month==10 || month==12)  {
        days=31;
    }
    // RETURN 30 DAYS
    else if (month==4 || month==6 || month==9 || month==11) {
        days=30;
    }
    // RETURN 29 DAYS
    else if (month==2)  {
        if (isLeapYear(year)) {
            days=29;
        }
        // RETURN 28 DAYS
        else {
            days=28;
        }
    }
    return (days);
}



// CHECK TO SEE IF YEAR IS A LEAP YEAR
function isLeapYear (Year) {

    if (((Year % 4)==0) && ((Year % 100)!=0) || ((Year % 400)==0)) {
        return (true);
    }
    else {
        return (false);
    }
}

function getFirstDayofMonth() {
   // GET MONTH, AND YEAR FROM GLOBAL CALENDAR DATE
    var month   = calDate.getMonth();
   var  year    = calDate.getFullYear();
    var firstOfMonth = new Date (year, month, 1);

    // GET THE DAY OF THE WEEK THE FIRST DAY OF THE MONTH FALLS ON
      var startingPos  = firstOfMonth.getDay();
       }


// ENSURE THAT THE YEAR IS FOUR DIGITS IN LENGTH
function isFourDigitYear(year) {

    if (year.length != 4) {
        top.newWin.frames['topCalFrame'].document.calControl.year.value = calDate.getFullYear();
        top.newWin.frames['topCalFrame'].document.calControl.year.select();
        top.newWin.frames['topCalFrame'].document.calControl.year.focus();
    }
    else {
        return true;
    }
}


function buildCalendar() {

var currDay = 0;
var currDate = 1;
var currCol = 0;
var currRow = 0;
var currWeek = currRow++;
var myCell = '';

var daysInMonth = getDaysInMonth();
var startDayOfMonth = getFirstDayofMonth();


var calGridder = document.getElementById("calGrid");
// alert('calGrid is ' + calGridder + '/n ');
// loop over rows
// alert (' num rows ' + calGridder.childNodes.length);

for (var i=1; i<= 5; i++) {
      var myrow = calGridder.childNodes.item(i);
// alert(myrow.nodeName + ' of  num cols ' + myrow.childNodes.length);
      for(var j=startingPos.value; j<7; j++) {
      // loop over cells
                   myCell = myrow.childNodes.item(j);
                  //make sure you're not after the end of the month and make sure not at end of calendar
                  if(currDate > daysInMonth || (i=1 && j < startDayofMonth)) myCell.setAttribute("value", "00') else {
                        myCell.setAttribute("value", currDate + 'us')
                        alert(myCell.nodeName + ' ' + myCell.getAttribute('value' ) + myCell.getAttribute('class' ));
                        currDate++;
                  }
            }
      }

}

function returnDate(day) {
window.status='returned';
}

</script>
      <vbox>
            <hbox>
                  <button label="&lt;  " class="calbutton" style=" min-width:  25px;" flex="0"/>
                  <text value="August 2001" class="calheader"/>
                  <button label="&gt; " class="calbutton" style=" min-width:  25px;" flex="0"/>
            </hbox>
            <grid width="100%" flex="1">
                  <columns>
                        <column class="calcolumn"/>
                        <column class="calcolumn"/>
                        <column class="calcolumn"/>
                        <column class="calcolumn"/>
                        <column class="calcolumn"/>
                        <column class="calcolumn"/>
                        <column class="calcolumn"/>
                        <column class="calcolumn"/>
                  </columns>
                  <!-- Dynamically populated area begins here  -->
                  <rows id="calGrid">
                        <row>
                              <text value="Su" class="caldayofweek"/>
                              <text value="Mo" class="caldayofweek"/>
                              <text value="Tu" class="caldayofweek"/>
                              <text value="We" class="caldayofweek"/>
                              <text value="Th" class="caldayofweek"/>
                              <text value="Fr" class="caldayofweek"/>
                              <text value="Sa" class="caldayofweek"/>
                        </row>
                        <row>
                              <text value="1" class="caldate" onclick="returnDate(this.value);"/>
                              <text value="2" class="caldate2" onclick="returnDate(this.value);"/>
                              <text value=" 3" class="caldate3" onclick="returnDate(this.value);"/>
                              <text value=" 4" class="caldate" onclick="returnDate(this.value);"/>
                              <text value=" 5" class="caldate" onclick="returnDate(this.value);"/>
                              <text value=" 6" class="caldate" onclick="returnDate(this.value);"/>
                              <text value=" 7" class="caldate" onclick="returnDate(this.value);"/>
                        </row>
                        <row>
                              <text value="8" class="caldate" onclick="returnDate(this.value);"/>
                              <text value=" 9" class="caldate" onclick="returnDate(this.value);"/>
                              <text value="10" class="caldate" onclick="returnDate(this.value);"/>
                              <text value="11" class="caldate" onclick="returnDate(this.value);"/>
                              <text value="12" class="caldate"/>
                              <text value="13" class="caldate"/>
                              <text value="14" class="caldate"/>
                        </row>
                        <row>
                              <text value="15" class="caldate"/>
                              <text value="16" class="caldate"/>
                              <text value="17" class="caldate"/>
                              <text value="18" class="caldate"/>
                              <text value="19" class="caldate"/>
                              <text value="20" class="caldate"/>
                              <text value="21" class="caldate"/>
                        </row>
                        <row>
                              <text value="22" class="caldate"/>
                              <text value="23" class="caldate"/>
                              <text value="24" class="caldate"/>
                              <text value="25" class="caldate"/>
                              <text value="26" class="caldate"/>
                              <text value="27" class="caldate"/>
                              <text value="28" class="caldate"/>
                        </row>
                        <row>
                              <text value="29" class="caldate"/>
                              <text value="30" class="caldate"/>
                              <text value=" 31" class="caldate"/>
                              <text value=" " class="caldate"/>
                              <text value=" " class="caldate"/>
                              <text value=" " class="caldate"/>
                              <text value=" " class="caldate"/>
                        </row>
                  </rows>
            </grid>
      </vbox>
</window>


How do i make the calendar start on the right day?
plszymkowiczAsked:
Who is Participating?
 
james_beilbyConnect With a Mentor Commented:
function getFirstDayofMonth() {
  // GET MONTH, AND YEAR FROM GLOBAL CALENDAR DATE
  var month   = calDate.getMonth();
  var  year    = calDate.getFullYear();
  var firstOfMonth = new Date (year, month, 1);

  // GET THE DAY OF THE WEEK THE FIRST DAY OF THE MONTH FALLS ON
  var startingPos  = firstOfMonth.getDay();
}

This function must return a value, so replace it with:

function getFirstDayofMonth() {
  // GET MONTH, AND YEAR FROM GLOBAL CALENDAR DATE
  var month   = calDate.getMonth();
  var  year    = calDate.getFullYear();
  var firstOfMonth = new Date (year, month, 1);

  return firstOfMonth.getDay();
}


Now for the loop in buildCalendar()...

    for (var i=1; i<6; i++) {
        var myrow = calGridder.childNodes.item(i);
        for(var j=0; j<7; j++) {
            myCell = myrow.childNodes.item(j);
                 
            if(currDate > daysInMonth || (i==1 && j<startDayofMonth))
                myCell.setAttribute("value", "00");
            else
                myCell.setAttribute("value", currDate + 'us');
   
            currDate++;
         }
    }
0
 
james_beilbyCommented:
It seems that there's a problem with this condition when cycling through each day of the month in buildCalendar():
j < startDayofMonth

startDayOfMonth is defined according to the return value of getFirstDayOfMonth():
var startDayOfMonth = getFirstDayofMonth();

However, getFirstDayOfMonth() returns the day of the WEEK instead of the day of the MONTH. try replacing the line:
var startingPos  = firstOfMonth.getDay();
with:
var startingPos  = firstOfMonth.getDate();

Of course, I might be completely out here |?) but hope it helps
0
 
MCMCommented:
hi -- i'll look through your code, but I thought you might like this as an alternative to getDaysInMonth(date):

function date_daysInMonth()
     {
     var thisYear = this.getYear();
     var febDays = ( ((((thisYear % 4)==0) && ((thisYear % 100)!=0)) || ((thisYear % 400)==0)) ? 29 : 28 );
     return new Array(31,febDays,31,30,31,30,31,31,30,31,30,31)[this.getMonth()];
     }
Date.prototype.daysInMonth=date_daysInMonth;
---
any date object then has a .daysInMonth() method.

0
Cloud Class® Course: C++ 11 Fundamentals

This course will introduce you to C++ 11 and teach you about syntax fundamentals.

 
james_beilbyCommented:
Actually, you need to replace the line:
     var startingPos  = firstOfMonth.getDay();
with
     return firstOfMonth.getDate();

Then instead of:
     for(var j=startingPos.value; j&lt;7; j++) {
Use:
     for(var j=0; j&lt;7; j++) {
This will then cycle through the cells before the first day of the month, so you can assign them whatever "blank" value you like.
0
 
plszymkowiczAuthor Commented:
Here is my final code:  Not starting or stopping on the correct day!!!!

function doLoad()
{
     // setup initialization of login dialog
     // initialize raven
     // NOTE:  this doesn't seem to be getting called
     initRaven();  
}

/*************************
 Password check
**************************/
function doLoadManager()
{
     window.close();
}

var returnToField = '';
var calDate ='';

setInitialDate();

// SET THE INITIAL CALENDAR DATE TO TODAY OR TO THE EXISTING VALUE IN dateField
function setInitialDate() {
 calDate = new Date();

// KEEP TRACK OF THE CURRENT DAY VALUE
   var calDay  = calDate.getDate();

    // SET DAY VALUE TO 1... TO AVOID JAVASCRIPT DATE CALCULATION ANOMALIES
    // (IF THE MONTH CHANGES TO FEB AND THE DAY IS 30, THE MONTH WOULD CHANGE TO MARCH
    //  AND THE DAY WOULD CHANGE TO 2.  SETTING THE DAY TO 1 WILL PREVENT THAT)

    calDate.setDate(1);
    }

/// Globals for current day, month, and year

// GET NUMBER OF DAYS IN MONTH
function getDaysInMonth()  {

    var days;
    var month = calDate.getMonth()+1;
    var year  = calDate.getFullYear();

    // RETURN 31 DAYS
    if (month==1 || month==3 || month==5 || month==7 || month==8 ||
        month==10 || month==12)  {
        days=31;
    }
    // RETURN 30 DAYS
    else if (month==4 || month==6 || month==9 || month==11) {
        days=30;
    }
    // RETURN 29 DAYS
    else if (month==2)  {
        if (isLeapYear(year)) {
            days=29;
        }
        // RETURN 28 DAYS
        else {
            days=28;
        }
    }
    return (days);
}


// CHECK TO SEE IF YEAR IS A LEAP YEAR
function isLeapYear (Year) {

    if (((Year % 4)==0) &amp;&amp; ((Year % 100)!=0) || ((Year % 400)==0)) {
        return (true);
    }
    else {
        return (false);
    }
}

function getFirstDayofMonth() {
   // GET MONTH, AND YEAR FROM GLOBAL CALENDAR DATE
   var month   = calDate.getMonth();
   var  year    = calDate.getFullYear();
   var firstOfMonth = new Date (year, month, 1);

   // GET THE DAY OF THE WEEK THE FIRST DAY OF THE MONTH FALLS ON
   var startingPos  = firstOfMonth.getDay();
}


// ENSURE THAT THE YEAR IS FOUR DIGITS IN LENGTH
function isFourDigitYear(year) {

    if (year.length != 4) {
        top.newWin.frames['topCalFrame'].document.calControl.year.value = calDate.getFullYear();
        top.newWin.frames['topCalFrame'].document.calControl.year.select();
        top.newWin.frames['topCalFrame'].document.calControl.year.focus();
    }
    else {
        return true;
    }
}


function buildCalendar() {

var currDay = 0;
var currDate = 1;
var currCol = 0;
var currRow = 0;
var currWeek = currRow++;
var myCell = '';

var daysInMonth = getDaysInMonth();
var startDayOfMonth = getFirstDayofMonth();
alert(startDayOfMonth);

var calGridder = document.getElementById("calGrid");
// alert('calGrid is ' + calGridder + '/n ');
// loop over rows
// alert (' num rows ' + calGridder.childNodes.length);

for (var i=1; i&lt;= 5; i++) {
     var myrow = calGridder.childNodes.item(i);

alert(i);

// alert(myrow.nodeName + ' of  num cols ' + myrow.childNodes.length);
     for(var j=0; j&lt;7; j++) {
     // loop over cells
                myCell = myrow.childNodes.item(j);
               
               // figure whether you've started yet
               
               
               // make sure not at end of calendar
               
          currDate++;
          myCell.setAttribute("value", currDate + 'us')
          //     alert(myCell.nodeName + ' ' + myCell.getAttribute('value' ) + myCell.getAttribute('class' ));
         
         
          }
     }

}

function returnDate(day) {
window.status='returned';
}


</script>
0
 
plszymkowiczAuthor Commented:
Yep.  That's it...actually I came up with that yesterday after much deliberation, but thanks!!!!  Good work.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.