CodeProject: A JavaScript Weekly Calendar. Free source code and programming help

Report Article

Discuss

Send to a friend

26 votes for this Article.

Popularity: 6.66 Rating: 4.71 out of 5

Download source files - 186 Kb

Sample Image - js_weekly_calendar_IE.jpg

Introduction

The calendar generated by this script can be used as a date picker or to select a weekly day range in the selected month. This script has been tested only with Internet Explorer 6.0, Firefox 1.0.7, and Opera 8.51 on a Windows 2003 Server.

Usage

Using this calendar, you can select the start week day, the default is Monday. The calendar's layout is customizable by CSS. To use it, you must insert the following HTML code in the head section of your page:

// insert this code in the head section
// use this css to modify the calendar layout
<LINK REL=StyleSheet HREF="calendar.css" TYPE="text/css">
// include the calendar javascript
<SCRIPT LANGUAGE="JavaScript" 
         SRC="weeklycalendar.js"></SCRIPT>
<script language="javascript">
    // call the function to build the calendar

    // function's param specify the first day of week 

    // 0=Sunday, 1 = Monday, ..., 6=Saturday

    buildWeeklyCalendar(1);
</script>

If the first day of the week is Monday, the column week contains the week number, otherwise it shows the "<" symbol.

Sample Image - js_weekly_calendar_firefox.jpg

The calendar is dynamically added to the HTML page and it is contained in a div element. To display the calendar, it is necessary to call the w_displayCalendar function. This function accepts two input parameters; they must be the existing element IDs used by the script to return values.

//

// display calendar

//

function w_displayCalendar(linkedId1, linkedId2) 
{
    w_linkedInputText_1 = linkedId1;
    w_linkedInputText_2 = linkedId2;
    
    w_renderCalendar(0);
    if(navigator.userAgent.indexOf("MSIE") != -1) 
    {
        weeklyCalendar.style.left=
          window.event.x+document.body.scrollLeft;
        weeklyCalendar.style.top=
          window.event.y+document.body.scrollTop;
    } 
    else if ((navigator.appName.indexOf("Netscape") != -1) || 
             (navigator.appName.indexOf("Opera") != -1))
    {
        document.getElementById('weeklyCalendar').style.left=gx + 5;
        document.getElementById('weeklyCalendar').style.top=gy + 5;
    }
    document.getElementById('weeklyCalendar').style.visibility = "visible";
}

Using the calendar as a date picker, it automatically fills an input text element passing its ID as a parameter of the w_displayCalendar function.

<tr>
   <td style="height: 78px">Date picker</td><td style="height: 78px">
      <!--  this is the datepicker input text -->    
      <input type="text"  name="DatePicker" id="DatePicker" size="35" maxlength="80">
      <!--  attach the w_displayCalendar function to the onClick event -->
      <input type="button" value="..." 
         onClick="w_displayCalendar('DatePicker',null);">
   </td>
</tr>

Using the calendar as a weekly range selector, clicking on the week number or the < symbol, it automatically fills the two input text.

<tr>
    <td style="height: 131px">Weekly Range Selector</td>
      <!--  this is start range input text -->    
      <td style="height: 131px">Start day:<input type="text" 
         name="WeeklyDateStart" id="WeeklyDateStart" 
         size="35" maxlength="80"><br />
      <!--  this is end range input text -->
      End day: <input type="text"  name="WeeklyDateEnd" 
         id="WeeklyDateEnd" size="35" maxlength="80">
      <!--  attach the w_displayCalendar function to the onClick event -->
      <input type="button" value="..." 
        onClick="w_displayCalendar('WeeklyDateStart','WeeklyDateEnd');">
   </td>
</tr>

Sample Image - js_weekly_calendar_opera.jpg

New Feature

Now you can use the calendar as a simple date picker using the new function w_displayDatePicker. This function shows the calendar and automatically hides the column week using a new CSS class.

<tr>
   <td style="height: 78px">Date picker</td>
   <td style="height: 78px">
      <!--  this is the datepicker input text -->
      <input type="text"  name="DatePicker" 
             id="DatePicker" size="35" maxlength="80">
      <!--  attach the w_displayCalendar function to the onClick event -->
      <input type="button" value="..."
         onClick="w_displayDatePicker('DatePicker');">
   </td>
</tr>

Conclusion

The Zip source file contains the weekly calendar script, the CSS and two demo HTML pages.

I hope you enjoy this article.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

About the Author

Massimo Beatini

Occupation:	Web Developer
Location:	Italy

Other popular Client side scripting articles:

Handy XP Style Menu
This is a pretty menu in XP style. Easy to setup, highly customizable.
JavaScript For Beginners
A very easy tutorial for JavaScript beginners
JavaScript Virtual Keyboard
This article presents a Virtual Keyboard - an important addendum to the library of usability tools.
Auto-complete Control
Auto-complete control.
Observer Design Pattern Using JavaScript
Ensuring a crisp boundary exists between objects, enabling greater reuse and system maintainability.

Article Top

You must Sign In to use this message board.

Msgs 1 to 25 of 78 (Total in Forum: 78) (Refresh)

FirstPrevNext

Subject

Author

Date

Octber

cuervomonkey

4:44 1 Jul '08

October is not spelt correctly!
Sign In·View Thread·PermaLink

no images displayed in calendar!

azizo23

3:01 4 Jun '08

i work with aspx pages i dont know why images arent displayed even so are in the same folder as weeklycalendar.js.
Sign In·View Thread·PermaLink	1.00/5 (1 vote)

fill fields by default?

nalanthi

10:23 25 Apr '08

using the source provided, is there a way to fill in the current week (start and end) into the form fields before the user clicks on the button to choose a week? in other words, when the page loads... by the way, this script was VERY helpful. THANKS!
Sign In·View Thread·PermaLink

How can i get week numbering in place of "<" sign (In Week column) in IE7

rajkumaryadav

3:17 25 Mar '08

First of all i would like to thank you for creating such a wonderful application. I have run this in IE7 , where i noticed one thing that the Week column comes as this symbol " < "in IE 7 how can i get actual week numbers inplace of that symbol. means i want that week numbering 1,2,3 etc. I would be thankful to you if u can tell me soon Thank you Rajkumar
Sign In·View Thread·PermaLink

how to disable all the future dates

sriram5431

23:07 19 Mar '08

In my application i have a text field named as Date Of Birth. So when i click on the calendar button(Date Picker) all the future dates should be disabled
Sign In·View Thread·PermaLink

How to disable all the days after today's date

sriram5431

23:05 19 Mar '08

In my application i have a text field named as Date Of Birth. So when i click on the calendar button(Date Picker) all the future dates should be disabled Sriram.............
Sign In·View Thread·PermaLink

Disable all the days before today plus 3 days of today?

Member 2384017

8:40 26 Feb '08

Hello, how i can change this change?, i'am a beginner! What i won't ist that only selectable all the days next 3 days from tody. thanks JPaulo
Sign In·View Thread·PermaLink

javascript event calendar

nbohr99a

5:03 9 Sep '07

this is a fine example of a date picker, but if you want a javascript event calendar, check out http://www.scriptcalendar.com javascript calendar
Sign In·View Thread·PermaLink

How to disable particular days of a week in a month.

prakash.konakanchi

0:34 28 Aug '07

I mean, i want all the sundays in a particular month(say september) to be disabled. Please help me out..!!!!
Sign In·View Thread·PermaLink

change output type and get value in textbox [modified]

williams55

18:14 10 May '07

i change output type and get value in textbox

the original JS code is :

document.getElementById(w_linkedInputText_1).value = m + "/" + g + "/" + w_d.getFullYear();

and i change JS code is :

document.getElementById(w_linkedInputText_1).value = w_d.getFullYear() + m + g;

but when i choise date month is 10, 11, 12

the textbox date value is wrong

ex:

if i click 2007/12/25 in popup calendar

the textbox value is : 201925

Re: change output type and get value in textbox

Massimo Beatini

23:34 10 May '07

Hi, I think it's a conversion problem. Try this (a simpliest way) document.getElementById(w_linkedInputText_1).value = w_d.getFullYear() + '' + m + '' + g; or this one document.getElementById(w_linkedInputText_1).value = w_d.getFullYear().toString() + m.toString() + g.toString(); Bye Massimo
Sign In·View Thread·PermaLink

Re: change output type and get value in textbox

williams55

23:55 10 May '07

hi Massimo it's really a conversion problem it's work now thanks so much thanks ^^
Sign In·View Thread·PermaLink

Doesn't work outside of included downloads

xizwyck

5:50 28 Feb '07

Simply put, works on the pages provided in the download only. I appreciate the hard work but I could find other calendar functions that do not give errors (getelementbyid).
Sign In·View Thread·PermaLink

Separate text field: the month, day and year?

jogijopo

17:24 21 Feb '07

Hi!!! Good day can!!! can you help me to solve my problem on how to separate the month, day and year to the other text field upon clicking the calendar??? pls.... thanks and more power to you...
Sign In·View Thread·PermaLink

How to select the whole week regardless of month

yysharon

10:07 4 Jan '07

Hi, I'd like to know how to configure the code so that I can select the whole week, even if the week cross two months? For example, select the week of 1/28/2007(sunday) to 2/4/2007(saturday)? Thanks, Sharon
Sign In·View Thread·PermaLink

Re: How to select the whole week regardless of month

nalanthi

7:51 5 Jun '08

i would also really love to enable an option to do that. i use the weekly calendar app for a timesheet project. we need the entire week returned regardless of month (or even year) so that the hours can be calculated correctly.
Sign In·View Thread·PermaLink

simple question

huseyin

5:16 14 Dec '06

Maybe my question is deal with server client architecture of web programming. I have a textbox that runs at server and when the ... button is clicked I am getting the selected date to my textbox. But my textbox is readonly. I can see that my texbox is filled in client side. But in server when I checked textbox.Text, this is equal "". How can I solve my problem? Thanks.
Sign In·View Thread·PermaLink	5.00/5 (1 vote)

How to set WeekDate the first day of row ?! exactly that it is one day of the previous month

leopx

10:37 14 Nov '06

Dear, I like to set the startDate the first date of row like : When i click in week 44 of november 2006, this command set the start date 11/01/2006 ... but i like to set 10/29/2006 that is the first element of row !!! Thanks !!!
Sign In·View Thread·PermaLink

Re: How to set WeekDate the first day of row ?! exactly that it is one day of the previous month

Massimo Beatini

23:02 14 Nov '06

Hi,
as you can see the calendar shows as active only the selected month's days so when you click on the week col the calendar returns the first available day of the selected month.

However, you can change it! Search in the code the w_writeDayNumber function and replace the following code


            .......
            ////////
            // dinamically set the onclick event
            // on the week number
            ////////
            weekEl.startweek = iStartWeek;
            .......

with the following


            .......
            ////////
            // dinamically set the onclick event
            // on the week number
            ////////
            weekEl.startweek = 0; 
            .......

I hope this can help you.
Bye Smile

Massimo

Re: How to set WeekDate the first day of row ?! exactly that it is one day of the previous month

leopx

10:36 6 Dec '06

Thanks a lot !!!
Sign In·View Thread·PermaLink

Way to pass date to calendar ?

bluter

5:25 13 Oct '06

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?
Sign In·View Thread·PermaLink	1.00/5 (1 vote)

Re: Way to pass date to calendar ?

Massimo Beatini

0:10 15 Nov '06

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


<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>
	



        Date picker 
		<input type="text"  name="DatePicker" id="DatePicker" size="35" maxlength="80">
<input type="button" value="..."  önClick="setfirstdate('DatePicker');w_displayDatePicker('DatePicker');">

        Weekly Range Selector 
		Start day: <input type="text"  name="WeeklyDateStart" id="WeeklyDateStart" size="35" maxlength="80">

		End day: <input type="text"  name="WeeklyDateEnd" id="WeeklyDateEnd" size="35" maxlength="80">
		<input type="button" value="..."  önClick="setfirstdate('WeeklyDateStart');w_displayCalendar('WeeklyDateStart','WeeklyDateEnd');">
	

</body>
</html>

Bye

Massimo

Disable all the days before today!

webmangr

4:27 9 Oct '06

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.
Sign In·View Thread·PermaLink

Re: Disable all the days before today!

Massimo Beatini

5:27 9 Oct '06

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:



//
//
//
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);
        }
    }


}

Bye
Massimo

Re: Disable all the days before today!

webmangr

22:31 9 Oct '06

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.
Sign In·View Thread·PermaLink

Last Visit: Friday, July 4, 2008 6:45 PM Last Update:Friday, July 4, 2008 6:45 PM

12 3 Next »

General News Question Answer Joke Rant Admin