new ng.Calendar (Object options) vs. 1.1.0 Full+Lite

There are a lot of JavaScript Calendars out there, but actually only a few can be very customizable to fit everyone'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.

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.

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.
Calendar CSS Details Buttons Month/Year Drop Down Day's Name Out of Range Dates Mouse Over Selectable Date Days Off Selected Date Date Off Weekend Previous/Next Month Dates
Click on a marked section of the calendar image to the left to view the CSS details.
All table cells have a class name in the follow format: [class_prefix]date_[month]_[date]_[year] e.g. ng_cal_date_1_12_2012

All table cells in the current visible month have an id in the following format: date_ID_[month]_[date]_[year] e.g. date_MYID_1_23_2011

Today's date has the class name [css_prefix]today e.g. ng_cal_today

[text in this style] is a configuration option.
[text in this style] is generated dynamically.

Parameters

Object options vs. 1.1.0 Full+Lite
An optional key value object that holds the calendar properties.

Examples

Creating a Basic Calendar
Demo:
Creating Multi Month Calendar
In this example, will create a multiple months and multiple selection calendar.
Demo:

Inheritance Tree

This class inherits the following classes and all their methods and properties. It's recommended to check if any private properties/options are defined before using them. The complete list of inheritted methods and events are listed below the current object Custom Events.
ng.Events ()
ng.PlugIn (options)
ng.Component (options)
ng.Calendar (options)

Methods

More Examples vs. 1.1.3 Full+Lite
This document includes additional examples for the calendar component and its different uses.

Selection

Function ng.Calendar.select_date (date) vs. 1.1.0 Full+Lite
Select a date or a group of dates if they are selectable. This method will fire the onSelect event which will receive the selected date.
Function ng.Calendar.get_selected_date () vs. 1.1.0 Full+Lite
Gets the selected date or dates.
Function ng.Calendar.get_last_selected_date () vs. 1.1.0 Full+Lite
Gets the last selected date.
Function ng.Calendar.get_first_selected_date () vs. 1.1.0 Full+Lite
Gets the first selected date.
Function ng.Calendar.unselect_date (date) vs. 1.1.0 Full+Lite
Unselect a date or an array of dates. This method will fire the onUnSelect event which receives the unselected date as a variable.
Function ng.Calendar.clear_selection () vs. 1.1.0 Full+Lite
Clears all the selected dates. This method will fire the onClear event.

Inspection

Function ng.Calendar.is_selectable (date) vs. 1.1.0 Full+Lite
Check if the date is selectable base on the calendar options.
Function ng.Calendar.is_out_of_range (date) vs. 1.1.0 Full+Lite
Checks if the date is out of range (smaller than the start date or bigger than the end date).
Function ng.Calendar.is_date_off (date) vs. 1.1.0 Full+Lite
Checks if the date is an off date (e.g. Holiday).
Function ng.Calendar.is_weekend (date) vs. 1.1.0 Full+Lite
Checks if the date is a weekend.
Function ng.Calendar.is_selected (date) vs. 1.1.0 Full+Lite
Checks if the date is selected.
Function ng.Calendar.is_month_visible (date) vs. 1.1.0 Full+Lite
Checks if the month is visible.
Function ng.Calendar.update_calendar (date) vs. 1.1.0 Full+Lite
Update the calendar months based on the passed date.

Utilities

Function ng.Calendar.process_date (date, use_date) vs. 1.1.0 Full+Lite
Process the date variable and return a date object.
Function ng.Calendar.set_formatter (formatter) vs. 1.1.0 Full+Lite
Sets the general formatter function.
Function ng.Calendar.get_formatter () vs. 1.1.0 Full+Lite
Gets the formatter function.
Function ng.Calendar.set_date_format (format) vs. 1.1.0 Full+Lite
Sets the display format for the selected date.
Function ng.Calendar.get_date_format () vs. 1.1.0 Full+Lite
Gets the display date format.
Function ng.Calendar.set_server_date_format (format) vs. 1.1.0 Full+Lite
Sets the date format sent when the the form is submitted.
Function ng.Calendar.get_server_date_format () vs. 1.1.0 Full+Lite
Gets the date format sent when the form is submitted.
Function ng.Calendar.set_num_months (num) vs. 1.1.0 Full+Lite
Sets the number of months showing in the calendar.
Function ng.Calendar.get_num_months () vs. 1.1.0 Full+Lite
Gets the number of months in each calendar.
Function ng.Calendar.set_num_col (num) vs. 1.1.0 Full+Lite
Sets the number of months displayed in one row.
Function ng.Calendar.get_num_col () vs. 1.1.0 Full+Lite
Gets the number of months displayed in one row.
Function ng.Calendar.set_start_day (day) vs. 1.1.0 Full+Lite
Sets the start day of the calendar.
Function ng.Calendar.get_start_day () vs. 1.1.0 Full+Lite
Gets the start day for the calendar.
Function ng.Calendar.set_start_date (date) vs. 1.1.0 Full+Lite
Sets the calendar start date.
Function ng.Calendar.get_start_date () vs. 1.1.0 Full+Lite
Gets the start date of the calendar.
Function ng.Calendar.set_display_date (date) vs. 1.1.0 Full+Lite
Sets the display date for the calendar. If the calendar is already created, it's recommend to use the ng.Calendar.update_calendar.
Function ng.Calendar.get_display_date () vs. 1.1.0 Full+Lite
Gets the display date for the calendar. The display date is the first visible month in the calendar page.
Function ng.Calendar.set_end_date (date) vs. 1.1.0 Full+Lite
Sets the end date.
Function ng.Calendar.set_allow_selection (allow_selection) vs. 1.1.0 Full+Lite
Sets the allow selection option.
Function ng.Calendar.get_allow_selection () vs. 1.1.0 Full+Lite
Gets the allow selection option.
Function ng.Calendar.set_multi_selection (multi_selection) vs. 1.1.0 Full+Lite
Sets the multi selection option which allows the user to select more than one date. The value submitted when this option is set to true will be a comma separated list of dates. Therefore, we do not recommend using a comma in the server_date_format option.
Function ng.Calendar.get_multi_selection () vs. 1.1.0 Full+Lite
Gets the multi selection option.
Function ng.Calendar.set_max_selection (max) vs. 1.1.0 Full+Lite
Sets the maximum number of allowed selected dates.
Function ng.Calendar.get_max_selection () vs. 1.1.0 Full+Lite
Gets the maximum selection option.
Function ng.Calendar.set_dates_off (dates_off) vs. 1.1.0 Full+Lite
Sets the dates off array.
Function ng.Calendar.get_dates_off () vs. 1.1.0 Full+Lite
Gets the dates off array.
Function ng.Calendar.set_allow_dates_off_selection (allow) vs. 1.1.0 Full+Lite
Sets the allow dates off selection option.
Function ng.Calendar.get_allow_dates_off_selection () vs. 1.1.0 Full+Lite
Gets the allow dates off selection option.
Function ng.Calendar.set_weekend (weekend) vs. 1.1.0 Full+Lite
Sets the weekend array.
Function ng.Calendar.get_weekend () vs. 1.1.0 Full+Lite
Gets the weekend array.
Function ng.Calendar.set_allow_weekend_selection (allow) vs. 1.1.0 Full+Lite
Sets the allow weekend selection option.
Function ng.Calendar.get_allow_weekend_selection () vs. 1.1.0 Full+Lite
Gets the allow weekend selection option.
Function ng.Calendar.set_force_selections (force_selections) vs. 1.1.0 Full+Lite
Sets the force selection array.
Function ng.Calendar.get_force_selections () vs. 1.1.0 Full+Lite
Gets the force selection array.
Function ng.Calendar.set_days_text (days_text) vs. 1.1.0 Full+Lite
Sets the days text option.
Function ng.Calendar.get_days_text () vs. 1.1.0 Full+Lite
Gets the days text option.
Function ng.Calendar.set_months_text (month_text) vs. 1.1.0 Full+Lite
Sets the months text option.
Function ng.Calendar.get_months_text () vs. 1.1.0 Full+Lite
Gets the months text option.
Function ng.Calendar.set_header_format (format) vs. 1.1.0 Full+Lite
Sets the header format option. The headers format option will only take effect in a single calendar. Multiple calendars will have the Year on the top header and the Month on each month table.
Function ng.Calendar.get_header_format () vs. 1.1.0 Full+Lite
Gets the header format option.
Function ng.Calendar.set_close_on_select (close) vs. 1.1.0 Full+Lite
Sets the close on select option.
Function ng.Calendar.get_close_on_select () vs. 1.1.0 Full+Lite
Gets the close on select option.

Custom Events

In the events' functions, the this will refer to the class object.
Event onSelect vs. 1.1.0 Full+Lite
Fires when a user select a date. The function receives the selected date as a variable.
Event onUnSelect vs. 1.1.0 Full+Lite
Fires when a user unselect a date. The function receives the unselected date as a variable.
Event onClear vs. 1.1.0 Full+Lite
Fires when a user clear all selected dates (when the multi_selection option is set to true).
Event onInputPreStartDate vs. 1.1.0 Full+Lite
Fires when a user enters a date before the start_date option.
Event onInputPostEndDate vs. 1.1.0 Full+Lite
Fires when a user enters a date after the end_date option.
Event onDateClick vs. 1.1.0 Full+Lite
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.
Event onPreMonthClick vs. 1.1.0 Full+Lite
Fires when a user click the previous month button.
Event onShowYear vs. 1.1.0 Full+Lite
Fires when a user click the month/year button to show the drop down menus.
Event onHideYear vs. 1.1.0 Full+Lite
Fires when a user click the month/year button to hide the drop down menus.
Event onYearClick vs. 1.1.0 Full+Lite
Fires when a user click the month/year button to hide or show the drop down menus.
Event onNextMonthClick vs. 1.1.0 Full+Lite
Fires when a user click the next month button.
Event onLoad vs. 1.1.0 Full+Lite
Fires when the calendar is loaded and ready to use.
Event onMonthChange vs. 1.1.0 Full+Lite
Fires when visible month is changed.

ng.Events () Methods

Some of these methods might be overriden by the inheriting class.
Function ng.Events.add_event (evt, func) vs. 1.1.0 Full+Lite
The add_event method will attach an event listener to an object. When the event is fired, the listeners functions will be executed on last added first run approach.
Function ng.Events.add_events (obj) vs. 1.1.0 Full+Lite
This method works the same way as Events.add_event(evt, func) except it takes an object with a list of events and functions.
Function ng.Events.remove_event (evt, func) vs. 1.1.0 Full+Lite
Remove the function func from the event evt queue. When adding the event, you should add the function by reference. Anonymous functions cannot be removed.
Function ng.Events.remove_events (obj) vs. 1.1.0 Full+Lite
This method works the same way as Events.remove_event(evt, func) except it takes an object with a list of events and functions.
Function ng.Events.clear_events (evt) vs. 1.1.0 Full+Lite
Remove all the functions under the event name evt.
Function ng.Events.clear_all_events () vs. 1.1.0 Full+Lite
This function works the same way Events.clear_events(evt) except it removes all the events attached to the object.
Function ng.Events.fire_event (evt_nm, args, evt) vs. 1.1.0 Full+Lite
Executes all the functions in the event evt_nm queue. Functions are executed in lasted added first exectued order.

ng.PlugIn (options) Methods

Some of these methods might be overriden by the inheriting class.
Function ng.PlugIn.get_position () vs. 1.1.0 Full+Lite
Get the plugin holding object position.
Function ng.PlugIn.get_width () vs. 1.1.0 Full+Lite
Get the ng.PlugIn holding object width.
Function ng.PlugIn.get_heigh () vs. 1.1.0 Full+Lite
Get the ng.PlugIn holding object height.
Function ng.PlugIn.set_object (obj) vs. 1.1.0 Full+Lite
Sets the ng.PlugIn holding HTML Element. The HTML Element should hold all the output and handles any events.
Function ng.PlugIn.get_object () vs. 1.1.0 Full+Lite
Gets the HTML Elements that holds the ng.PlugIn output.
Function ng.PlugIn.make_id (txt) vs. 1.1.0 Full+Lite
Creates a unique id for the ng.PlugIn object.
Function ng.PlugIn.get_id () vs. 1.1.0 Full+Lite
Get's the plugin ID.
Function ng.PlugIn.set_language (lang) vs. 1.1.0 Full+Lite
Sets the plugin language and reset the HTML Element direction based on the language.
Function ng.PlugIn.get_language () vs. 1.1.0 Full+Lite
Gets the plugin language.
Function ng.PlugIn.remove () vs. 1.1.0 Full+Lite
Removes the plugin and all it's properties. This method will also remove any HTML Elements that are associated with the plugin.
Function ng.PlugIn.create_options (options, default) vs. 1.1.2 Full+Lite
Create the initial options for the plugin. This method doesn not alter the plugin variables, but return an object that can be assigned to a variable in the plugin.
Function ng.PlugIn.create_events () vs. 1.1.2 Full+Lite
Create the plugin events from the customized option. This method should be called after ng.PlugIn.create_options.
Function ng.PlugIn.get (prop) vs. 1.2.2 Full+Lite
Gets the plugin property. This method will check if there is a getter function for the plugin and return it's value, otherwise it'll return the raw property. This method is useful for getting custom properties.
Function ng.PlugIn.set (prop, value) vs. 1.2.2 Full+Lite
Sets the plugin property. This method will check if there is a setter method for the plugin and call it. Otherwise, it will set the raw property value.This method is useful for setting custom properties.

ng.Component (options) Methods

Some of these methods might be overriden by the inheriting class.
Function ng.Component.set () vs. 1.1.0 Full+Lite
Sets the ng.Component default values and prepare it's HTML structure.
Function ng.Component.set_parent (parent) vs. 1.1.0 Full+Lite
Sets the ng.Component parent object. This allows for nested components.
Function ng.Component.get_parent () vs. 1.1.0 Full+Lite
Gets the parent component.
Function ng.Component.get_parents_components () vs. 1.1.0 Full+Lite
Gets an array of all the component parents.
Function ng.Component.get_children_components () vs. 1.1.0 Full+Lite
Gets an array of all the children components.
Function ng.Component.set_html (html, append, eval_script) vs. 1.1.0 Full+Lite
Sets the component HTML code. Review ng.Element.set_html for more details.
Function ng.Component.get_html () vs. 1.1.0 Full+Lite
Gets the component HTML code.
Function ng.Component.open () vs. 1.1.0 Full+Lite
Opens the component and fires the onOpen event.
Function ng.Component.close () vs. 1.1.0 Full+Lite
Closes the component and fires the onClose event.
Function ng.Component.toggle () vs. 1.1.0 Full+Lite
Opens or closes the component.
Function ng.Component.reposition (obj) vs. 1.1.0 Full+Lite
Reposition the component based on the object position. This method is useful when the placement is the opposite to the language direction and the content changes regularly when the component is open.
Function ng.Component.get_content_div () vs. 1.2.0 Full+Lite
Get the div HTML Element that holds the component content.
Function ng.Component.set_button_ui_class () vs. 1.2.0 Full+Lite
Set the button UI CSS class name option.
Function ng.Component.get_button_ui_class () vs. 1.2.0 Full+Lite
Gets the buttons UI CSS class name.
Function ng.Component.is_open () vs. 1.1.0 Full+Lite
Checks if the component is open.
Function ng.Component.is_close () vs. 1.1.0 Full+Lite
Checks if the component is closed.
Function ng.Component.disable () vs. 1.1.0 Full+Lite
Disables the component and any associated buttons and input field. This method will first the onDisable event.
Function ng.Component.enable () vs. 1.1.0 Full+Lite
Enables the component and any associated buttons and input field. This method will fires the onEnable event.
Function ng.Component.is_enabled () vs. 1.1.0 Full+Lite
Checks if the component is enabled.
Function ng.Component.is_disabled () vs. 1.1.0 Full+Lite
Checks if the component is disabled.
Function ng.Component.set_input (object) vs. 1.1.0 Full+Lite
Sets the component input field. If the component already has an input set, it will remove the events from the original input field.
Function ng.Component.get_input () vs. 1.1.0 Full+Lite
Gets the input field for the component.
Function ng.Component.set_button (btn) vs. 1.1.0 Full+Lite
Sets the component button. When the ng.[NG[Link=Button]Button is clicked, it will toggle the component.
Function ng.Component.get_button () vs. 1.1.0 Full+Lite
Gets the components button.
Function ng.Component.set_placement (placement) vs. 1.1.0 Full+Lite
Sets the component placement.
Function ng.Component.get_placement () vs. 1.1.0 Full+Lite
Gets the component's placement.
Function ng.Component.set_offset (offset) vs. 1.1.0 Full+Lite
Sets the component's offset.
Function ng.Component.get_offset () vs. 1.1.0 Full+Lite
Gets the component's offset.
Function ng.Component.set_visible (visible) vs. 1.1.0 Full+Lite
Sets the component's visibility.
Function ng.Component.get_visible () vs. 1.1.0 Full+Lite
Gets the component visibility.
Function ng.Component.set_open_onfocus (open_focus) vs. 1.1.0 Full+Lite
Sets the component open_onfocus property.
Function ng.Component.get_open_onfocus () vs. 1.1.0 Full+Lite
Gets the component open_onfocus property.
Function ng.Component.set_open_onclick (open_click) vs. 1.1.0 Full+Lite
Sets the component open_onclick property.
Function ng.Component.get_open_onclick () vs. 1.1.0 Full+Lite
Gets the component open_onclick property.
Function ng.Component.get_input_html () vs. 1.1.4 Full+Lite
Get the HTML table code for an input field and button holder. The code will not contain the input or the button.

ng.PlugIn (options) Custom Events

In the events' functions, the this will refer to the class object.
Event onBeforeRemove vs. 1.2.2 Full+Lite
This event will fire right before the plugin (or any object that inherit it, e.g. components) is removed.

ng.Component (options) Custom Events

In the events' functions, the this will refer to the class object.
Event onOpen vs. 1.1.0 Full+Lite
Fires when the component is opened.
Event onClose vs. 1.1.0 Full+Lite
Fires when the component is closed.
Event onEnable vs. 1.1.0 Full+Lite
Fires when the component is enabled.
Event onDisable vs. 1.1.0 Full+Lite
Fires when the component is disabled.

API Menu