scal
floating calendar issue
Posted July 17th, 2008 by Anonymous//this is a global variable to have only one instance of the calendar
var calendar = null;
//@element => is the where the calender will be rendered by Scal.
//@input => is the where the date will be updated.
//@container => is the for dragging.
//@source => is the img/button which raises up the calender, the script will locate the calendar over this control.
function showCalendar(element, input, container, source)
{
...
...
var date = new Date($F(input));
can't get scal working
Posted March 5th, 2008 by AnonymousI know I'm probably just being thick, but I can't get scal working. I actually get an uncaught exception in Firefox, with the error message "Object cannot be created in this context" (NS_ERROR_DOM_NOT_SUPPORTED_ERR).
I've probably missed something simple?
http://dev.billiardsearch.net/test/scal1.php
I _think_ I followed the instructions! What have I done wrong?
many thanks,
- Kev
Scal Floating Calendar Demo
To use it, just click the calendar icon to get a pop-up calendar. You can download the full archive (styles, sample code, etc) here - floating-calendar.zip
Scal oncalchange Demo
A functional test of the oncalchange function. The SELECT for month, day, and year are updated when you click on the calendar. In addition, if you change dates using the SELECT elements, the calendar changes accordingly. (demo uses the "slick" scal skin, though any of the styles will work)
Scal Planner Demo
This demo is a modified version of the code in planner_test.html. To learn more about the planner, read the online documentation.
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.
Scal Options
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',
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.
var Cal = new scal('samplecal',updateelement,options);