Your Ad Here


The NoGray Calendar Component:

This file contains a few examples to help you start using the calendar component, for the latest version please visit The NoGray.com Requirements:
The NoGray Calendar requires an XHTML doctype, which means your <html> tag should look like 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">


Create It

To create a calendar, you'll need to call the calendar class with two elements and a set of options. Example: 
HTML:
<input type="text" id="date3" name="date3">
<a href="#" id="cal3_toggler">Open Calendar</a>
<div id="calendar3"></div>
...
later
...
Script:
var calender3 = new Calendar("calendar3", "cal3_toggler", {inputField:'date3',
                                                                                       numMonths:3,
                                                                                       multiSelection:true,
                                                                                       maxSelection:5,
                                                                                       forceSelections:[
                                                                                             {date:'last Saturday'}
                                                                                       ],
                                                                                       dateFormat:'D, d M Y ::  ',
                                                                                       idPrefix:'cal3'});

Try It:

Simple Calendar with a text field input:
Open Calendar



Four months calendar with events handling and select drop downs fields:
Open Calendar

The 14th of this month will have a blue background and when you click on the 16th an alert will display the date of the 16th


Multi date selection with a textarea (text or select drop downs can be used):
Select up to 5 dates - US Holidays:
Open Calendar



Different Languages (visible Calendars - using Google translation):
German | Deutsch Spanish | Español Chinese | 中文
Japanese | 日本語 Arabic | العربية


Configurations:

You can customized the look and feel of the calendar component by changing the nogray_calendar_vs1.css file or adding your own custom classes. Each calendar can have a class and id prefix which make it easier to have more than one calendar in the same page.

Options objects are a key: value object with the following syntax 
{option: value,
option: {option: value,
		option: value},
option: [value1, value2]}


Date objects for the calendar can be one of the following
String: a date in a string format or special value (check nogray_date.js)
Object: an object that include the date values (check nogray_date.js)
JavaScript Date
Number: JavaScript time value (number of milliseconds since 1970)

Events objects for the calendar are objects where the key is the event (without the on) and the value is the function to execute.
for example an onclick event will be something like this
{click:function(){
	...
	do something
	...
	}
)
Skinning:

The Calendar Component use CSS to skin the different parts of the calendar. The gray border around the calendar is the style for the holding element (div in this case). The following images illustrate the different parts with their class names, ids and HTML values.
NoGray Calendar Outer Parts
NoGray Calendar Inner Parts

Options
Option Description Default Value
visible Indicates weather the calendar will be visible when loaded or not false
Example: 
var cal = new Calendar('holdingElement', 'toggeler', {visible:false});
offset The calendar by default will show at the lower left corner of the input field. offset allows for moving the offsetting the calendar position {x:0, y:0}
Example: 
var cal = new Calendar('holdingElement', 'toggeler', {offset:{x:50, y:50}});
dateFormat The format of the date output (for text field).
check nogray_date.js for details
check http://us3.php.net/manual/en/function.date.php for formatting details		 D, d M Y
Example: 
var cal = new Calendar('holdingElement', 'toggeler', {dateFormat:"Y-m-d"});
numMonths The number of months per calendar.
Warnings: Firefox is slow when handling date objects. If using datesoff or forcedSelection try to use 1 month per calendar		 1
Example: 
var cal = new Calendar('holdingElement', 'toggeler', {numMonths:4});
classPrefix The CSS class prefix, check the skinning section for instructions ng-
Example: 
var cal = new Calendar('holdingElement', 'toggeler', {classPrefix:'new_calendar'});
idPrefix The id prefix for the dates, use this if using more than one calendar. ng-
Example: 
var cal = new Calendar('holdingElement', 'toggeler', {idPrefix:'cal_1'});
startDay The first day of the week. 0 for Sunday, 1 for Monday ... 6 for Saturday 0
Example: 
var cal = new Calendar('holdingElement', 'toggeler', {startDay:1});
startDate The first selectable date, use a date object today
Example: 
var cal = new Calendar('holdingElement', 'toggeler', {startDate:new Date(2007,0,1)});
endDate The last selectable date, use a date object year+10
Example: 
var cal = new Calendar('holdingElement', 'toggeler', {endDate:new Date(2017,0,1)});
inputType The type of input fields. It can be one of the following values:
  • text (for text of textarea fields)
  • select (for drop down select menus)
  • none (no input field)
 text
Example: 
var cal = new Calendar('holdingElement', 'toggeler', {inputType:'select'});
inputField The input field to be used. If the inputType is text it can be either an HTML input object or the object ID. If the inputType is select it must be an object with the date, month and year HTML object null
Example: 
HTML:
	<input type="text" name="date" id="date" />
...
later
...
Script:
	var cal = new Calendar('holdingElement', 'toggeler', {inputField:'date'});

HTML:
	<select name="date" id="date"></select>
	<select name="month" id="month"></select>
	<select name="year" id="year"></select>
...
later
...
Script:
	var cal = new Calendar('holdingElement', 'toggeler', {inputField:{date:'date',
					month:'month',
					year:'year'}});
allowSelection Allows the user to select a date true
Example: 
var cal = new Calendar('holdingElement', 'toggeler', {allowSelection:false});
multiSelection Allows the user to select more than one date false
Example: 
var cal = new Calendar('holdingElement', 'toggeler', {multiSelection:true});
maxSelection The maximum number of dates the user can select if multiSelection is true. If 0, unlimited number of dates is selectable. 0
Example: 
var cal = new Calendar('holdingElement', 'toggeler', {maxSelection:3});
selectedDate The initially selected date, use a date object null
Example: 
var cal = new Calendar('holdingElement', 'toggeler', {selectedDate:'today'});
datesOff An array of date objects for the holidays. Holidays are unselectable unless allowDatesOffSelection is true. []
Example: 
var cal = new Calendar('holdingElement', 'toggeler', {datesOff:{date:25, month:11}});
allowDatesOffSelection Allows the user to select the dates off. false
Example: 
var cal = new Calendar('holdingElement', 'toggeler', {allowDatesOffSelection:true});
daysOff An array of numbers (0 for Sunday, 1 for Monday ... 6 for Saturday) for the days off in the week (beside weekends). daysOff are unselectable unless allowDaysOffSelection is true. []
Example: 
var cal = new Calendar('holdingElement', 'toggeler', {daysOff:[4]});
allowDaysOffSelection Allows the user to select the days off. false
Example: 
var cal = new Calendar('holdingElement', 'toggeler', {allowDaysOffSelection:true});
weekend An array of numbers (0 for Sunday, 1 for Monday ... 6 for Saturday) for the weekend. Weekend are unselectable unless allowWeekendSelection is true. []
Example: 
var cal = new Calendar('holdingElement', 'toggeler', {weekend:[4,5]});
allowWeekendSelection Allows the user to select the weekend. false
Example: 
var cal = new Calendar('holdingElement', 'toggeler', {allowDaysOffSelection:true});
forceSelections an Array of date objects that are forced to be selectable regardless where they fall (e.g. if the user can select the last Saturday of the month but not other weekend days) []
Example: 
var cal = new Calendar('holdingElement', 'toggeler', {forceSelections:[{date:'last Saturday'}, 'today']});
formatter A function that will return the HTML for the table cell and takes the Date as an argument. Default return is the date’s getDate() value. function (date){
     return date.getDate();
}
Example: 
var cal = new Calendar('holdingElement', 'toggeler', {
     formatter: function(date){
          if (date.getDate() == 25) return "It's the 25th";
          else return date.getDate();
     }
});
outOfRangeFormatter Same as formatter but for out of range dates ~~~~~~
weekendFormatter Same as formatter but for the weekend dates ~~~~~~
daysOffFormatter Same as formatter but for days off dates ~~~~~~
datesOffFormatter Same as formatter but for dates off dates (holidays) ~~~~~~
selectedDateFormatter Same as formatter but for the selected date ~~~~~~
language a language object (check nogray_date.js for details). Used for translation. null (for English)
daysText The days format to be used on the calendar. The key for the language.days object. mid
monthsText The months format to be used on the calendar. The key for the language.months object. long
preTdHTML The HTML for the previous months arrow &laquo;
preTdHTMLOff The HTML for the previous months arrow when the calendar at the first month. &nbsp;
nexTdHTML The HTML for the next months arrow &raquo;
nexTdHTMLOff The HTML for the next months arrow when the calendar at the last month. &nbsp;
closeLinkHTML The HTML for the close link. Close
clearLinkHTML The HTML for the clear link (only visible when multiSelection is true). Clear
calEvents an Events object for all the selectable table cell.
Arguments passed to the function:
  • this: the calendar object.
  • td: the table cell (TD) HTML object.
  • date_str: the date in a string format.
 mouseover: add a mouse-over class to the table cell
mouseleave: remove the mouse-over class from the table cell
tdEvents An array of Events objects to attach events to a specific table cells. The array key must be the date in the following format month-date-year (8 for August)
Arguments passed to the function:
  • this: the calendar object.
  • td: the table cell (TD) HTML object.
  • date_str: the date in a string format.
 []
Example: 
var events_arr = [];
events_arr['8-15-2007'] = {click: function(td, date_str){
          alert(td.innerHTML+" "+new Date().fromString(date_str));
     }
};
var cal = new Calendar('holdingElement', 'toggeler', {
     tdEvents: events_arr
});
dateOnAvailable An array of functions to run when a specific date is rendered. The array key must be the date in the following format month-date-year (8 for August)
Arguments passed to the function:
  • this: the calendar object.
  • td: the table cell (TD) HTML object.
  • date_str: the date in a string format.
 []
Example: 
var dates_func_arr = [];
dates_func_arr['8-15-2007'] = function(td, date_str){td.setHTML(date_str);}
var cal = new Calendar('holdingElement', 'toggeler', {
     dateOnAvailable: dates_func_arr
});
speedFireFox Option to speed the calendar creation in Firefox, since firefox is slow when handling date objects, this option will illuminate the datesOff (holidays) daysOff and forcedSelection for better performance. false
closeOpenCalendars Close all the open calendars when the calendar opens true


Events
Event When Fired
onSelect When a date is selected.
onUnSelect When a date is unselected.
onCalendarLoad When the calendar is completely rendered.
onOpen When the calendar is opened.
onClose When the calendar is closed.
onClear When the calendar is cleared.


Your Ad Here