Click here to Skip to main content
11,571,948 members (71,991 online)
Click here to Skip to main content

Customizable JavaScript Calendar

, 16 Feb 2005 Public Domain 337.3K 7.9K 65
Rate this:
Please Sign up or sign in to vote.
A customizable event calendar/date picker in JavaScript with fail-over behaviour for non-script based browsers.

Screenshot of the calendar in two different operating modes

Introduction

This article describes the development and usage of the attached calendar script. The calendar generated by the script can be used as a date picker, an event navigator, or simply as a dynamically generated static display. While this script has been tested with Internet Explorer 6.0 and Firefox 0.8 and 1.0, on Windows XP, I have not tested it against other browsers and operating systems. There is a known issue with Internet Explorer on Windows XP SP2; points on working around this are presented below.

Background

When I started this project, it was mainly to create a lightweight and more neatly customizable version of the ASP.NET calendar control. Although I use C# nearly exclusively these days, I come from a Java/JSP background, and still make occasional use of PHP. With this in mind, I wanted something which I could use independently of the server side scripting language being used, without compromising functionality.

There were a few objectives which I wanted to meet with this calendar:

  • It had to run with little or no maintenance.
  • It had to be simple enough for a person with little scripting experience to use.
  • It had to have a simple way of customizing it for multicultural/multilanguage contexts.
  • It had to provide a transparent fallback mechanism for non-JavaScript browsers.

Although I think I missed the "lightweight" target, I feel that the current implementation achieves all of the above objectives.

Using the code

The calendar script should be referenced like any other external JavaScript file. In order to avoid falling foul of the SP2 script blocking, make sure that you deploy the script file to the same domain as the page calling it.

To set up the calendar, you should use the constructor as shown below:

cal1 = new Calendar ("cal1", "tester", new Date());

The first argument, cname in the script, represents the name by which the script refers to the calendar instance. This should be the same as the name of the variable. (Note: I am still trying to avoid this requirement, as it is rather inelegant. Any suggestion would be appreciated.) The second argument represents the ID of the calendar; this is used by the fallback mechanism to determine which field/s the calendar should control. The last argument is the date to which the calendar will default.

Binding

In order to provide data for a form action, the calendar has to be bound to an input element in a form. This is a two step process; first, you have to give the input an ID appropriate to the calendar ID, and second, you must specify the fallback mode for it.

If you want to bind the calendar to a single text box, define an input element with an ID equal to that given to the calendar as an argument. In other words, the instance cal1 we created above would bind to an element of ID tester. Then, you should specify that the fallback mode is a single field, as described below:

cal1.fallback = cal1.fallback_single;

Creating a calendar feeding three separate fields for day, month and year requires a little more work, but not much. The fields have to be given IDs with the suffixes "_day", "_month" and "_year" respectively; our example would bind to "tester_day", "tester_month" and "tester_year". This done, set the fallback mode to multi:

cal1.fallback = cal1.fallback_multi;

Display

If you test the page at this point, nothing should appear. In order to render the calendar, specify a div element where you wish to place the calendar, and give it an id of "cal_[calendar id]_display", where [calendar id] is the ID of your calendar. In our example, the div ID will be "cal_tester_display".

To render the calendar, call the renderCalendar method, like so:

renderCalendar (cal1);

This will cause the calendar to be displayed in the div. In order to avoid the SP2 block, it might be a good idea to call this explicitly from a user event such as a button or other onclick event, rather than from a script body.

Events

To highlight event dates in your calendar, insert an array of event dates into the calendar's eventDates property, like this:

cal2.eventDates = new Array(
      new Array("2005/2/10", 1)
    , new Array("2005/2/12", 2)
    , new Array("2005/2/14", 3)
);

The first argument in each array represents the event date; the second represents an event ID.

To add on-click functionality to the event dates, you can specify an onclick event for them by adding a function to the selectEvent stub:

cal2.selectEvent = function(eventId) {alert("cal2 Event: " + eventId);};

Overall, I think this is the shakiest area when it comes to configuration. I hope to revisit it soon and polish it up using JavaScript RPCs.

Points of Interest

I hope this project will be of use to others; CodeProject has been very useful to me, and I hope this contribution will, if not used directly, further the education of others; it certainly did mine. The calendar is capable of a few tricks, so please feel free to play around with the properties in the script. Most of these should be self-explanatory; however, I will be pleased to answer any pertinent questions.

History

Revision: 1.1 - 2005/02/15 23:47:44 - Initial revision.

License

This article, along with any associated source code and files, is licensed under A Public Domain dedication

Share

About the Author

Karl Agius
Software Developer (Senior)
Malta Malta
No Biography provided

You may also be interested in...

Comments and Discussions

 
GeneralDoesn't seem to work in FireFox 4.0 Pin
DimondWolfe26-Apr-11 6:21
memberDimondWolfe26-Apr-11 6:21 
GeneralRe: Doesn't seem to work in FireFox 4.0 Pin
Karl Agius26-Apr-11 6:32
memberKarl Agius26-Apr-11 6:32 
GeneralRe: Doesn't seem to work in FireFox 4.0 Pin
DimondWolfe26-Apr-11 6:56
memberDimondWolfe26-Apr-11 6:56 
QuestionREGARDING MINDATE MAXDATE? Pin
KAILASHJN15-Dec-10 19:25
memberKAILASHJN15-Dec-10 19:25 
AnswerRe: REGARDING MINDATE MAXDATE? Pin
KAILASHJN21-Aug-12 1:08
memberKAILASHJN21-Aug-12 1:08 
GeneralQuick question on the top section Pin
mschoenhardt3-Jun-09 6:21
membermschoenhardt3-Jun-09 6:21 
GeneralRe: Quick question on the top section Pin
Karl Agius3-Jun-09 21:03
memberKarl Agius3-Jun-09 21:03 
GeneralRe: Quick question on the top section Pin
mschoenhardt4-Jun-09 6:11
membermschoenhardt4-Jun-09 6:11 
Thanks Karl, it should be fine with just the one input field, so I'll go with that. Again, great work!
Questionwhich date format for mindate and max date Pin
Nikhil200017-Apr-09 6:56
memberNikhil200017-Apr-09 6:56 
AnswerRe: which date format for mindate and max date Pin
Karl Agius17-Apr-09 7:38
memberKarl Agius17-Apr-09 7:38 
QuestionHow to change the way to change the month ?? Pin
ditya200325-Nov-08 5:15
memberditya200325-Nov-08 5:15 
AnswerRe: How to change the way to change the month ?? Pin
Karl Agius17-Apr-09 7:51
memberKarl Agius17-Apr-09 7:51 
GeneralCalendar Object Pin
Justin_Cost8628-Oct-08 11:08
memberJustin_Cost8628-Oct-08 11:08 
RantRe: Calendar Object Pin
Karl Agius28-Oct-08 12:54
memberKarl Agius28-Oct-08 12:54 
GeneralRe: Calendar Object Pin
Justin_Cost8629-Oct-08 7:16
memberJustin_Cost8629-Oct-08 7:16 
GeneralRe: Calendar Object Pin
Karl Agius29-Oct-08 9:16
memberKarl Agius29-Oct-08 9:16 
GeneralRe: Calendar Object Pin
Justin_Cost864-Nov-08 6:19
memberJustin_Cost864-Nov-08 6:19 
GeneralRe: Calendar Object Pin
Karl Agius4-Nov-08 6:57
memberKarl Agius4-Nov-08 6:57 
GeneralRe: Calendar Object [modified] Pin
Justin_Cost864-Nov-08 7:43
memberJustin_Cost864-Nov-08 7:43 
GeneralRe: Calendar Object Pin
Karl Agius4-Nov-08 11:37
memberKarl Agius4-Nov-08 11:37 
Questionwhat does it means? [modified] Pin
susanhalim15-Sep-08 20:01
membersusanhalim15-Sep-08 20:01 
QuestionRe: what does it means? Pin
Karl Agius15-Sep-08 22:55
memberKarl Agius15-Sep-08 22:55 
GeneralCSS Styles Pin
mailalosh9-Sep-08 13:23
membermailalosh9-Sep-08 13:23 
GeneralRe: CSS Styles Pin
Karl Agius9-Sep-08 21:42
memberKarl Agius9-Sep-08 21:42 
Generaljavascript event calendar Pin
nbohr99a9-Sep-07 4:05
membernbohr99a9-Sep-07 4:05 
GeneralThere is no problem with the calendar Pin
ahmetinan31-May-06 6:21
memberahmetinan31-May-06 6:21 
QuestionMouse over to image ..... Pin
kiwipie25-Jan-06 13:20
memberkiwipie25-Jan-06 13:20 
AnswerRe: Mouse over to image ..... Pin
Karl Agius25-Jan-06 21:41
memberKarl Agius25-Jan-06 21:41 
GeneralRe: Mouse over to image ..... Pin
Karl Agius26-Jan-06 3:35
memberKarl Agius26-Jan-06 3:35 
GeneralRe: Mouse over to image ..... Pin
kiwipie26-Jan-06 12:10
memberkiwipie26-Jan-06 12:10 
GeneralRe: Mouse over to image ..... Pin
Karl Agius26-Jan-06 21:21
memberKarl Agius26-Jan-06 21:21 
GeneralRe: Mouse over to image ..... Pin
subhashmca24-Apr-08 19:51
membersubhashmca24-Apr-08 19:51 
AnswerRe: Mouse over to image ..... Pin
Karl Agius24-Apr-08 21:44
memberKarl Agius24-Apr-08 21:44 
Generalcould anyone plz help me regarding calender events..... Pin
pragati kumar bhatt22-Jan-06 21:19
memberpragati kumar bhatt22-Jan-06 21:19 
GeneralRe: could anyone plz help me regarding calender events..... Pin
Karl Agius22-Jan-06 21:39
memberKarl Agius22-Jan-06 21:39 
QuestionRe: could anyone plz help me regarding calender events..... Pin
pragati kumar bhatt22-Jan-06 22:58
memberpragati kumar bhatt22-Jan-06 22:58 
AnswerRe: could anyone plz help me regarding calender events..... Pin
Karl Agius22-Jan-06 23:52
memberKarl Agius22-Jan-06 23:52 
GeneralRe: could anyone plz help me regarding calender events..... Pin
pragati kumar bhatt22-Jan-06 23:58
memberpragati kumar bhatt22-Jan-06 23:58 
Questioncursor :hand Pin
rodchar21-Dec-05 4:24
memberrodchar21-Dec-05 4:24 
AnswerRe: cursor :hand Pin
rodchar21-Dec-05 8:14
memberrodchar21-Dec-05 8:14 
GeneralRe: cursor :hand Pin
Karl Agius21-Dec-05 13:38
memberKarl Agius21-Dec-05 13:38 
GeneralRe: cursor :hand Pin
rodchar28-Dec-05 11:17
memberrodchar28-Dec-05 11:17 
GeneralRe: cursor :hand Pin
ditya200325-Nov-08 5:28
memberditya200325-Nov-08 5:28 
Generalis this possible Pin
rodchar2-Dec-05 5:37
memberrodchar2-Dec-05 5:37 
GeneralRe: is this possible Pin
Karl Agius3-Dec-05 4:19
memberKarl Agius3-Dec-05 4:19 
GeneralRe: is this possible Pin
rodchar4-Dec-05 13:24
memberrodchar4-Dec-05 13:24 
GeneralRe: is this possible Pin
Karl Agius4-Dec-05 23:00
memberKarl Agius4-Dec-05 23:00 
GeneralRe: is this possible Pin
rodchar5-Dec-05 6:16
memberrodchar5-Dec-05 6:16 
QuestionPuttin Multiple Events Message Pin
laststubborn1-Dec-05 5:15
memberlaststubborn1-Dec-05 5:15 
QuestionCustomization Pin
Pratta17-Nov-05 0:29
memberPratta17-Nov-05 0:29 

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 | Terms of Use | Mobile
Web04 | 2.8.150624.2 | Last Updated 17 Feb 2005
Article Copyright 2005 by Karl Agius
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid