Click here to Skip to main content
15,867,209 members
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 370.6K   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
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

 
Questionhow to display the week number if the default start day for week is sunday Pin
happy_she2-Apr-06 21:16
happy_she2-Apr-06 21:16 
AnswerRe: how to display the week number if the default start day for week is sunday Pin
Massimo Beatini2-Apr-06 22:05
Massimo Beatini2-Apr-06 22:05 
GeneralRe: how to display the week number if the default start day for week is sunday Pin
happy_she4-Apr-06 19:10
happy_she4-Apr-06 19:10 
AnswerRe: how to display the week number if the default start day for week is sunday Pin
Massimo Beatini4-Apr-06 21:38
Massimo Beatini4-Apr-06 21:38 
GeneralRe: how to display the week number if the default start day for week is sunday Pin
happy_she4-Apr-06 22:29
happy_she4-Apr-06 22:29 
AnswerRe: how to display the week number if the default start day for week is sunday Pin
Massimo Beatini5-Apr-06 6:20
Massimo Beatini5-Apr-06 6:20 
GeneralRe: how to display the week number if the default start day for week is sunday Pin
happy_she6-Apr-06 4:23
happy_she6-Apr-06 4:23 
AnswerRe: how to display the week number if the default start day for week is sunday Pin
Massimo Beatini6-Apr-06 4:59
Massimo Beatini6-Apr-06 4:59 
GeneralRe: how to display the week number if the default start day for week is sunday Pin
happy_she6-Apr-06 5:23
happy_she6-Apr-06 5:23 
Generalgood Pin
adandelion26-Feb-06 20:46
adandelion26-Feb-06 20:46 
GeneralGood and easy Pin
Anytao26-Feb-06 16:12
Anytao26-Feb-06 16:12 
Generalhii Pin
simjamol24-Feb-06 23:41
simjamol24-Feb-06 23:41 
NewsPositioning Pin
dapoussin21-Feb-06 3:00
dapoussin21-Feb-06 3:00 
AnswerRe: Positioning Pin
Massimo Beatini21-Feb-06 3:36
Massimo Beatini21-Feb-06 3:36 
GeneralUK Pin
obinna_eke14-Feb-06 14:12
obinna_eke14-Feb-06 14:12 
AnswerRe: UK Pin
Massimo Beatini14-Feb-06 21:20
Massimo Beatini14-Feb-06 21:20 
GeneralRe: UK Pin
paullie9915-Feb-06 4:02
paullie9915-Feb-06 4:02 
GeneralNot very impressive Pin
blonkm14-Feb-06 11:36
blonkm14-Feb-06 11:36 
GeneralRe: Not very impressive Pin
hsilived16-Feb-06 12:24
hsilived16-Feb-06 12:24 
GeneralRe: Not very impressive Pin
blonkm17-Feb-06 15:35
blonkm17-Feb-06 15:35 
GeneraldetachEvent Pin
doublefint14-Feb-06 0:22
doublefint14-Feb-06 0:22 
AnswerRe: detachEvent Pin
Massimo Beatini14-Feb-06 2:11
Massimo Beatini14-Feb-06 2:11 
QuestionI can't choose the Day!!! Pin
Tin Aung Khine12-Feb-06 20:45
Tin Aung Khine12-Feb-06 20:45 
AnswerRe: I can't choose the Day!!! Pin
Massimo Beatini12-Feb-06 22:38
Massimo Beatini12-Feb-06 22:38 
AnswerRe: I can't choose the Day!!! Pin
dapoussin14-Feb-06 23:26
dapoussin14-Feb-06 23:26 

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.