Using Scal’s Mini Planner
Scal is designed to be a basic Javascript calendar. However, a suggestion came in about adding a planner-like function that kept day information intact as a user scrolled through the months. I thought that was a good idea and so I put it into a release.
As the documentation states:
I do not recommend using the planner when you are using a compressed calendar style (i.e. one that does not show the day cell). Of the sample styles, iscal is probably the best to use.
Below is a basic usage example I sent back to the suggester in email. Enjoy!
> I really liked your idea about adding events to scal. The static
> building of the calendar each month is a bit of a drag. So, I’ve
> added a new “planner” property that automatically sets the DayValue
> for a cell. You probably noticed the updateDayValue function in the
> list. The new function is called setPlannerValue. This function
> ties a bit of text to a particular day, and if we are displaying that
> month at the moment the day cell is filled in accordingly.
> Here’s how it might look using the sample code on
> http://www.fieldguidetoprogrammers.com:
samplecal = new scal('samplecal',updateyear,{titleformat:'mmmm yyyy',closebutton:'X',dayheadlength:2,weekdaystart:0});
// new code
samplecal.setPlannerValue(2007,8,28,"Here be dragons!");
// end new code
samplecal.showCalendar();
> Doing this would cause the text “Here be dragons!” to show up in the
> day cell for 8/28/2007. If you skipped off to September or November
> and then came back to August 2007, “Here be dragons!” would appear
> accordingly on the 28th.
> You could also pass in styled HTML instead of plain text, so this
> should cover your color coded bar idea too (which is a good one). I
> suspect that your styled HTML could also contain some nifty code to
> flash a pop-up on mouseover that would enable you to expand the event
> information. That seems like it would be easy to do with scriptaculous.











Leave a Comment