Display/Control Options for Scal
When you create an instance of scal, you can pass in a dictionary object containing a variety of display settings. These settings control the way certain fields display in scal and how they react to user interaction (i.e. clicks).
Below you can see the default settings for scal as defined in the scal.js file:
this.options = Object.extend({
oncalchange: Prototype.emptyFunction,
daypadding: false,
titleformat: 'mmmm yyyy',
updateformat: 'yyyy-mm-dd',
closebutton: 'X',
prevbutton: '«',
nextbutton: '»',
yearnext: '»»',
yearprev: '««',
openeffect: type == 'Effect' ? Effect.Appear : Element.show,
closeeffect: type == 'Effect' ? Effect.Fade : Element.hide,
exactweeks: false,
dayheadlength: 2,
weekdaystart: 0,
planner: false,
tabular: false,
year: this.startdate.getFullYear(),
month: 1,
day: 1
})You can override these settings by passing in your own options dictionary when you instantiate scal.
The purpose of each option is described below:
oncalchange
Call back function when one of the calendar controls is selected.
Defaults to empty function.
var Cal = new scal('samplecal',updateelement, {
oncalchange: function(d) {
alert('Calendar Change: ' + d.format('yyyy-mm-dd'));
}
});daypadding
Pad the day digits to two digit length. Defaults to false.
titleformat
Text format for the header of the calendar. Defaults to mmmm yyyy (Full month name and year)
updateformat
Default format used when updating the update element. Defaults to yyyy-mm-dd.
closebutton
Defines the innerHTML for the calendar's close button. Defaults to 'X' (you can pass in elements or strings)
prevbutton
Defines the innerHTML for the calendar's previous month button. Defaults to '«' (you can pass in elements or strings)
nextbutton
Defines the innerHTML for the calendar's next month button. Defaults to '»' (you can pass in elements or strings)
yearnext
Defines the innerHTML for the calendar's next year button. Defaults to '»»' (you can pass in elements or strings)
yearprev
Defines the innerHTML for the calendar's previous year button. Defaults to '««' (you can pass in elements or strings)
openeffect
Defines the 'Effect' used when opening the calendar. Defaults to Effect.Appear if scriptaculous is available. Otherwise it is Element.show
closeeffect
Defines the 'Effect' used when closing the calendar. Defaults to Effect.Fade if scriptaculous is available. Otherwise it is Element.hide
exactweeks
Used to determine whether the calendar should show the 'exact' number of weeks in a month. By default, the calendar shows 6 weeks which will give you a nice, consistent view. However, if you want the control to show a variable number of weeks based on the true length of the month, set this to true. Defaults to false
dayheadlength
How many characters to use for the days of the week. Defaults to 2 (ex. Mo = Monday)
weekdaystart
Day of the week to start the calendar. Numeric, defaults to 0 (Sunday).
planner
Used only when you are going to call the mini-planner add-on (see the planner documentation).
tabular
Tells the control to draw with tables or divs. true means use tables. false means use divs. Defaults to false.
year, month, day
Regular calendar fields. The initial value for the calendar defaults to the current date. You can override elements of the date individually.
Date options
formatPadding
Date format defaults padding enabled (two digit length). To disable format padding, set this variable to false.
Date.formatPadding = false;