Click here to Skip to main content
15,888,610 members
Search within:


Articles / Web Development / HTML
 
Article

A JavaScript Weekly Calendar

Rate me:
Please Sign up or sign in to vote.
4.76/5 (30 votes)
14 Feb 2006CPOL1 min read 372.4K   2.8K   67   88
This calendar can be used as a date picker or to select a weekly day range in the selected month.

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:

HTML
// 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.

JavaScript
//
// 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.

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

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

HTML
<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, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Massimo Beatini
Web Developer
Italy Italy
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
FirstPrevNext
AnswerRe: How to select the whole week regardless of month Pin
nalanthi5-Jun-08 6:51
nalanthi5-Jun-08 6:51 
Generalsimple question Pin
huseyin14-Dec-06 4:16
huseyin14-Dec-06 4:16 
QuestionHow to set WeekDate the first day of row ?! exactly that it is one day of the previous month Pin
leopx14-Nov-06 9:37
leopx14-Nov-06 9:37 
AnswerRe: How to set WeekDate the first day of row ?! exactly that it is one day of the previous month Pin
Massimo Beatini14-Nov-06 22:02
Massimo Beatini14-Nov-06 22:02 
GeneralRe: How to set WeekDate the first day of row ?! exactly that it is one day of the previous month Pin
leopx6-Dec-06 9:36
leopx6-Dec-06 9:36 
GeneralRe: How to set WeekDate the first day of row ?! exactly that it is one day of the previous month Pin
lokesh718624-Mar-09 22:54
lokesh718624-Mar-09 22:54 
GeneralRe: How to set WeekDate the first day of row ?! exactly that it is one day of the previous month Pin
cpsaran15-Sep-09 4:19
cpsaran15-Sep-09 4:19 
GeneralRe: How to set WeekDate the first day of row ?! exactly that it is one day of the previous month [modified] Pin
Massimo Beatini15-Sep-09 21:38
Massimo Beatini15-Sep-09 21:38 
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
GeneralRe: How to set WeekDate the first day of row ?! exactly that it is one day of the previous month [modified] Pin
DaFleaster19-Mar-12 8:20
DaFleaster19-Mar-12 8:20 
GeneralRe: How to set WeekDate the first day of row ?! exactly that it is one day of the previous month Pin
Massimo Beatini15-Sep-09 21:51
Massimo Beatini15-Sep-09 21:51 
QuestionWay to pass date to calendar ? Pin
bluter13-Oct-06 4:25
bluter13-Oct-06 4:25 
AnswerRe: Way to pass date to calendar ? Pin
Massimo Beatini14-Nov-06 23:10
Massimo Beatini14-Nov-06 23:10 
QuestionDisable all the days before today! Pin
webmangr9-Oct-06 3:27
webmangr9-Oct-06 3:27 
AnswerRe: Disable all the days before today! Pin
Massimo Beatini9-Oct-06 4:27
Massimo Beatini9-Oct-06 4:27 
GeneralRe: Disable all the days before today! Pin
webmangr9-Oct-06 21:31
webmangr9-Oct-06 21:31 
GeneralRe: Disable all the days before today! Pin
webmangr9-Oct-06 21:38
webmangr9-Oct-06 21:38 
GeneralRe: Disable all the days before today! Pin
webmangr9-Oct-06 21:44
webmangr9-Oct-06 21:44 
GeneralRe: Disable all the days before today! Pin
Massimo Beatini9-Oct-06 23:08
Massimo Beatini9-Oct-06 23:08 
GeneralRe: Disable all the days before today! Pin
Massimo Beatini9-Oct-06 22:38
Massimo Beatini9-Oct-06 22:38 
AnswerRe: Disable all the days before today! Pin
clausont24-May-08 6:19
clausont24-May-08 6:19 
Generalsmart navigation problem Pin
shesho64211-Sep-06 2:07
shesho64211-Sep-06 2:07 
GeneralInformations about calendar script Pin
Enrico Amisano7-Sep-06 6:51
Enrico Amisano7-Sep-06 6:51 
AnswerRe: Informations about calendar script Pin
Massimo Beatini8-Sep-06 4:58
Massimo Beatini8-Sep-06 4:58 
QuestionRe: Informations about calendar script Pin
webmangr9-Oct-06 2:41
webmangr9-Oct-06 2:41 
GeneralPositioning and Changing the beginning of the Week Pin
vanvank7-Sep-06 3:37
vanvank7-Sep-06 3:37 
Last Visit: 31-Dec-99 18:00     Last Update: 29-Apr-24 20:23Refresh1234 Next ᐅ

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink
Advertise
Privacy
Cookies
Terms of Use
Layout: fixed | fluid

Posted 30 Jan 2006

Article Copyright 2006 by Massimo Beatini
Everything else Copyright © CodeProject, 1999-2024

Web02 2.8:2024-04-02:1