Scal Cookbook

Recipes for Scal

Get the calendar on the screen!
Under v0.1 you needed to build and get the calendar and then show it. All of those methods have been replaced by simply instantiating the calendar class.

If the samplecal element is visible, your calendar will be visible. If it is hidden, you need to toggleCalendar to show it. Just that simple. This method also makes it possible to show multiple calendars at the same time which was a bit dicey under v0.1.

Calendar elements
Many helper functions have been provided in order to ease the retrieval of specific calendar elements.
However, they are those few times when you have to get dirty.

Here is a map of the class formats given throughout scal's elements(every bulleted item is a class name):

• calheader

  - the container element of the calendar controls

  • calcontrol

    - all calheader elements have this base class with the exception of the calendar title

  • calprevmonth

    - element for the previous month control

  • calnextmonth

    - element for the next month control

  • calprevyear

    - element for the previous year control

  • calnextyear

    - element for the next year control

  • caltitle

    - element for the calendar title

  • calclose

    - element for the close control

• cal_wrapper

  - the container element for all the calendar elements

  • weekbox

    - the default class for the element that contains a weeks day elements

  • weekboxname

    - the class of the elements indicating the day of the week at the top of the calendar

  • the weekbox elements that are not day indicators follow this format:
    

    cal_week_#{WEEKNUMBER}

    WEEKNUMBER - the digit that indicates the week number that it corresponds to for the given calendar
    

    var firstWeek = $('samplescal').select('.cal_week_0');

  • daybox

    - every day element in the scal structure has this default class
    general classes given dependent upon day how the day falls in the current calendar:

    • dayinmonth - class given if the day of element falls in current calendar month
    • dayoutmonth - class given if the day of element does not fall in current calendar month
    • endweek - class for the last day of the week
    • today - class for today
    • dayselected - class for the day selected

  • dayboxname

    - the dayboxes in the weekboxname element have this default class, and individual class formats of:
    

    cal_day_name_#{DAYNUMBER}

    DAYNUMBER - the digit that indicates the day daynumber that it corresponds to for the given week
    

    var sundayIndicator = $('samplecal').select('.weekboxname .cal_day_name_0');
var allIndicators = $('samplecal').select('.weekboxname .dayboxname');
  • The remainding dayboxes in the scal structure are the elements for each day of the current calendar. These dayboxes contain the elements for the day number, and the day value (for use of the planner). These daybox elements have two specific formats:

    • daybox#{DAYNAME}

      DAYNAME - day name as defined in Date.prototype.daynames
      

      var allSundays = $('samplecal').select('.weekbox .dayboxsunday');

    • cal_day_#{WEEKNUMBER}_#{DAYNUMBER}

      WEEKNUMBER - the digit that indicates the week number that it corresponds to for the given calendar
      DAYNUMBER - the digit that indicates the day daynumber that it corresponds to for the given week
      

      var firstSunday = $('samplecal').select('.weekbox .cal_day_1_0');

      • dayboxdate

        - child element of daybox, container of the day number value

      • dayboxvalue

        - child element of daybox, container of the
        planner event elements

Language Translation Support

The language can easily be changed prior to creating the instance of scal.

Prior to initiating scal: