Scal is designed to be a basic javascript calendar, a date picker. However, if you have a calendar it is only inevitable that someone will want to turn it into a planner. Adding a mini-planner to scal was fairly simple, just add a dictionary to hold all the planner events and then load the relevant events when a particular month is displayed.
In version v0.1, the planner was part of the main scal.js file. For the sake of performance and extensibility, v0.2 separates the planner from the the main scal.js file. The planner is now in its own js: scalplanner.js. In addition to the structural changes, v0.2 planner events are far more robust and flexible than v0.1.
Calling up the planner under v0.2 is simple. Just include scalplanner.js after scal.js in your html.
<script type="text/javascript" src="/javascripts/prototype.js"> </script>
<script type="text/javascript" src="/javascripts/scal.js"> </script>
<script type="text/javascript" src="/javascripts/scalplanner.js"> </script>When you instantiate an scal instance pass along a planner array with the rest of the options:
var myplanner = [
{ period: 'December 17, 2007', label: ["Mom's Birthday", "Julie's Birthday"], cls: 'celebration'},
{ period: 'November 10, 2007', label: ['renew license','pickup mom'], cls: 'reminders'},
{ period: $A($R(new Date('November 5, 2007'),new Date('November 9, 2007'))), label: ['dragon days'], cls: 'dragons'}
];
var samplecal = new scal('samplecal',updateyear,{titleformat:'mmmm yyyy',closebutton:'X',dayheadlength:2,weekdaystart:0,planner: myplanner});For more on event styles, see planner_test.html in the scal distribution. planner_test contains the css styles for 'celebration', 'reminders', and 'dragons'.
A live example of the planner is also available here on the documentation site.
The example above creates an scal instance with a few events. But what if you don't have events to fill in right away?
Simple enough, just pass in an empty array with options.planner, like so:
samplecal = new scal('samplecal',updateyear,{titleformat:'mmmm yyyy',closebutton:'X',dayheadlength:2,weekdaystart:0,planner: []});Adds an event to the planner with a class of dayboxevent.
iscal is the only included style that has a dayboxevent style
year,month,day should be self-explanatory. Val is the text that will appear on said date.
cls is the css class that will be applied to the new planner event (along with the dayboxevent class).
Returns the element that the planner events were added to.
samplecal.setPlannerValue(2007,11,29,"Remove dragons!", 'dragonremove');Changes the value of a particular cell on the calendar grid.
week and day map to row and column as opposed to a true javascript Date. Val is the text that will appear on said date.
cls is the css class that will be applied to the new planner event (along with the dayboxevent class).
Returns the element that the planner events were added to.
samplecal.updateDayValue(2,1, "Pepper Fest!", 'pepperfest');Returns an array of all planner event elements for a specified date.
Date object of the the specified element to retrieve.
None
An array of planner event elements for the specified date
var evts = samplecal.getElementsByDate(new Date('December 17, 2007'));Retrieves the planner event elements for the specified week.
Number of the week to retrieve planner event elements for.
None
AOA- Array of arrays containing the planner event elements for days of the given week
// will return an array containing the dates from November 5, 2007 to November 9, 2007
samplecal.getDatesByEvent('dragon days');Removes the planner events elements for a specified date.
By defaults, it removes all planner events elements for the specified date.
Date object of the the specified planner event elements to remove.
index paramter is the index of the planner event for the date to remove from.
If the index parameter is given, only one planner event element will be removed.
Returns false if a planner date is not set for the given date.
// remove Mom's birthday (sorry Mom)
samplecal.removeEventsByDate(new Date('December 17, 2007'), 0);
// remove all events for December 17, 2007
samplecal.removeEventsByDate(new Date('December 17, 2007'));Returns an array of objects for each event for the current month.
None
When given a parameter of true value, this method will only return the events for the current month. The default behavior is to return all events that are displayed, and not just the current month's events.
Array of planner event objects
Each object in the returned array has the following properties:
// get all events for the current view
samplecal.getCurrentEvents();
// get all events for the current month
samplecal.getCurrentEvents(true);Returns an array of all planner events set for the given planner date.
Date object of the the specified planner event elements to retrieve.
None
Array of planner event label string that are set for the given planner date.
// will return ["Mom's Birthday", "Julie's Birthday"]
samplecal.getEventsByDate(new Date('December 17, 2007'));Returns an array of dates that the given planner event falls on.
The label string of the planner event to retrieve the date objects for.
None
Array of date objects that the give planner events falls on.
// will return an array containing the dates from November 5, 2007 to November 9, 2007
samplecal.getDatesByEvent('dragon days');Retrieves the selected planner day event elements for the current calendar.
None
Array of planner event elements for the selected day.
var selectedEvents = samplecal.getSelectedEvents();Retrieves the today planner day event elements for the current calendar.
None
Array of planner event elements for today.
var todayEvents = samplecal.getTodaysEvents();