The JavaScript Event Calendar is designed to permit maximum control over the look and feel of the displayed calendar, while still making it easy to specify events that should be displayed. The look of the calendar is almost entirely controlled by a Cascading Style Sheet (either a linked CSS file, or styles embedded in the page). Basically, you’ll follow these steps:
Each of these steps is described in detail below.
The code for the calendar is contained in a single JavaScript file, which you can get on the Downloads page. Please do NOT link directly to the file on this web server; use a copy on your own server. You’ll add a line to the <head> section of your web page, similar to the following:
<html><head> . .<script type="text/javascript" src="{path-to-local-js-files}/calendar-2.4.js"></script> . .</head> . .The calendar may be styled in a variety of ways; to do this, it is important to understand how the calendar is marked up as an HTML table.
The <table> will have a class of “JEC” (unless this has been overridden prior to showing the calendar). Thus, “table.JEC” can be used as a selector to style individual table elements.
The <table> will have a <thead> that includes one row, with a single <th> spanning 7 columns and containing the month and year. Think of this as the “heading” of the entire calendar. You can style it like this, for example:
table.JEC thead th { background-color: #696969; color: white; font-size: 16px; font-weight: bold; margin: 5px;}The <table> will have a <tfoot> that includes one row, containing three <th> elements. The first, spanning 2 columns, will contain a link to the previous month. The second, spanning 3 columns, will contain a drop-down select box for jumping directly to any month. The third, spanning 2 columns, will contain a link to the next month.
The <table> will have a <tbody> that includes all of the actual dates. The first row in the <tbody> will contain 7 <th> elements, each containing the (abbreviated) name of a day of the week (Sun - Sat). Subsequent rows will each contain 7 <td> elements. Each <td> in the <tbody> will display a date. Some will be empty because they represent blank squares in the calendar grid; these will be defined as <td class='dayBlank'>. The others will have a <div class='date'> element that contains only the day of the month. If there are events for a day, they will be displayed in a <div class='events'> that immediately follows the date. The text of each event description will be enclosed in a <span> element (unless there is a URL associated with the event, in which case the text will be enclosed in an <a> element). When there are multiple events on the same day, a <br/> element will appear BETWEEN the events (but NOT after the last event). If an event has an image, it will precede the event's <span> or <a> element.
Table cells (<td>'s) may have one or more of the following classes:
Using these classes, it is possible to render the date cell(s) differently by adjusting the cell background, the color of the date (by styling div.date), etc. For example:
table.JEC td.dayToday { background-color: #eee; border: 3px solid black;}At your option, there are two ways you can specify the styling of the elements in the calendar table. Either you can include an embedded style sheet within your HTML page, or you can link to an external style sheet. The Examples page makes use of two different external linked style sheets, as follows:
<html><head> . .<link rel="stylesheet" href="css/jec-grey.css" type="text/css" /><link rel="stylesheet" href="css/jec-styled.css" type="text/css" /> . .</head> . .TWO different style sheets are linked, because the Examples page includes multiple calendars, each styled differently. (Both of these style sheets are available on the Downloads page.)
As previously noted, the calendar’s <table> is created with a class=“JEC” by default, but this class can be overridden (as described later). If you are planning to have multiple calendars on the page, styled differently, you will NEED to override the class name.
Decide where, in the overall layout of your page, you’d like your calendar to appear. Create a <div> element with a unique id attribute, and no content. For example:
. .<div id='myCalendarContainer'></div> . .For the remaining steps, you’ll need to add a small bit of JavaScript code, where you’ll create the object, set options, define events, and show the calendar. The first step is to create an instance of the JEC "class” as follows:
<script type="text/javascript"> var myCalendar = new JEC('myCalendarContainer');</script>In the code above, the string that you pass to the JEC( ) constructor must match the id attribute of the <div> where you want the calendar to appear.
The line above will create the JEC object, but nothing will be displayed. To display the calendar, invoke the .showCalendar( ) function on the object that you created:
<script type="text/javascript"> var myCalendar = new JEC('myCalendarContainer'); myCalendar.showCalendar();</script>Now, the calendar will appear at the desired place on your page. It will display the current month, and the links and drop-down list will permit the user to select any month within the current year. The definition of events (see below) or the explicit inclusion of options will change that default behavior.
The JEC( ) constructor accepts a second parameter (in addition to the id of the <div> that will contain the calendar). The optional second parameter is an object that can contain a set of name/value pairs, specifying options that will alter the generated calendar. The name/value pairs are specified in JavaScript Object Notation (i.e., “JSON” format). The supported options include:
Below is an example of how a calendar can be created with various options:
var myCal = new JEC('myCalendarContainer', { tableClass: 'styledCalendar', firstMonth: 201003, lastMonth: 201010, firstDayOfWeek: 2, specialDays: [ 1, 7 ], linkNewWindow: false, weekdays: [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ]});This is, after all, a JavaScript EVENT Calendar, and so the definition of the events is perhaps the most important aspect of the tool. The JEC object includes a .defineEvents( ) function, which allows you to specify a list of one or more events, each with its own unique properties. As in the case of the optional parameter to the JEC( ) constructor, the events are specified using JSON. The .defineEvents( ) function accepts an array, and each element in the array is an object that can include the following name/value pairs:
Below is an example of a call to the .defineEvents( ) function, to define 4 different events:
myCal.defineEvents( [ { eventDate: 20100407, eventDescription: 'JEC 2.0 Released', eventLink: 'http://calendar.ilsen.net', eventLinkTitle: 'A JavaScript Event Calendar' }, { eventDate: 20090101, eventDescription: 'MonkeysTapping Launched!', eventLink: 'http://monkeystapping.com' }, { eventDate: 20100705, eventDescription: 'Kevin\'s Birthday' }, { eventDate: 20090705, eventDescription: 'Kevin\'s BIG Birthday!' } ]);To provide some degree of “backward-compatibility” with the original version of the JavaScript Event Calendar, there’s an additional function: .defineEvent( ). This function allows you to define a single event, by specifying the event’s properties as individual parameters. You would invoke this event once for each individual event. It can accept between 2 and 7 parameters (unused parameters at the end can be omitted). The full format is shown below, followed by several examples:
.defineEvent(eventDate, eventDescription, eventLink, image, imageWidth, imageHeight, eventLinkTitle);
myCal.defineEvent(20100407, 'JEC 2.0 Released', 'http://calendar.ilsen.net', , , , 'A JavaScript event Calendar');myCal.defineEvent(20090101, 'MonkeysTapping Launched', 'http://monkeystapping.com', 'img/monkey.gif');myCal.defineEvent(20100705, 'Kevin\'s Birthday');In addition to the hyperlinks that can be included with defined events, it is also possible to associate hyperlinks with specific dates. The date number will be “clickable” and can be styled in any way that you like. The JEC object includes a .linkDates( ) function, which accepts an array, and each element in the array is an object that includes the following name/value pairs:
Below is an example of a call to the .linkDates( ) function, to define 2 different date links:
myCal.linkDates( [ { linkedDate: 20100407, dateLink: 'http://calendar.ilsen.net' }, { linkedDate: 20090101, dateLink: 'http://monkeystapping.com' } ]);There is sometimes a need to apply a particular style to a single date or a group of dates. For example, consider the need to highlight a certain holiday weekend with a background color. The JEC object includes a .styleDates( ) function, which accepts an array, and each element in the array is an object that includes the following name/value pairs:
Then, you would use your stylesheet to define whatever specific styles should be applied for that class. Below is an example of a call to the .styleDates( ) function:
myCal.styleDates( [ { styledDate: 20110528, dateClass: 'memorialDayWeekend' }, { styledDate: 20110529, dateClass: 'memorialDayWeekend' }, { styledDate: 20110530, dateClass: 'memorialDayWeekend' } ]);As previously noted (above), you can display your calendar by invoking the .showCalendar( ) function of your calendar object. This will display the current month and year. You can also specify a particular month and year, in the format YYYYMM, as a parameter. For example, the following series of lines defines a calendar with some options, creates a couple of events, and displays the calendar for July 2010:
var myCal = new JEC('myCalendarContainer', { tableClass: 'styledCalendar', firstMonth: 201003, lastMonth: 201010});myCal.defineEvents( [ { eventDate: 20100407, eventDescription: 'JEC 2.0 Released', eventLink: 'http://calendar.ilsen.net', eventTitle: 'A JavaScript Event Calendar' }, { eventDate: 20100705, eventDescription: 'Kevin\'s Birthday' } ]);myCal.showCalendar(201007);