A JavaScript Weekly Calendar

please reply below query ,its very urgent

The first date of the week is selected using this but the month returned is wrong.

Example if I want to select 1st week of Sept. 2009, the calendar returns

09/30/2009
09/05/2009

which should be

08/30/2009
09/05/2009

Hi,
please substitute the w_SetWeekDate with the following one.
New code should solve the problem.

Let me know.
Bye
Massimo

<code>
//
// set week start and end date
// in the selected month
//
function w_SetWeekDate(evt)
{
	var m="";
	var g="";
	var mStartMonth;
	var mEndMonth;
	var mStartDay;
	var mEndDay;
	
	var mStartYear;
	var mEndYear;
	
	var result = '';
	var startW = '';
	var endW = '';


	var e_out;
	var ie_var = "srcElement";
	var moz_var = "target";
	var prop_var = "startweek";
    var istartWeek, iendWeek;
    var rowWeek;
    
	// "target" for Mozilla, Netscape, Firefox et al. ; "srcElement" for IE
	evt[moz_var] ? e_out = evt[moz_var][prop_var] : e_out = evt[ie_var][prop_var];
	istartWeek = e_out;
	prop_var = "endweek";
	evt[moz_var] ? e_out = evt[moz_var][prop_var] : e_out = evt[ie_var][prop_var];
	iendWeek = e_out;

	prop_var = "rowweek";
	evt[moz_var] ? e_out = evt[moz_var][prop_var] : e_out = evt[ie_var][prop_var];
	rowWeek = e_out;

    mEndMonth = (w_d.getMonth()+1);

    mStartDay = document.getElementById("w_c"+rowWeek+istartWeek).innerHTML;  	
    mEndDay = document.getElementById("w_c"+rowWeek+iendWeek).innerHTML;  	

	mStartMonth = mEndMonth;
	

	mEndYear = w_d.getFullYear();
	mStartYear = mEndYear;
	
	if (parseInt(mStartDay) > parseInt(mEndDay))
	{
		mStartMonth = mEndMonth -1;
		if (mStartMonth == 0)
		{
			mStartMonth = 12;
			mStartYear = mStartYear - 1;
		}
	}	

    if(mStartMonth<10)
        m = "0" + mStartMonth
    else
        m = mStartMonth

    if (mStartDay<10)
	    g = "0" + mStartDay
    else
	    g = mStartDay	
    		
    startW = m + "/" + g + "/" + mStartYear;

    if(mEndMonth<10)
        m = "0" + mEndMonth
    else
        m = mEndMonth

	
    if (mEndDay<10)
	    g = "0" + mEndDay
    else
	    g = mEndDay	

    endW = m + "/" + g + "/" + mEndYear;
    
	
    // set the selected date
    try
    {
    document.getElementById(w_linkedInputText_1).value = startW;
    document.getElementById(w_linkedInputText_2).value = endW;
    }
    catch(e)
    {};
	
    w_hiddenCalendar();
}
</code>

modified on Wednesday, September 16, 2009 4:00 AM

I made the changes you suggested to fix this issue, however it still seems respond the wrong way..

Please,
see the answer above.

Bye
Massimo

Any way to set the calendar date to what is in the textbox?
Defualt the calendar to the date in the textbox (if there is one)...other wise default to today.
Can this also be down to the drop down month and year?

Hi,
the following code is a sample html with a solution to your problem: please see the setfirstdate function definition and the onClick events.

<code lang="html">
<html>
 <head>
	<title></title>
        <LINK REL=StyleSheet HREF="calendar.css" TYPE="text/css">
	<SCRIPT LANGUAGE="JavaScript" SRC="weeklycalendar.js">
	</SCRIPT>
	<script language="javascript">
	       buildWeeklyCalendar(1);

	       function setfirstdate(linkedId)
	       {
		 var d = null;
		 try
		 {
		  var t = document.getElementById(linkedId).value;
		  d = new Date(t);
 		  if ( ! isNaN( d.valueOf() ))
			w_d = d;
		  else
			w_d = new Date();	
						
		 }
		 catch(e){}
		}
	</script>
 </head>
 <body>
	<table border="1" ><tr><td style="height: 78px">
        Date picker</td><td style="height: 78px">
		<input type="text"  name="DatePicker" id="DatePicker" size="35" maxlength="80">
<input type="button" value="..." onClick="setfirstdate('DatePicker');w_displayDatePicker('DatePicker');"></td></tr>
</td></tr>
<tr><td style="height: 131px">
        Weekly Range Selector</td><td style="height: 131px">
		Start day: <input type="text"  name="WeeklyDateStart" id="WeeklyDateStart" size="35" maxlength="80"><br />
		End day: <input type="text"  name="WeeklyDateEnd" id="WeeklyDateEnd" size="35" maxlength="80">
		<input type="button" value="..." onClick="setfirstdate('WeeklyDateStart');w_displayCalendar('WeeklyDateStart','WeeklyDateEnd');"></td></tr>
	</table>
</body>
</html>
</code>

Bye

Massimo

Dear Massimo and friends,

Do you have any suggestion about how to disable all the days before today?
As i wrote at Enrico Amisano's post, his code has a BUG that doesn't help to do it!

Do you have any other suggestions?

Thank you.

Hi,
as you wrote before in IE my function didn't work right.

I solve the problem with this new function (I hope Smile | :)

!).
You can also try the new script here: http://www.code4dotnet.com/test/cal_demo1.htm[^]

Download the complete script here weeklycalendar.js or substitute the old w_writeDayNumber function with the following one:

<code lang="cs">
//
//
//
function w_writeDayNumber(d)
{
	var dd = new Date(d);
	var temp = new Date(d);
	
	
	// reset data array
	for (i=0;i<6;i++)
	{

 		for (j=0;j<7;j++)
 		{
			document.getElementById("w_c" +i+""+j).innerHTML= "";
			document.getElementById("w_c" +i+""+j).className = "day_out";
        
            var object;
            object = document.getElementById("w_c" +i+""+j);
            try
            {
                if(window.removeEventListener){ // Mozilla, Netscape, Firefox     
                    object.removeEventListener('click', w_setDate, false);
                } else { // IE
                    object.detachEvent('onclick', w_setDate);
                }
            }
            catch(e){}

 	    }
        document.getElementById("week_" +i).innerHTML = '';
	}
	
	// set to the first day of the month
	dd.setDate(1);
	
	// fill data array
	i = 0;
	j = 0;

    // previous month's days
    j = dd.getDay() - w_StartOfWeek;
    if (j<0)
        j = 7 + j;
    
    if (j > 0)
    {
        temp.setDate(dd.getDate()-1);
        for (k=j-1; k>=0; k--)
        {
			document.getElementById("w_c" +i+""+k).innerHTML= temp.getDate();
		    if ((weekend_pos[0] == k) || (weekend_pos[1] == k))
		        document.getElementById("w_c" +i+""+k).className = "weekends_out";
		    else
			    document.getElementById("w_c" +i+""+k).className = "day_out";

            temp.setDate(temp.getDate()-1);
        }
    }

	var week = -1;
    var iStartWeek = -1;
    var iEndWeek = -1;
    var weekEl;
    var dayval;

	do 
	{
	    // get the position according to
	    // StartOfWeek
	    j = dd.getDay() - w_StartOfWeek;
	    if (j<0)
	        j = 7 + j;
	
	    if (iStartWeek==-1)
	        iStartWeek = j;
        iEndWeek = j;
        	        
		dayval = dd.getDate();



	    // get the week number
	    if (week < 0)
	        week = w_getWeek(w_d.getFullYear(), w_d.getMonth(), dayval);
	        
		document.getElementById("w_c" +i+""+j).innerHTML= dayval;
		
		// set week ends layout
		if ((weekend_pos[0] == j) || (weekend_pos[1] == j))
		    document.getElementById("w_c" +i+""+j).className = "weekends";
		else
		    document.getElementById("w_c" +i+""+j).className = "day";
        {
            // set today layout 
            var today = new Date();
			
	    if ((today.getDate() ==  dayval) && 
		(today.getMonth() == w_d.getMonth()) && 
		(today.getFullYear() == w_d.getFullYear()) )
		    document.getElementById("w_c" +i+""+j).className = "today";
        }

        ////////
        // dinamically set the onclick event
        // only on the day of the selected month
        ////////

        var object = document.getElementById("w_c" +i+""+j);
        object.rownumber = i;
        object.colnumber = j;

// add event only to a date >= today
// and not a week end
      		if ((weekend_pos[0] != j) && (weekend_pos[1] != j))
      		{
                if (w_d.getFullYear() >= today.getFullYear())
                {
    
                    if ( (w_d.getMonth() > today.getMonth())
                        ||
                        ( (w_d.getMonth() == today.getMonth()) && (dayval >= today.getDate()) )
                        )
                    { 

                        if(window.addEventListener){ // Mozilla, Netscape, Firefox     
                            object.addEventListener('click', w_setDate, false);
                        } else { // IE
                            object.attachEvent('onclick', w_setDate);
                        }
                    }
                }
           }


        ///////
        
        
	    if (week < 0)
	        document.getElementById("week_" +i).innerHTML = '';
	    else if (w_StartOfWeek != 1)
	        document.getElementById("week_" +i).innerHTML = "<";
	    else
	        document.getElementById("week_" +i).innerHTML = week;

        weekEl = document.getElementById("week_" +i);

        // if HideWeekCol change the class
        // hide the week col and its header
        if (HideWeekCol) 
        {
            weekEl.className = "weekhidden";
            document.getElementById("weekHeader").className = "weekhidden";
        }
        else
        {
            document.getElementById("weekHeader").className = "week";
            weekEl.className = "weeksel";
        }
        
        
        
		if (j == 6) 
		{
            ////////
            // dinamically set the onclick event
            // on the week number
            ////////
            weekEl.startweek = iStartWeek;
            weekEl.endweek = iEndWeek;
            weekEl.rowweek = i;

            // removed to prevent click on week number

//            if(window.addEventListener){ // Mozilla, Netscape, Firefox
//                weekEl.addEventListener('click', w_SetWeekDate, false);
//            } else { // IE
//                weekEl.attachEvent('onclick', w_SetWeekDate);
//            }
            ///////

		    week = -1;
		    iStartWeek = -1;
		    iEndWeek = -1;
		    i++;
		}
	
		dd.setDate(dd.getDate() + 1);
	
	} while (dd.getDate() != 1);
	
	if ((iStartWeek!=-1) && (iEndWeek!=-1))
	{
        weekEl = document.getElementById("week_" +i);
        
        ////////
        // dinamically set the onclick event
        // on the week number
        ////////
        weekEl.startweek = iStartWeek;
        weekEl.endweek = iEndWeek;
        weekEl.rowweek = i;

        if(window.addEventListener){ // Mozilla, Netscape, Firefox
            weekEl.addEventListener('click', w_SetWeekDate, false);
        } else { // IE
            weekEl.attachEvent('onclick', w_SetWeekDate);
        }
        ///////
    }
    
    // next month's days
    if ((j < 7))
    {
        temp = dd;
        for (k=j+1; k<7; k++)
        {
			document.getElementById("w_c" +i+""+k).innerHTML= temp.getDate();
	        if ((weekend_pos[0] == k) || (weekend_pos[1] == k))
	            document.getElementById("w_c" +i+""+k).className = "weekends_out";
	        else
			    document.getElementById("w_c" +i+""+k).className = "day_out";
            temp.setDate(temp.getDate()+1);
        }
    }


}
</code>

Bye
Massimo

Dear Massimo,

Thank's for your quick reply, this code has another bug, if we change year, it doesn't accept dates before today in the selected year (for example 2007, 2008).

If we change year, all the days in all months must be selectable!
It must be a small fix! Isn't it ?

Thank you very much.

And it doesn't let you select weekend days!

Is it so hard to disable all the dates before today? I'm confused! Sigh | :sigh:

I'm not sure but i think i fixed it now!!

Here is the code of the function w_writeDayNumber:

function w_writeDayNumber(d)<br />
{<br />
	var dd = new Date(d);<br />
	var temp = new Date(d);<br />
	<br />
	<br />
	// reset data array<br />
	for (i=0;i<6;i++)<br />
	{<br />
<br />
 		for (j=0;j<7;j++)<br />
 		{<br />
			document.getElementById("w_c" +i+""+j).innerHTML= "";<br />
			document.getElementById("w_c" +i+""+j).className = "day_out";<br />
        <br />
            var object;<br />
            object = document.getElementById("w_c" +i+""+j);<br />
            try<br />
            {<br />
                if(window.removeEventListener){ // Mozilla, Netscape, Firefox     <br />
                    object.removeEventListener('click', w_setDate, false);<br />
                } else { // IE<br />
                    object.detachEvent('onclick', w_setDate);<br />
                }<br />
            }<br />
            catch(e){}<br />
<br />
 	    }<br />
        document.getElementById("week_" +i).innerHTML = '';<br />
	}<br />
	<br />
	// set to the first day of the month<br />
	dd.setDate(1);<br />
	<br />
	// fill data array<br />
	i = 0;<br />
	j = 0;<br />
<br />
    // previous month's days<br />
    j = dd.getDay() - w_StartOfWeek;<br />
    if (j<0)<br />
        j = 7 + j;<br />
    <br />
    if (j > 0)<br />
    {<br />
        temp.setDate(dd.getDate()-1);<br />
        for (k=j-1; k>=0; k--)<br />
        {<br />
			document.getElementById("w_c" +i+""+k).innerHTML= temp.getDate();<br />
		    if ((weekend_pos[0] == k) || (weekend_pos[1] == k))<br />
		        document.getElementById("w_c" +i+""+k).className = "weekends_out";<br />
		    else<br />
			    document.getElementById("w_c" +i+""+k).className = "day_out";<br />
<br />
            temp.setDate(temp.getDate()-1);<br />
        }<br />
    }<br />
<br />
	var week = -1;<br />
    var iStartWeek = -1;<br />
    var iEndWeek = -1;<br />
    var weekEl;<br />
    var dayval;<br />
<br />
	do <br />
	{<br />
	    // get the position according to<br />
	    // StartOfWeek<br />
	    j = dd.getDay() - w_StartOfWeek;<br />
	    if (j<0)<br />
	        j = 7 + j;<br />
	<br />
	    if (iStartWeek==-1)<br />
	        iStartWeek = j;<br />
        iEndWeek = j;<br />
        	        <br />
		dayval = dd.getDate();<br />
<br />
<br />
<br />
	    // get the week number<br />
	    if (week < 0)<br />
	        week = w_getWeek(w_d.getFullYear(), w_d.getMonth(), dayval);<br />
	        <br />
		document.getElementById("w_c" +i+""+j).innerHTML= dayval;<br />
		<br />
		// set week ends layout<br />
		if ((weekend_pos[0] == j) || (weekend_pos[1] == j))<br />
		    document.getElementById("w_c" +i+""+j).className = "weekends";<br />
		else<br />
		    document.getElementById("w_c" +i+""+j).className = "day";<br />
        {<br />
            // set today layout <br />
            var today = new Date();<br />
			<br />
	    if ((today.getDate() ==  dayval) && <br />
		(today.getMonth() == w_d.getMonth()) && <br />
		(today.getFullYear() == w_d.getFullYear()) )<br />
		    document.getElementById("w_c" +i+""+j).className = "today";<br />
        }<br />
<br />
        ////////<br />
        // dinamically set the onclick event<br />
        // only on the day of the selected month<br />
        ////////<br />
<br />
        var object = document.getElementById("w_c" +i+""+j);<br />
        object.rownumber = i;<br />
        object.colnumber = j;<br />
<br />
// add event only to a date >= today<br />
// and not a week end<br />
  		    SelectedYear = document.getElementById("w_sel_year").value;<br />
  		    <br />
  		    if (SelectedYear > today.getFullYear())<br />
  		    {<br />
  		        if(window.addEventListener){ // Mozilla, Netscape, Firefox     <br />
                        object.addEventListener('click', w_setDate, false);<br />
                    } else { // IE<br />
                        object.attachEvent('onclick', w_setDate);<br />
                    }<br />
  		    }<br />
      		else if (SelectedYear <= today.getFullYear())<br />
      		{<br />
  		        if (w_d.getFullYear() >= today.getFullYear())<br />
                {<br />
    <br />
                    if ( (w_d.getMonth() > today.getMonth())<br />
                        ||<br />
                        ( (w_d.getMonth() == today.getMonth()) && (dayval >= today.getDate()) )<br />
                        )<br />
                    { <br />
<br />
                        if(window.addEventListener){ // Mozilla, Netscape, Firefox     <br />
                            object.addEventListener('click', w_setDate, false);<br />
                        } else { // IE<br />
                            object.attachEvent('onclick', w_setDate);<br />
                        }<br />
                    }<br />
                <br />
                }<br />
           }<br />
<br />
<br />
        ///////<br />
        <br />
        <br />
	    if (week < 0)<br />
	        document.getElementById("week_" +i).innerHTML = '';<br />
	    else if (w_StartOfWeek != 1)<br />
	        document.getElementById("week_" +i).innerHTML = "<";<br />
	    else<br />
	        document.getElementById("week_" +i).innerHTML = week;<br />
<br />
        weekEl = document.getElementById("week_" +i);<br />
<br />
        // if HideWeekCol change the class<br />
        // hide the week col and its header<br />
        if (HideWeekCol) <br />
        {<br />
            weekEl.className = "weekhidden";<br />
            document.getElementById("weekHeader").className = "weekhidden";<br />
        }<br />
        else<br />
        {<br />
            document.getElementById("weekHeader").className = "week";<br />
            weekEl.className = "weeksel";<br />
        }<br />
        <br />
        <br />
        <br />
		if (j == 6) <br />
		{<br />
            ////////<br />
            // dinamically set the onclick event<br />
            // on the week number<br />
            ////////<br />
            weekEl.startweek = iStartWeek;<br />
            weekEl.endweek = iEndWeek;<br />
            weekEl.rowweek = i;<br />
<br />
            // removed to prevent click on week number<br />
<br />
//            if(window.addEventListener){ // Mozilla, Netscape, Firefox<br />
//                weekEl.addEventListener('click', w_SetWeekDate, false);<br />
//            } else { // IE<br />
//                weekEl.attachEvent('onclick', w_SetWeekDate);<br />
//            }<br />
            ///////<br />
<br />
		    week = -1;<br />
		    iStartWeek = -1;<br />
		    iEndWeek = -1;<br />
		    i++;<br />
		}<br />
	<br />
		dd.setDate(dd.getDate() + 1);<br />
	<br />
	} while (dd.getDate() != 1);<br />
	<br />
	if ((iStartWeek!=-1) && (iEndWeek!=-1))<br />
	{<br />
        weekEl = document.getElementById("week_" +i);<br />
        <br />
        ////////<br />
        // dinamically set the onclick event<br />
        // on the week number<br />
        ////////<br />
        weekEl.startweek = iStartWeek;<br />
        weekEl.endweek = iEndWeek;<br />
        weekEl.rowweek = i;<br />
<br />
        if(window.addEventListener){ // Mozilla, Netscape, Firefox<br />
            weekEl.addEventListener('click', w_SetWeekDate, false);<br />
        } else { // IE<br />
            weekEl.attachEvent('onclick', w_SetWeekDate);<br />
        }<br />
        ///////<br />
    }<br />
    <br />
    // next month's days<br />
    if ((j < 7))<br />
    {<br />
        temp = dd;<br />
        for (k=j+1; k<7; k++)<br />
        {<br />
			document.getElementById("w_c" +i+""+k).innerHTML= temp.getDate();<br />
	        if ((weekend_pos[0] == k) || (weekend_pos[1] == k))<br />
	            document.getElementById("w_c" +i+""+k).className = "weekends_out";<br />
	        else<br />
			    document.getElementById("w_c" +i+""+k).className = "day_out";<br />
            temp.setDate(temp.getDate()+1);<br />
        }<br />
    }<br />
<br />
<br />
}

Hi,
use the following link to test my code with clickable weekends
http://www.code4dotnet.com/test/test2/cal_demo1.htm[^]
and the following one to download it
http://www.code4dotnet.com/test/test2/weeklycalendar.js[^]

Bye

Massimo Smile | :)

Hi,
first of all thanks for debugging, then I think there was a misunderstanding.
My code was the answer to the Enrico Amisano's requests:

>Hi from Enrico-Italy
>I need informations to modify your fantastic calendar in order to:
>1) avoid the selection of weekend days for each week (Sunday and saturday)
>2) avoid the selection of the week number. We use week number only to display the information of the week days
>3) avoid the selection of a date in the past, for example to avoid the selection of a date before today
> ....

Use the following link to test the last fixed code solving the the Enrico's requests http://www.code4dotnet.com/test/cal_demo1.htm[^] and use the following link to download the fixed javascript code http://www.code4dotnet.com/test/weeklycalendar_1.zip

I hope this can remove the misunderstanding. Smile | :)

Bye
Massimo

I have installed the calendar and it works wonderfully. The website owner has requested that all days prior to today and also today be disabled. This should be pretty simple, but I am not sure ow to do this. Do you have any suggestions?
Thank you.

java script error appear when setting the smart navigation property to true
when the page is posted back
this java script error appears
in line 347

Hi from Enrico-Italy

I need informations to modify your fantastic calendar in order to:
1) avoid the selection of weekend days for each week (Sunday and saturday)
2) avoid the selection of the week number. We use week number only to display the information of the week days
3) avoid the selection of a date in the past, for example to avoid the selection of a date before today

Do you have any suggestions ?
I'm new on css and javascript...

Many thanks in advance.

Enrico Amisano

Hi Enrico,
substitute the w_writeDayNumber function with the following one.
New code implements all your requests.

Let me know.
Bye
Massimo

<code lang="cs">
//
//
//
function w_writeDayNumber(d)
{
	var dd = new Date(d);
	var temp = new Date(d);
	
	
	// reset data array
	for (i=0;i<6;i++)
	{

 		for (j=0;j<7;j++)
 		{
			document.getElementById("w_c" +i+""+j).innerHTML= "";
			document.getElementById("w_c" +i+""+j).className = "day_out";
 	    }
        document.getElementById("week_" +i).innerHTML = '';
	}
	
	// set to the first day of the month
	dd.setDate(1);
	
	// fill data array
	i = 0;
	j = 0;

    // previous month's days
    j = dd.getDay() - w_StartOfWeek;
    if (j<0)
        j = 7 + j;
    
    if (j > 0)
    {
        temp.setDate(dd.getDate()-1);
        for (k=j-1; k>=0; k--)
        {
			document.getElementById("w_c" +i+""+k).innerHTML= temp.getDate();
		    if ((weekend_pos[0] == k) || (weekend_pos[1] == k))
		        document.getElementById("w_c" +i+""+k).className = "weekends_out";
		    else
			    document.getElementById("w_c" +i+""+k).className = "day_out";

            temp.setDate(temp.getDate()-1);
        }
    }

	var week = -1;
    var iStartWeek = -1;
    var iEndWeek = -1;
    var weekEl;
    var dayval;

	do 
	{
	    // get the position according to
	    // StartOfWeek
	    j = dd.getDay() - w_StartOfWeek;
	    if (j<0)
	        j = 7 + j;
	
	    if (iStartWeek==-1)
	        iStartWeek = j;
        iEndWeek = j;
        	        
		dayval = dd.getDate();



	    // get the week number
	    if (week < 0)
	        week = w_getWeek(w_d.getFullYear(), w_d.getMonth(), dayval);
	        
		document.getElementById("w_c" +i+""+j).innerHTML= dayval;
		
		// set week ends layout
		if ((weekend_pos[0] == j) || (weekend_pos[1] == j))
		    document.getElementById("w_c" +i+""+j).className = "weekends";
		else
		    document.getElementById("w_c" +i+""+j).className = "day";
        {
            // set today layout 
            var today = new Date();
			
	    if ((today.getDate() ==  dayval) && 
		(today.getMonth() == w_d.getMonth()) && 
		(today.getFullYear() == w_d.getFullYear()) )
		    document.getElementById("w_c" +i+""+j).className = "today";
        }

        ////////
        // dinamically set the onclick event
        // only on the day of the selected month
        ////////

        var object = document.getElementById("w_c" +i+""+j);
        object.rownumber = i;
        object.colnumber = j;

// add event only to a date >= today
// and not a week end
      		if ((weekend_pos[0] != j) && (weekend_pos[1] != j))
      		{
                if (w_d.getFullYear() >= today.getFullYear())
                {

                    if ( (w_d.getMonth() > today.getMonth())
                        ||
                        ( (w_d.getMonth() == today.getMonth()) && (dayval >= today.getDate()) )
                        )
                    { 
                        if(window.addEventListener){ // Mozilla, Netscape, Firefox     
                            object.addEventListener('click', w_setDate, false);
                        } else { // IE
                            object.attachEvent('onclick', w_setDate);
                        }
                    }
                    else
                    {
                        try
                        {
                            if(window.removeEventListener){ // Mozilla, Netscape, Firefox     
	                            object.removeEventListener('click', w_setDate, false);
                            } else { // IE
	                            object.detachEvent('onclick', w_setDate);
                            }
                        }
	                catch(e){}
                    }
                }
           }

        ///////
        
        
	    if (week < 0)
	        document.getElementById("week_" +i).innerHTML = '';
	    else if (w_StartOfWeek != 1)
	        document.getElementById("week_" +i).innerHTML = "<";
	    else
	        document.getElementById("week_" +i).innerHTML = week;

        weekEl = document.getElementById("week_" +i);

        // if HideWeekCol change the class
        // hide the week col and its header
        if (HideWeekCol) 
        {
            weekEl.className = "weekhidden";
            document.getElementById("weekHeader").className = "weekhidden";
        }
        else
        {
            document.getElementById("weekHeader").className = "week";
            weekEl.className = "weeksel";
        }
        
        
        
		if (j == 6) 
		{
            ////////
            // dinamically set the onclick event
            // on the week number
            ////////
            weekEl.startweek = iStartWeek;
            weekEl.endweek = iEndWeek;
            weekEl.rowweek = i;

            // removed to prevent click on week number

//            if(window.addEventListener){ // Mozilla, Netscape, Firefox
//                weekEl.addEventListener('click', w_SetWeekDate, false);
//            } else { // IE
//                weekEl.attachEvent('onclick', w_SetWeekDate);
//            }
            ///////

		    week = -1;
		    iStartWeek = -1;
		    iEndWeek = -1;
		    i++;
		}
	
		dd.setDate(dd.getDate() + 1);
	
	} while (dd.getDate() != 1);
	
	if ((iStartWeek!=-1) && (iEndWeek!=-1))
	{
        weekEl = document.getElementById("week_" +i);
        
        ////////
        // dinamically set the onclick event
        // on the week number
        ////////
        weekEl.startweek = iStartWeek;
        weekEl.endweek = iEndWeek;
        weekEl.rowweek = i;

        if(window.addEventListener){ // Mozilla, Netscape, Firefox
            weekEl.addEventListener('click', w_SetWeekDate, false);
        } else { // IE
            weekEl.attachEvent('onclick', w_SetWeekDate);
        }
        ///////
    }
    
    // next month's days
    if ((j < 7))
    {
        temp = dd;
        for (k=j+1; k<7; k++)
        {
			document.getElementById("w_c" +i+""+k).innerHTML= temp.getDate();
	        if ((weekend_pos[0] == k) || (weekend_pos[1] == k))
	            document.getElementById("w_c" +i+""+k).className = "weekends_out";
	        else
			    document.getElementById("w_c" +i+""+k).className = "day_out";
            temp.setDate(temp.getDate()+1);
        }
    }


}
</code>

This can fix if you don't want to make clickable all the dates before today!

Unfortunately there is a bug in this story only in IE!

This is the bug:

Let's say that today is: 9th of October 2006

We open the calendar and we see that we can't select the day before today (8th of October).
We select 1st of November 2006, then if we will open again the calendar and select again the 8th of October, it is clickable and the input takes the 8th of October!!!

Do you have any suggestions for this fix?!?

Hi,

Loved your calendar, but i would like to know how to make a few changes:

1. I would like the start of the week to be Sunday, with Friday and Saturday showing as weekend. How would i do that. I tried to change per your suggestion on the site, the start of the week, but was unsuccessful. Thanks.

2. I want the calendar to be positioned on top, right hand corner of the calendar button. How woudl i do that?

thanks

vandana

Hi,
about your 1st question modify the following code in the w_writeDayname function

<code>
        // set week ends postion
        if (w_dayname[mDay] == 'Sat')
            weekend_pos[0] = wd;
        if (w_dayname[mDay] == 'Sun')
            weekend_pos[1] = wd;
</code>

with the following

<code>
        // set week ends postion
        if (w_dayname[mDay] == 'Fri')
            weekend_pos[0] = wd;
        if (w_dayname[mDay] == 'Sat')
            weekend_pos[1] = wd;
</code>

Bye
Massimo

I need to know how to display the day of the week and week number for given date

day of week:

<br />
var myDays= ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"];<br />
<br />
var myDate=new Date()<br />
<br />
myDate.setFullYear(2006,6,13)<br />
<br />
thisDay=myDate.getDay();<br />
<br />
thisDay=myDays[thisDay];<br />
<br />
alert(thisDay);<br />

Week number:
you can use the w_getWeek defined in my code.

I hope this can help you.

Bye
Massimo

Hi there,
This is really a nice work!

All i want to do, is to hide the calendar when i click out side of it..
Any suggestions?

Thank you!

Hi,
try the following code.
It's a dirty code because it contains a trick and doesn't work correctly on Mozilla browser (changing month or year via dropdown will close the calendar... Frown | :(

This code could be a starting point to solve your problem.
I hope this can help you.
Bye
Massimo

Put this code as last instructions of w_displayCal() function

<code>if(window.addEventListener){ // Mozilla, Netscape, Firefox
      window.addEventListener('mousedown', mousedown, false);
} else { // IE
      document.attachEvent('onmousedown', mousedown);
}
</code>

Put this code as first instructions of w_hiddenCalendar() function

if(window.removeEventListener){ // Mozilla, Netscape, Firefox
    window.removeEventListener('mousedown', mousedown, false);
} else { // IE
    document.detachEvent('onmousedown', mousedown);
}

Add the following function at the end of the weeklycalendar.js file

<code>
function mousedown(event) {
	event = event || window.event; // IE doesn't pass event as argument.
	var tgt = event.target || event.srcElement; // IE doesn't use .target
	var strid = tgt.id;

	var gx;
	var gy;
	var obj = document.getElementById("weeklyCalendar");


	var x1 = parseInt(obj.style.left);
	var x2 = parseInt(obj.style.left) + parseInt(obj.offsetWidth);

	var y1 = parseInt(obj.style.top);
	var y2 = parseInt(obj.style.top) + parseInt(obj.offsetHeight);
	
	if(navigator.userAgent.indexOf("MSIE") != -1) 
	{
		gx = window.event.x;
		gy = window.event.y;
	}
	else
	{
		gx = event.pageX;
		gy = event.pageY;
	}

		
		
//	var clickedin = ( (gx > x1) && (gx < x2) ) && ( (gy > y1) && (gy < y2) );
	// dirty trick to catch clicks on month and year drop down
	// close calendar only if click out of calendar on left, right and above	
	var clickedin = ( (gx > x1) && (gx < x2) ) && ( (gy > y1)  );

	
	if (! clickedin)
		w_hiddenCalendar();
	else
		return true;
		
}
</code>

hi, if i want the start day to be sunday instead of monday and i want the week number to be display as its current number, not the '>' sign, what should i change in the code? is there a way to do so?

Thanks.

sherlyn

A JavaScript Weekly Calendar

Introduction

Usage

New Feature

Conclusion

License

Comments and Discussions