Scriptcalendar.com
An Incredible Javascript Event Calendar

User Guide

»  Table Of Contents

Changing the Month and Year Selection

Section 2.4.6

The "dateSelector" property controls the display of the month and year dropdowns as well as the previous and next month links. The property is a numeric value designed for bitwise operations. The values are list below.

value description
1 The month drop-down is displayed.
2 The month drop-down is displayed.
4 The previous month link is displayed.
8 The next month link is displayed.
16 The month is displayed as text only.
32 The year is displayed as text only.

By default all selectors are displayed, with the month and year as dropdowns. The default is equivalent to the code below.

objCal.dateSelector = 1+2+4+8;

You can choose to display only the month drop-down by setting the property to the value of 1. You can combine these values to create combinations. You can choose to display both dropdowns by using the value 1+2 or 3. You can choose to display only the previous and next month links by using the value 4+8 or 12. If you'd like the month and year displayed as text, use the value 16+32.

The "dateRangeStart" and "dateRangeEnd" control the minimum and maximum values of the year drop-down. These properties accept an integer value. You can set these properties to control what dates a user can see.

objCal.dateRangeStart = 2008;
objCal.dateRangeEnd = 2015;

The "prevHtml" and "nextHtml" properties control what text is displayed in the previous and next month links. These properties accept string values. You may use HTML with the string, so you can use images tags as well as text. By default the values equivalent to the code below.

objCal.prevHtml = "«";
objCal.nextHtml = "»";

The previous and next month link style is controlled by the CSS file "scSelector" class. The HTML element for the links is a span. If you edit this class, you can change the font or colors of these links.

»  Table Of Contents