Calendar can be initialized in next ways

1. Short declaration

<script> var mCal = new dhtmlxCalendarObject('dhtmlxCalendar_obj',true); </script>
• dhtmlxCalendar_obj - id of object inside which calendar will be created
• true - force immediately rendering of calendar



2. Full declaration
<script> mCal = new dhtmlxCalendarObject('dhtmlxCalendar', false, {isYearEditable: true}); mCal.loadUserLanguage('en-us'); mCal.draw(); </script> Third parameter of constructor allows set different options of calendar.
• isYearEditable - allow directly input of year from keyboard
• btnPrev - html used for render prev button
• btnBgPrev - background of prev button
• btnNext - html used for render prev button
• btnBgNext - background of next button
• yearsRange - selectable years( array [from,to])
• isMonthEditable - allow directly input of year from keyboard
• isWinHeader - render header with buttons
• headerButtons - allowed header buttons
• isWinDrag - allowed drag of calendar



3. Creating calendar linked to input
<script> cal1 = new dhtmlxCalendarObject('calInput1'); </script> <input type="text" id="calInput1" class="css1" readonly="true"> If container object points to INPUT tag, instead of rendering calendar in it, it will be automatically attached to target input - it will appear on input select and set selected date as value of input on date selection.

Calendar supports rich date formatting It can be used in two ways.

1. Set specified format for all operations

<script> var mCal = new dhtmlxCalendarObject('dhtmlxCalendar_obj',true); mcal.setDateFormat(format_str); </script> format_str can include any of next options

		%e [g-] Day of the month without leading zeros (1..31)
		%d [gs] Day of the month, 2 digits with leading zeros (01..31)
		%j [g-] Day of the year, 3 digits with leading zeros (001..366)
		%a [g-] A textual representation of a day, three letters
		%W [g-] A full textual representation of the day of the week
		%c [g-] Numeric representation of a month, without leading zeros (1..12)
		%m [gs] Numeric representation of a month, with leading zeros (01..12)
		%b [gs] A short textual representation of a month, three letters (Jan..Dec)
		%M [gs] A full textual representation of a month, such as January or March (January..December)
		%y [g-] A two digit representation of a year (93..03)
		%Y [gs] A full numeric representation of a year, 4 digits (1993..2003)
		%% [gs] Char "%"
			

2. Use format only in single get/set operation
<script> var mCal = new dhtmlxCalendarObject('dhtmlxCalendar_obj',true); ... mcal.setFormatedDate(format_str,date); mcal.getFormatedDate(format_str); </script>

For selecting of date range double calendar can be used

<script> var mDCal = new dhtmlxDblCalendarObject('dhtmlxDblCalendar', true); mDCal.setDateFormat("%d/%m/%Y"); mDCal.setDate("10/01/2008","10/02/2008"); </script>
• dhtmlxDblCalendar - id of object inside which calendar will be created
• true - force immediately rendering of calendar


Slightly different range ability can be created in standard calendar with usage of setSensitive <script> mCal = new dhtmlxCalendarObject('dhtmlxCalendar', false); mCal.setSensitive(dateFrom, dateTo); mCal.draw(); </script> Third parameter of constructor allows set different options of calendar.
• dateFrom - minimal allowed date
• dateTo - maximal allowed date

To add and use different languages in calendar with the ability to switch between them dynamically you need first to define necessary language settings with script (if no language pack provided with calendar package). Do it this way: dhtmlxCalendarLangModules = new Array();//create array if it doesn't exist //define settings for the new language dhtmlxCalendarLangModules['ru'] = { langname: 'ru', dateformat: '%d.%m.%Y', monthesFNames: ["Январь", "Февраль", "Март", "Апрель", "Май", "Июнь", "Июль", "Август", "Сентябрь", "Октябрь", "Ноябрь", "Декабрь"], monthesSNames: ["Янв", "Фев", "Мар", "Апр", "Май", "Июн", "Июл", "Авг", "Сен", "Окт", "Ноя", "Дек"], daysFNames: ["Воскресенье", "Понедельник", "Вторник", "Среда", "Четверг", "Пятница", "Суббота"], daysSNames: ["Вс", "Пн", "Вт", "Ср", "Чт", "Пт", "Сб"], weekend: [0, 6], weekstart: 1, msgClose: "Закрыть", msgMinimize: "Свернуть", msgToday: "Сегодня" } //define settings for the new language dhtmlxCalendarLangModules['de'] = { langname: 'de', dateformat: '%d.%m.%Y', monthesFNames: ["Januar", "Februar", "Mдrz", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"], monthesSNames: ["Jan", "Feb", "Mдr", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dez"], daysFNames: ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"], daysSNames: ["So", "Mn", "Dn", "Mt", "Dn", "Fr", "Sa"], weekend: [0, 6], weekstart: 1, msgClose: "SchlieЯen", msgMinimize: "Drehen", msgToday: "Heute" }

When you have necessary languages you can switch between them using loadUserLanguage method and code of the language you used for its definition.

v.1.0 of dhtmlxCalendar has one event - onclick. You can set event handler using the way common for all dhtmlx components: yourCalendar.attachEvent("onclick",function(date){ alert("Date set to "+date) })