Responsive JavaScript Calendar Component

Apr 01, 2014 in Date & Time 3946 views

Download

Overview
Documents

User Rating: 0/5 ( 0 votes)

Your Rating:

There are a lot of JavaScript Calendars and Date Pickers out there, but actually only a few can be very customizable to fit everyone's need. That's why we have created a Responsive JavaScript Calendar Component that is very customizable and extendable. You can see our calendar at work right in this page.

Don't want to go through all the API documentations? We got the solution for you, now you can customize your own calendar using our online builder. Simply change what you want and you'll get all the code right away. You can also save your work for reference.

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.

Creating a Basic Calendar

<input type="text" id="date1">

<script type="text/javascript" src="PATH/TO/ng_all.js"></script>
<script type="text/javascript" src="PATH/TO/ng_ui.js"></script>
<script type="text/javascript" src="PATH/TO/components/calendar.js"></script>

<script type="text/javascript">
ng.ready( function() {
    var my_cal = new ng.Calendar({
        input: 'date1',            // the input field id
        start_date: 'last year',   // the start date (default is today)
        end_date: 'year + 5',      // the end date (related to start_date, 4 years from today)
        display_date: new Date()   // the display date (default is start_date)
    });
    
});
</script>

Creating Multi Month Calendar

<input type="text" id="multi_cal_input">

<script type="text/javascript" src="PATH/TO/ng_all.js"></script>
<script type="text/javascript" src="PATH/TO/ng_ui.js"></script>
<script type="text/javascript" src="PATH/TO/components/calendar.js"></script>

<script type="text/javascript">
ng.ready( function() {
    var my_multi_cal = new ng.Calendar({
        input: 'multi_cal_input',
        end_date: 'year + 100',
        num_months:4,
        num_col:2,
        multi_selection:true,
        max_selection: 5
    });
});
</script>

options

An optional key value object that holds the calendar properties. The ng.Calendar class inherits the ng.Component.options and all it's properties.

Properties

String date_format (Optional - Default: D, d M Y) vs. 1.1.0 Full+Lite

A string that represent the display format for the selected date. We have adopted the PHP date specification for printing dates. Click here for more details.

String server_date_format (Optional - Default: Y-n-j) vs. 1.1.0 Full+Lite

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.

Integer num_months (Optional - Default: 1) vs. 1.1.0 Full+Lite

The number of months displayed in each page.

Integer num_col (Optional - Default: 3) vs. 1.1.0 Full+Lite

The number of months displayed in one row.

String css_prefix (Optional - Default: ng_cal_) vs. 1.1.0 Full+Lite

The CSS prefix for skinning the calendar on the same CSS file.

Integer start_day (Optional - Default: 0) vs. 1.1.0 Full+Lite

The starting day for the calendar in an numerical format between 0 to 6 (0-Sunday, 6-Saturday)

Date start_date (Optional - Default: today) vs. 1.1.0 Full+Lite

The starting date for the calendar. This can also be a string (see Date.from_string) or an object (see Date.from_object). All dates that are set as strings or objects will be relative to the start_date.

Date end_date (Optional - Default: year+10) vs. 1.1.0 Full+Lite

The ending date for the calendar. This can also be a string (see Date.from_string) or an object (see Date.from_object). If this is not a JavaScript date, it will be relative to the start_date value (e.g. year+10 is the ten years from the start date).

Boolean allow_selection (Optional - Default: true) vs. 1.1.0 Full+Lite

Allow the user to select a date or just view the calendar.

Boolean multi_selection (Optional - Default: false) vs. 1.1.0 Full+Lite

Allow 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.

Integer max_selection (Optional - Default: 0) vs. 1.1.0 Full+Lite

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

Function formatter (date) (Optional - Default: (see description)) vs. 1.1.0 Full+Lite

Function that will return the default dates text. The default function will return the date translated based on the language. This function will receive the current date as a variable and this will refer to the calendar object.

Function selected_date_formatter (date) (Optional - Default: (see description)) vs. 1.1.0FULL ONLY

Function that will return the selected date text. The default function will return the date translated based on the language. This function will receive the current date as a variable and should return a string. this will refer to the calendar object.

Function out_of_range_formatter (date) (Optional - Default: (see description)) vs. 1.1.0FULL ONLY

Function that will return the out of range dates text. The default function will return the date translated based on the language. This function will receive the current date as a variable and should return a string. this will refer to the calendar object.

Function other_month_formatter (date) (Optional - Default: (see description)) vs. 1.1.0FULL ONLY

Function that will return the previous or next month's dates text. The default function will return the date translated based on the language. This function will receive the current date as a variable and should return a string. this will refer to the calendar object.

Array dates_off (Optional - Default: Null) vs. 1.1.0 Full+Lite

An array of dates that represent the holidays or dates off (e.g. [new Date(), 'Jan 13th, 2013', {date:25, month:11} /* xmas */]). Strings or objects will be relative to the start date.

Boolean allow_dates_off_selection (Optional - Default: false) vs. 1.1.0 Full+Lite

Allow the user to select an off date.

Function dates_off_formatter (date) (Optional - Default: (see description)) vs. 1.1.0 FULL ONLY

Function that will return the dates off text. The default function will return the date translated based on the language. This function will receive the current date as a variable and should return a string. this will refer to the calendar object.

Array days_off (Optional - Default: Null) vs. 1.1.0 FULL ONLY

An array of integers for the off days (0 for Sun, 6 for Sat)

Boolean allow_days_off_selection (Optional - Default: false) vs. 1.1.0 FULL ONLY

Allow the user to select an off day

Function days_off_formatter (date) (Optional - Default: (see description)) vs. 1.1.0 FULL ONLY

Function that will return the days off text. The default function will return the date translated based on the language. This function will receive the current date as a variable and should return a string. this will refer to the calendar object.

Array range_off (Optional - Default: Null) vs. 1.1.0 FULL ONLY

Set a date range to be off (from a start to an end date). This should be an array of arrays for range offs. Each range off array contains two values, the start date and the end date. e.g. [['Sep 5th, 2012', 'Sep 10th, 2012'], ['Jan 1st, 2013', 'Jan 12th, 2013']]

Boolean allow_range_off_selection (Optional - Default: false) vs. 1.1.0 FULL ONLY

Allow the user to select a date in the range off.

Function range_off_formatter (date) vs. 1.1.0 FULL ONLY

Function that will return the range off dates text. The default function will return the date translated based on the language. This function will receive the current date as a variable and should return a string. this will refer to the calendar object.

Array weekend (Optional - Default: Null) vs. 1.1.0 Full+Lite

An array of integers for the weekend days (0 for Sun, 6 for Sat)

Boolean allow_weekend_selection (Optional - Default: false) vs. 1.1.0 Full+Lite

Allow the user to select an weekend date

Function weekend_formatter (date) (Optional - Default: (see description)) vs. 1.1.0 FULL ONLY

Function that will return the weekend dates text. The default function will return the date translated based on the language. This function will receive the current date as a variable and should return a string. this will refer to the calendar object.

Array force_selections (Optional - Default: Null) vs. 1.1.0 Full+Lite

An array of dates that will allow the user to select them regardless of their status.

Object date_on_avaliable (Optional - Default: Null) vs. 1.1.0 FULL ONLY

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 id will be passed as an argument.

String days_text (Optional - Default: mid) vs. 1.1.0 Full+Lite

A string to select the length of the days text on top of the calendar. Can be either 'char', 'short', 'mid', or 'long'

String months_text (Optional - Default: long) vs. 1.1.0 Full+Lite

A string to select the length of the months text on top of the calendar. Can be either 'short' or 'long'

String right_arrow_img (Optional - Default: (see description)) vs. 1.1.0 Full+Lite

The path to the right arrow image. Default is ng_config.assets_dir+'components/calendar/images/right_arrow.gif'

String right_arrow_img_disabled (Optional - Default: (see description)) vs. 1.1.0 Full+Lite

The path to the right arrow image disabled. Default is ng_config.assets_dir+'components/calendar/images/right_arrow_dis.gif'

String left_arrow_img (Optional - Default: (see description)) vs. 1.1.0 Full+Lite

The path to the left arrow image. Default is ng_config.assets_dir+'components/calendar/images/left_arrow.gif'

String left_arrow_img_disabled (Optional - Default: (see description)) vs. 1.1.0 Full+Lite

The path to the left arrow image disabled. Default is ng_config.assets_dir+'components/calendar/images/left_arrow_dis.gif'

String calendar_img (Optional - Default: (see description)) vs. 1.1.0 Full+Lite

The path to the calendar image. Default is ng_config.assets_dir+'components/calendar/images/calendar.gif'

String calendar_img_disabled (Optional - Default: (see description)) vs. 1.1.0 Full+Lite

The path to the calendar image disabled. Default is ng_config.assets_dir+'components/calendar/images/calendar_dis.gif'

String header_format (Optional - Default: F Y) vs. 1.1.0 Full+Lite

The calendar header date display (default is [Month] [Year]). See ng.Date.printfor formatting options. This 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.

Boolean close_on_select (Optional - Default: true (false when multi_selection=true))vs. 1.1.0 Full+Lite

Choose to close the calendar when the user select a date.

Date selected_date (Optional - Default: Null) vs. 1.1.0 Full+Lite

A date or an array of dates to select when the calendar is created. The calendar will take the input field value if this is null.

Date display_date (Optional - Default: null) vs. 1.1.0 Full+Lite

The date on which the calendar will first load when created. When null, this will be the same as the start_date. If this is a string or an object, it will be relative to the start_date.

Boolean hide_clear_button (Optional - Default: false) vs. 1.1.0 Full+Lite

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.

Boolean hide_view_all_dates_button (Optional - Default: false) vs. 1.1.0 Full+Lite

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.

Methods

More Examples vs. 1.1.3 Full+Lite

This document includes additional examples for the calendar component and its different uses.

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.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_day_off (date) vs. 1.1.0 FULL ONLY

Checks if the day is an off day.

Function ng.Calendar.is_weekend (date) vs. 1.1.0 Full+Lite

Checks if the date is a weekend.

Function ng.Calendar.is_range_off (date) vs. 1.1.0 FULL ONLY

Check if the date falls within a range off date.

Function ng.Calendar.is_selected (date) vs. 1.1.0 Full+Lite

Checks if the date is selected.

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.

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_out_of_range_formatter (out_of_range_formatter) vs. 1.1.0 FULL ONLY

Sets the out of range formatter function.

Function ng.Calendar.get_out_of_range_formatter () vs. 1.1.0 FULL ONLY

Gets the out of range formatter.

Function ng.Calendar.set_other_month_formatter (other_month_formatter) vs. 1.1.0 FULL ONLY

Sets the other month dates formatter function.

Function ng.Calendar.get_other_month_formatter () vs. 1.1.0 FULL ONLY

Gets the other month dates formatter.

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_date_on_avaliable (obj) vs. 1.1.0 FULL ONLY

Sets the date on available object.

Function ng.Calendar.get_date_on_avaliable () vs. 1.1.0 FULL ONLY

Gets the date on avaliable object.

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_dates_off_formatter (formatter) vs. 1.1.0 FULL ONLY

Sets the dates off formatter function.

Function ng.Calendar.set_days_off (days_off) vs. 1.1.0 FULL ONLY

Sets the days off array.

Function ng.Calendar.get_days_off () vs. 1.1.0 FULL ONLY

Gets the days off array.

Function ng.Calendar.set_allow_days_off_selection (allow) vs. 1.1.0 FULL ONLY

Sets the allow days off selection option.

Function ng.Calendar.get_allow_days_off_selection () vs. 1.1.0 FULL ONLY

Gets the allow days off selection option.

Function ng.Calendar.set_days_off_formatter (formatter) vs. 1.1.0 FULL ONLY

Sets the days off formatter function.

Function ng.Calendar.set_range_off (range_off) vs. 1.1.0 FULL ONLY

Sets the range off array.

Function ng.Calendar.get_range_off () vs. 1.1.0 FULL ONLY

Gets the range off array.

Function ng.Calendar.set_allow_range_off_selection (allow) vs. 1.1.0 FULL ONLY

Sets the allow range off selection option.

Function ng.Calendar.get_allow_range_off_selection () vs. 1.1.0 FULL ONLY

Gets the allow range off selection option.

Function ng.Calendar.set_range_off_formatter (formatter) vs. 1.1.0 FULL ONLY

Sets the range off formatter function.

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_weekend_formatter (formatter) vs. 1.1.0 FULL ONLY

Sets the weekend formatter function.

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.

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.

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.

JS Tutorial