JavaScript Event Calendar Examples

At the right is a calendar with no events defined and no options. By default,
it will show the current month, and will permit all months in the current year
to be viewed. Note that no specific styling is applied. This is NOT recommended;
you should at least supply a basic set of styles, as in the other examples on
this page (also, see the Tutorial page). Try selecting
a different month (using the links or the drop-down list) and notice how the
calendar changes “in place” without the need to re-load the page from the web server.

The calendar below is styled with shades of grey, and all days have a uniform
width (but variable height). The styling of “today” is special, and days with events also have special
styling. A few events are defined (on 1/1/09, 7/5/09, 4/1/10, 4/7/2010, and 7/5/2010);
this results in the “range” of the calendar
automatically expanding so that it encompasses all dates with events. (The
Tutorial page explains how to define events, how
to set calendar options, and how to specify the styles. Also, the styles used
on this page are available on the Downloads page.)

Finally, the calendar below uses altogether different styling, and has different
events defined. In addition, it illustrates some optional settings, such as:

a “special” day of the week (in this case, Sunday);

custom weekday names - a handy feature when displaying calendars in
languages other than English (month names can also be customized);

the range of the calendar is constrained from March 2010 to October
2010 - regardless of when the events are (this is a useful feature for
building calendars that correspond to academic, fiscal, or other periods
such as specific sporting seasons);

clicking an event link will NOT open a new window (the normal default behavior),
but will go to the page in the current browser;

rather than opening to the current month (the default behavior), the calendar
explicitly opens to a SPECIFIC month (in this case, July 2010 - because my
birthday is July 5!).

The styling of this calendar uses multiple colors; you’ll probably want to do something
similar when you incorporate calendars into your own web site, using colors that are
compatible with your existing site. Also, in addition to a uniform width (as in the previous example),
all dates have a fixed height. Take a look at September 2010 (specifically,
September 6) to see what happens when a
date has a lot of events, but the height is fixed. This is all controlled by the
applied styles. The events defined for July 16, 2013 illustrate the ability to assign
times to events, and the sorting of the events for display.

Finally, this calendar also illustrates the use of the ".styleDates( )" function; take
a look at Memorial Day Weekend 2011 (5/28-5/30) and note that a special background color is used.