The user can set one of the predefined skins for dhtmlxCalendar in the following way:

    <script>
        mCal.setSkin(skin);
    </script>

Note: to set the default skin, the user should write an empty string as the parameter for setSkin() method.

The following skins are available for this component:

• SilverLight (the default one)

• yahoolike

• simplegrey

• simpleblue

• vista

• simplecolordark

• simplecolorsand

• classic

• dhx_blue

• dhx_black

The calendar supports date formatting in the following ways:

• Default date format;
• Specified date format;
• Specified date format for a certain date.

The default date format in dhtmlxCalendar is the following: %Y-%m-%d.

A special date format for the whole Calendar can be easily set with the help of setDateFormat() method:

  <script>
      mCal.setDateFormat(format_str);
  </script>

This method takes only one parameter - format_str - that can include any of the following options:

• %e [g-] - Day of the month without leading zeros (1..31);
• %d [gs] - Day of the month containing 2 digits with leading zeros (01..31);
• %j [g-] - Day of the year containing 3 digits with leading zeros (001..366);
• %a [g-] - A textual representation of the day of the week containing two letters (Mo…Su);
• %W [g-] - A full textual representation of the day of the week;
• %c [g-] - Numeric representation of the month without leading zeros (1..12);
• %m [gs] - Numeric representation of the month with leading zeros (01..12);
• %b [gs] - A short textual representation of the month containing 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 containing 4 digits (1993..2003);
• %% [gs] - The char ”%” included in the date format.

So, if the user chooses a date format (different from the default one) that will show days of the month with leading zeros, months with leading zeros, and a full numeric representation of a year, all separated by full stops (.), he should write the following code line:

  <script>
      mCal.setDateFormat("%d.%m.%Y");
  </script>

When the user wants to set a specified format (different from the defult date format and from the one set in setDateFormat() method) for a certain date in the Calendar, method setFormatedDate() should be used with the following parameters:

• format_str - the format set for the specified date;
• date - the specified date.

  <script>
      var mCal = new dhtmlxCalendarObject("objId",true);
      ...
      mCal.setFormatedDate(format_str,date);   
  </script>

The date in the specified format can be easily got with the help of getFormatedDate() method:

  <script>
      mCal.getFormatedDate(format_str, date);
  </script>

There are the following parameters in the above mentioned method:

• format_str - sets the format for the date the user wants to get;
• date - the specified date. If this parameter is omitted, the method returns the currently selected date of the Calendar.

To set a date that will be highlighted as the current one in a simple calendar, the user should use setDate() method and indicate the date as its parameter. The date should be indicated either in the default date format, or in the format that was indicated in setDateFormat() method:

          mCal.setDate(date);   
 

There is a simple way of getting currently selected date in the Calendar:

       var date = mCal.getDate() // returns currently selected date in the Calendar
 

There are two ways of setting a date range in dhtmlxCalendar:

• In a double Calendar;
• In a simple Calendar.

Please, refer to the Double Calendar section for information about setDate() method.

A different (from a Double Calendar) date range can be set for a simple Calendar using setSensitive() method in the following way:

    <script>
        mCal.setSensitive(dateFrom, dateTo);
    </script>
 

This method allocates a period in which the user can select dates. Its parameters are:

• dateFrom - minimal allowed date;
• dateTo - maximal allowed date.

When the calendar is created, the only active date range is the one specified in setSensitive() method. Other dates, outside the specified range, are rendered inactive.

There is also the possibility to write several dates as the first parameter and omit the second parameter of setSensitive() method. In this case, end-users will be able to select only the specified dates:

    <script>
        mCal. setSensitive([array of dates] or comma separated string list); 
    </script>
 

For example:

    <script>
        mCal.setSensitive('2008.20.09,09.30,2008.09.21,2008.09.22');
    </script>
 

There is also the possibility to set a year range with setYearsRange() method:

    <script>
        mDCal.setYearsRange(1980, 2020);
    </script>
 

The parameters include:

• minYear- the first year in the range;
• maxYear - the last year in the range.

dhtmlxCalendar allows its users to add and use different languages with the ability to switch between them dynamically. First, the user needs to define necessary language settings with script (if no language pack is provided with the calendar package). This can be done in the following way:

    <script>
        dhtmlxCalendarLangModules = new Array();//create array if it doesn't exist  
            //define settings for the new language (Russian)
        dhtmlxCalendarLangModules['ru'] = {
            langname: 'ru', // id of the new language
            dateformat: '%d.%m.%Y', // date format
            monthesFNames: ["ßíâàðü", "Ôåâðàëü", "Ìàðò", "Àïðåëü", "Ìàé", "Èþíü", "Èþëü", "Àâãóñò", "Ñåíòÿáðü", "Îêòÿáðü", "Íîÿáðü", "Äåêàáðü"], 
// full names of months
            monthesSNames: ["ßíâ", "Ôåâ", "Ìàð", "Àïð", "Ìàé", "Èþí", "Èþë", "Àâã", "Ñåí", "Îêò", "Íîÿ", "Äåê"], 
// short names of months
            daysFNames: ["Âîñêðåñåíüå", "Ïîíåäåëüíèê", "Âòîðíèê", "Ñðåäà", "×åòâåðã", "Ïÿòíèöà", "Ñóááîòà"], 
// full names of days
            daysSNames: ["Âñ", "Ïí", "Âò", "Ñð", "×ò", "Ïò", "Ñá"], // short names of days
            weekend: [0, 6], // weekend days
            weekstart: 1, // week start day
            msgClose: "Çàêðûòü", // close button tooltip
            msgMinimize: "Ñâåðíóòü", // minimize button tooltip
            msgToday: "Ñåãîäíÿ" // today button tooltip
        }
            //define settings for the new language (German)
        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"
        }
    </script>
 

When you have necessary language settings, you can switch between them using loadUserLanguage() method indicating the id of the language you used for its definition:

    <script>
        mCal.loadUserLanguage("ru");
    </script>
 

The user can control the start day of the week easily using weekstart property like this:

    <script>
        mCal.options.weekstart=1;//week starts from Monday
            //or
        mCal.options.weekstart=0; //week starts from Sunday
    </script>
 

The starting day of the week can also be defined in overal language settings:

        //sets Sunday and Saturday as weekend. the week starts with Monday
    {
         ...
       weekend: [0, 6], // weekend days
       weekstart: 1, // week start day
    } 
 

The Calendar can be easily shown/hidden in the following way:

    <script>
        mCal.show();  
        mCal.hide();
            // or
        mCal.close();
    </script>
 

There is a simple way to check whether the Calendar is visible. If the method returns true, the Calendar is visible, and vice versa:

    <script>
        var isVisible = mCal.isVisible(); // returns true|false
    </script>
 

There is an option in dhtmlxCalendar that allows the user to set holidays in the Calendar. The dates should be set in one of the following formats:

• %m.%d or %m-%d - in this case the holiday will be set for the indicated date every year in the Calendar;
• %Y-%m-%d or %Y.%m.%d - this date format means that the holiday will be set only for the specified date without repetition every year.

The way holidays are rendered in the Calendar is determined by the CSS file. setHolidays() method is responsible for setting holidays in dhtmlxCalendar:

    <script>
        mCal.setHolidays([array of dates] or comma separated string list); // several dates can be set separated by commas (,)
    </script>
 

So, if the user wants to set the following dates as holidays: September 24, 2008 and May 8 of every year, he should write the following line of code:

    <script>
        mCal.setHolidays(['2008-09-25', '05.08']);
    </script>
 

setInsesitiveDates() method sets dates that are going to be insensitive/inactive in the Calendar. The dates should be set in one of the following formats:

• %m.%d or %m-%d - in this case the inactive date will be set for the indicated date every year in the Calendar;
• %Y-%m-%d or %Y.%m.%d - this date format means that the inactive date will be set only for the specified date without repetition every year.

    <script>
        mCal.setInsensitiveDates([array of dates] or comma separated string list);
    </script>
 

There is also the possibility to set inactive week days, indicating the number of the week day in question. The number of week days start with 0: Sunday - 0, Saturday - 6, etc. For example:

    <script>
        mCal.setInsensitiveDates("6,0,10-24,2008-12-01");
    </script>
 

After this code line each Saturday, Sunday, 24th October, and 1st December 2008 will be inactive in the calendar.

Method setParent() allows the user to indicate a new parent object/container for the Calendar:

    <script>
        mCal.setParent(parentObj);
    </script>
 

There is the possibility to set Calendar's new position with the help of setPosition() method. If the first parameter is not an object, the user should use the following code string:

    <script>
        mCal.setPosition(argA,argB);
    </script>
 

As for this method's parameters, they are as follows:

• argA - indicates position of the Calendar by y axis;
• argB - indicates position of the Calendar by x axis.

For example:

    <script>
        mCal.setPosition(100, 50);
    </script>
 

If the first parameter is an object, Calendar's new coordinates will be the following:

• y - position of the htmlObj by y axis + 100;
• x - position of the htmlObj by x axis + htmlObj's width +50.

And the code in this case will be as follows:

    <script>
        mCal.setPosition(argA,argB,argC);
    </script>
 

The parameters here are as follows:

• argA - is the object;
• argB - is increment by y;
• argC - is increment by x.

For example:

    <script>
        mCal.setPosition(htmlObj,100, 50);
    </script>