Cross-browser, 100% JavaScript calendar script implementing the appropriate
functionality with many advanced options widely extending fields of its
applications.
Features
No pop-up windows (some browsers and software installed on
user's side do not allow such windows to open)
Skinnable (all you need is just one line of code to change
calendar layout completely). Skins are fully CSS-based
Multilingual (one line of code again to make calendar
speaking another language)
Language dependent date formats
Multiple calendar instances on one page
Relative or absolute positioning (allows to embed calendar
objects in html document or position them absolutely using flexible horizontal
and vertical alignment options). Alignment options supported: left, right,
center, top, bottom, adj_right, adj_bottom
User-defined behaviour (you can intercept calendar events
and handle them according to logic of your application)
Could be associated with an element (eg text field) to
read/write date from/to (in many cases this allows to minimize amount of code
and time necessary to make the calendar working)
Pop-up mode (calendar closes on mouse click outside it)
Any week days as weekend days
Option to choose any week day to start week with
Integrated with Smart Grid(Ajax-based table editing tool)
Requirements
Rich Calendar works in IE, Mozilla-based browsers such as Firefox, Opera 9+,
and Safari 3.0.
License
Free for non-commercial using. Copyright information must stay intact.
Please contact author for permission to use it in commercial projects.
Examples
1. Absolute positioned calendar. No alignment settings. Pop-up mode off
Code:
var div_cal1 = document.getElementById("cal1_div");
var div_cal1_pos = RichCalendar.get_obj_pos(div_cal1);
var cal_obj = new RichCalendar();
cal_obj.auto_close = false;
cal_obj.user_onchange_handler = cal_on_change_dummy;
cal_obj.show(div_cal1_pos[0]+20, div_cal1_pos[1]);
// user defined onchange handler
function cal_on_change_dummy(cal, object_code) {
if (object_code == 'day') {
alert('Date selected: ' + cal.get_formatted_date());
cal.show_date();
}
}
2. Absolute positioned calendar. Position is calculated based on position of
the text field below. Alignment settings - "adj_right-top" (such
settings are also possible: "-top" and "adj_right-"!). User
defined handlers. Russian language. Skin 'alt'. User defined date format.
Week starts with Tuesday. Time is shown
Code:
var cal_obj2 = null;
var format = '%j %M %Y %H:%i';
// show calendar
function show_cal(el) {
if (cal_obj2) return;
var text_field = document.getElementById("text_field");
cal_obj2 = new RichCalendar();
cal_obj2.start_week_day = 2;
cal_obj2.show_time = true;
cal_obj2.language = 'ru';
cal_obj2.user_onchange_handler = cal2_on_change;
cal_obj2.user_onclose_handler = cal2_on_close;
cal_obj2.user_onautoclose_handler = cal2_on_autoclose;
cal_obj2.parse_date(text_field.value, format);
cal_obj2.show_at_element(text_field, "adj_right-top");
cal_obj2.change_skin('alt');
}
// user defined onchange handler
function cal2_on_change(cal, object_code) {
if (object_code == 'day') {
document.getElementById("text_field").value = cal.get_formatted_date(format);
cal.hide();
cal_obj2 = null;
}
}
// user defined onclose handler (used in pop-up mode - when auto_close is true)
function cal2_on_close(cal) {
if (window.confirm('Are you sure to close the calendar?')) {
cal.hide();
cal_obj2 = null;
}
}
// user defined onautoclose handler
function cal2_on_autoclose(cal) {
cal_obj2 = null;
}
3. Relative positioned calendar. Added as a child to a table cell below.
Alignment settings - "child". User defined handlers (do not allow to
close calendar)
Calendar in the table cell below
Code:
var cal3_td = document.getElementById('cal3_td');
var cal_obj3 = new RichCalendar();
cal_obj3.auto_close = false;
cal_obj3.user_onchange_handler = cal_on_change_dummy;
cal_obj3.user_onclose_handler = cal3_on_close;
cal_obj3.show_at_element(cal3_td, "child");
// user defined onclose handler
function cal3_on_close(cal) {
}