JavaScript Calendar

There are a lot of JavaScript Calendars out there, but actually only a few can be very customizable to fit anyone's need. That's why we have created a JavaScript Calendar Component that is very customizable and extendable. You can see our calendar at work right in this page. There are tons of features in this calendar package, such as the list below:

Complete Download (including the NoGray Framework)

Donate:

Latest News

Partners

Home Page JavaScript Tools JavaScript Calendar

Download:

Complete Download (including the NoGray Framework)
Calendar Only Download (if you already have the NoGray Framework)

Features:

Create any numbers of months per calendar.
Set the weekend, days off, holidays (dates off), start day of the week.
Start and end date.
Multi selection with limits or without.
Skinnable (using CSS).
Can have any number of calendars in any page.
Optimized for best performance.

Recent Updates:

Oct 31st, 2011: A new update is released to fix a bug when changing the months for multi months calendar and the start date value (e.g. 31) is smaller than the last month end date (e.g. 30). Only replace the calendar.js to fix this error.
March 18th, 2011: A new update is released to fix a bug with a conflict between the multi_selection and selected_date options when declaring a new calendar.
March 12th, 2011: The NoGray framework is updated to be compatible with jQuery. Your calendar implementation should be the same, only replace the JavaScript files in the zip file. If you find any bugs, please contact us with the details.
Feb 23rd, 2011: The calendar input field style is changed to inline to match native input field.
Feb 21st, 2011: set_start_date() and set_end_date() fixed to update the year drop down select menu.
Feb 18th, 2011: server_date_format option was added to allow the customization of the date format sent to the server when a form is submitted. Default value is Y-n-j (e.g. 2011-2-18).

Requirements:

The NoGray JavaScript Library
Document Type Declaration (DOCTYPE) such as <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Create It

To create a calendar, you'll need to declare a new calendar object in the ng.ready function or when the page is loaded. The calendar can be declared using an input field or stand alone.
Example: Simple calendar example (new window)

HTML:
<input type="text" id="date1" name="date1">
...
<div id="cal_holder_div"></div>
...
later
...
<script type="text/javascript" src="js/ng/ng_all.js"></script>
<script type="text/javascript" src="js/ng/components/calendar.js"></script>
Script:
// calendar connected to an input field
var my_cal1 = new ng.Calendar({input:'date1'});

// stand alone calendar
var my_cal2 = new ng.Calendar({num_months:4,
                            num_col:2});
my_cal2.make('date2');

Try It:

Simple calendar example (new window)
Simple Calendar:

Four Months Calendar (multi date selection):

Different Languages:

Dutch	Chinese	Arabic

Skinning:

The Calendar Component use CSS style sheet to skin the different parts of the calendar. The calendar css_prefix option will allow for creating different skins in the same CSS file. Additionally, the general configuration css_prefix option will allow the creation of different skins for all the components in the page in different files.

The following images illustrate the different parts with their class names, ids and text values.
NoGray Calendar CSS Style Sheet Details

Options:

You can pass a JavaScript object when creating the calendar as the following:

Option	Type	Description	Default Value
input	String or HTML object	An HTML input element or id for the input that will hold the component output. Special Value: for three drop down select menus, you can pass a JavaScript object with the select menus ids or HTML objects as the following: input: {year: 'year_id', month: 'month_id', date: 'date_id'}	null
object	String or HTML object	An HTML holding element or id for the object that will hold the component if it's not connected to an input.	null
visible	Boolean	Set the component as visible (e.g. always open). Used to implement the component inline instead of floating	false
placement	String	The placement of the component in relation to the input, it could be one of the following values: The first two letters are for the input position (t for top, b for bottom, l for left, r for right). The last two letters are for the components position (t for top, b for bottom, l for left, r for right). bltl: bottom left of input will match the top left of the component (default of ltr languages). brtr: bottom right of input will match the top right of the component (default of rtl language).	bltl or brtr
offset	Object	An X and Y values to offset the placement of the component.	{x:0, y:0}
disabled	boolean	Disable the component when it's created	false
date_format	String	A string that represent the display format for the selected date or when. We have adopted the PHP date specification for printing dates. Click here for more details.	D, d M Y
Examples: var my_cal = new ng.Calendar({date_format:'m/d/Y'});
server_date_format	String	A string that represent the date format sent when the the form is submitted. We have adopted the PHP date specification for printing dates. Click here for more details.	Y-n-j
Examples: var my_cal = new ng.Calendar({date_format:'m/d/Y', server_date_format:'Y-m-d'});
num_months	Integer	The number of months displayed in each page.	1
Examples: var my_cal = new ng.Calendar({num_months:4});
num_col	Integer	The number of months displayed in one row.	3
Examples: The following example will show four calendars on each page in two rows. var my_cal = new ng.Calendar({num_months:4, num_col:2});
css_prefix	String	The CSS prefix for skinning the calendar on the same CSS file.	ng_cal_
start_day	Integer	The starting day for the calendar in an numerical format between 0 to 6 (0-Sunday, 6-Saturday)	0
start_date	Date, String or Object	The starting date for the calendar.	today
end_date	Date, String or Object	The ending date for the calendar.	year+10
allow_selection	boolean	Allow the user to select a date or just view the calendar	true
multi_selection	boolean	Allow the user to select more than one date	false
max_selection	integer	If multi_selection is set to true, the total number of dates the user can select. If set to 0, the user will be able to select any number of dates	0
language	String	The specific language for the calendar.	ng_config.language
formatter	function	Function that will return the default dates text.	See Example
Examples: function(dt){ return ng.Language.translate_numbers(dt.getDate(), this.get_language()); }.bind(this)
selected_date_formatter	function	Function that will return the selected date text.	See Example
Examples: function(dt){ return ng.Language.translate_numbers(dt.getDate(), this.get_language()); }.bind(this)
out_of_range_formatter	function	Function that will return the out of range dates text.	See Example
Examples: function(dt){ return ng.Language.translate_numbers(dt.getDate(), this.get_language()); }.bind(this)
other_month_formatter	function	Function that will return the previous or next month's dates text.	See Example
Examples: function(dt){ return ng.Language.translate_numbers(dt.getDate(), this.get_language()); }.bind(this)
dates_off	array	An array of dates that represent the holidays or dates off	null
Examples: var my_cal = new ng.Calendar({ dates_off:[ 'today+5', // five days from today {date:25, month:11} // for xmas every year ] });
allow_dates_off_selection	boolean	Allow the user to select an off date	false
dates_off_formatter	function	Function that will return the dates off text.	See Example
Examples: function(dt){ return ng.Language.translate_numbers(dt.getDate(), this.get_language()); }.bind(this)
days_off	array	An array of integers for the off days (0 for Sun, 6 for Sat)	null
allow_days_off_selection	boolean	Allow the user to select an off day	false
days_off_formatter	function	Function that will return the days off text.	See Example
Examples: function(dt){ return ng.Language.translate_numbers(dt.getDate(), this.get_language()); }.bind(this)
weekend	array	An array of integers for the weekend days (0 for Sun, 6 for Sat)	null
allow_weekend_selection	boolean	Allow the user to select an weekend date	false
weekend_formatter	function	Function that will return the weekend dates text.	See Example
Examples: function(dt){ return ng.Language.translate_numbers(dt.getDate(), this.get_language()); }.bind(this)
force_selections	array	An array of dates that will allow the user to select them regardless of their status	null
date_on_avaliable	object	An object of functions that will run when the date is rendered. The key of each function must be a date in the following format m_d_y (1 for Jan) e.g. 1_15_2011. this will refer to the calendar and the table cell is will be passed as an argument.	null
Examples: var dates_func = { '1_15_2011': function(id){ng.get(id).set_style('background', '#ff0000')} }; ng.Calendar({date_on_avaliable:dates_func});
days_text	String	A string to select the length of the days text on top of the calendar. Can be either 'char', 'short', 'mid', or 'long'	mid
months_text	String	A string to select the length of the months text on top of the calendar. Can be either 'short' or 'long'	long
right_arrow_img	String	The path to the right arrow image	See Example
Examples: ng_config.assests_dir+'components/calendar/images/right_arrow.gif'
right_arrow_img_disabled	String	The path to the right arrow image disabled	See Example
Examples: ng_config.assests_dir+'components/calendar/images/right_arrow_dis.gif'
left_arrow_img	String	The path to the left arrow image	See Example
Examples: ng_config.assests_dir+'components/calendar/images/left_arrow.gif'
left_arrow_img_disabled	String	The path to the left arrow image disabled	See Example
Examples: ng_config.assests_dir+'components/calendar/images/left_arrow_dis.gif'
calendar_img	String	The path to the calendar image	See Example
Examples: ng_config.assests_dir+'components/calendar/images/calendar.gif'
calendar_img_disabled	String	The path to the calendar image disabled	See Example
Examples: ng_config.assests_dir+'components/calendar/images/calendar_dis.gif'
header_format	String	The calendar header date display (default is Month Year). This will only take effect in a single calendar implementation. Multiple calendars will have the Year on the top header and the Month on each month table.	F Y
close_on_select	boolean	Choose to close the calendar when the user select a date. Defaults to true for a single date selection or false when multi_selection is true	true unless multi_selection is true
selected_date	date or array	A date or an array of dates to select when the calendar is created	null
display_date	date	The date on which the calendar will first load when created	start_date
buttons_color	string	The color of the buttons (defaults to the general configuration color: transparent)	ng_config.button_color
buttons_over_color	string	The color of the buttons when the mouse is over them (defaults to the general configuration color: #ffd06e)	ng_config.button_over_color
buttons_down_color	string	The color of the buttons when the user click on them (null for automatic color based on button_over_color)	null
buttons_disable_color	string	The color of the buttons when the calendar is disabled (null for automatic color based on button_color)	null
buttons_gloss	boolean	To show a gloss reflection on the button or not (defaults to the general configuration: true)	ng_config.button_gloss
hide_clear_button	boolean	When multi_selection is true, a clear selection button is visible in the bottom of the calendar. This option will hide the clear button if set to true	false
hide_view_all_dates_button	boolean	When multi_selection is true, a view selected dates button is visible in the bottom of the calendar. This option will hide the view selected date button if set to true	false

Events The events are passed to the calendar in the options object when declaring the calendar. For example:

var my_cal = new ng.Calendar({input:'date1',
	events: {
		onSelect: function(dt) { alert(dt); }
	}
});

The this object will represent the calendar in the event function. Review the table below for a complete list of events.

Event	Arguments	Description
onOpen	N/A	Fires when the component is opened. If the component visible option is set to true, this event won't fire
onClose	N/A	Fires when the component is closed. If the component visible option is set to true, this event won't fire
onDisable	N/A	Fires when the component is disabled.
onEnable	N/A	Fires when the component is enabled.
onInputPreStartDate	N/A	Fires when a user enters a date before the start_date option.
onInputPostEndDate	N/A	Fires when a user enters a date after the end_date option.
onSelect	date (DATE)	Fires when a user select a date. The function receives the selected date as a variable.
onUnSelect	date (DATE)	Fires when a user unselect a date. The function receives the unselected date as a variable.
onClear	N/A	Fires when a user clear all selected dates (when the multi_selection option is set to true).
onDateClick	date (DATE)	Fires when a user click on any date in the calendar range (regardless if the date is selecable or not). The function will receive the clicked date as an argument and the event object will refer to the click event.
onPreMonthClick	N/A	Fires when a user click the previous month button.
onShowYear	N/A	Fires when a user click the month/year button to show the drop down menus.
onHideYear	N/A	Fires when a user click the month/year button to hide the drop down menus.
onYearClick	N/A	Fires when a user click the month/year button to hide or show the drop down menus.
onNextMonthClick	N/A	Fires when a user click the next month button.
onLoad	N/A	Fires when the calendar is loaded and ready to use.
onMonthChange	N/A	Fires when visible month is changed.
onRemove	N/A	Fires when the calendar is removed.