scal

floating calendar issue

//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

I 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

This floating calendar demo (and style) was graciously provided by DMenT. (Thanks!)

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

Filed under

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)

Filed under

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.

Filed under

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',

Filed under

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);

Filed under
Syndicate content