Click here to Skip to main content
Click here to Skip to main content

A JavaScript Weekly Calendar

By , 14 Feb 2006
Rate this:
Please Sign up or sign in to vote.

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

About the Author

Massimo Beatini
Web Developer
Italy Italy
No Biography provided

Comments and Discussions

 
GeneralWeek Dates is not dispaying particularly Pinmembersonashish9-May-10 11:11 
QuestionHow to get the date with format lke ''dd/MM/yyyy" Pinmemberkrishbnr18-Dec-08 4:15 
AnswerRe: How to get the date with format lke ''dd/MM/yyyy" PinmemberMassimo Beatini18-Dec-08 20:59 
GeneralOctber Pinmembercuervomonkey1-Jul-08 3:44 
GeneralRe: Octber Pinmemberevarona14-Jul-08 11:15 
Generalno images displayed in calendar! Pinmemberazizo234-Jun-08 2:01 
Questionfill fields by default? Pinmembernalanthi25-Apr-08 9:23 
QuestionHow can i get week numbering in place of "&lt;" sign (In Week column) in IE7 Pinmemberrajkumaryadav25-Mar-08 2:17 
Questionhow to disable all the future dates Pinmembersriram543119-Mar-08 22:07 
QuestionHow to disable all the days after today's date Pinmembersriram543119-Mar-08 22:05 
QuestionDisable all the days before today plus 3 days of today? PinmemberMember 238401726-Feb-08 7:40 
Generaljavascript event calendar Pinmembernbohr99a9-Sep-07 4:03 
QuestionHow to disable particular days of a week in a month. Pinmemberprakash.konakanchi27-Aug-07 23:34 
Questionchange output type and get value in textbox [modified] Pinmemberwilliams5510-May-07 17:14 
AnswerRe: change output type and get value in textbox PinmemberMassimo Beatini10-May-07 22:34 
GeneralRe: change output type and get value in textbox Pinmemberwilliams5510-May-07 22:55 
GeneralDoesn't work outside of included downloads Pinmemberxizwyck28-Feb-07 4:50 
QuestionSeparate text field: the month, day and year? Pinmemberjogijopo21-Feb-07 16:24 
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...
QuestionHow to select the whole week regardless of month Pinmemberyysharon4-Jan-07 9:07 
AnswerRe: How to select the whole week regardless of month Pinmembernalanthi5-Jun-08 6:51 
Generalsimple question Pinmemberhuseyin14-Dec-06 4:16 
QuestionHow to set WeekDate the first day of row ?! exactly that it is one day of the previous month Pinmemberleopx14-Nov-06 9:37 
AnswerRe: How to set WeekDate the first day of row ?! exactly that it is one day of the previous month PinmemberMassimo 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 Pinmemberleopx6-Dec-06 9:36 
GeneralRe: How to set WeekDate the first day of row ?! exactly that it is one day of the previous month Pinmemberlokesh718624-Mar-09 22:54 

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

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

| Advertise | Privacy | Mobile
Web02 | 2.8.140415.2 | Last Updated 14 Feb 2006
Article Copyright 2006 by Massimo Beatini
Everything else Copyright © CodeProject, 1999-2014
Terms of Use
Layout: fixed | fluid