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.