You can control the start day of a week through the setWeekStartDay (see the details).
A week can start from any day:
// week starts from Monday myCalendar.setWeekStartDay(1); // week starts from Sunday myCalendar.setWeekStartDay(7);
To show the column with week numbers you need to call the showWeekNumbers() method. The method takes no parameters and adds the week number column to the calendar:
var myCalendar = new dhtmlXCalendarObject("calendarHere"); myCalendar.showWeekNumbers();
To hide the week number column, use the hideWeekNumbers() method.
To show a calendar, use the show() method:
// to show calendar myCalendar.show();
If there are several inputs with calendars attached to them, you can show a particular calendar, by passing the id of the related input to the show() method:
<input type="text" id="cal_2"> myCalendar.show("cal_2");
To hide a calendar, use the hide() method:
// to hide calendar myCalendar.hide();
You can define whether or not calendar will show the time panel (by default, the time panel is shown):
// to hide panel myCalendar.hideTime(); // to show panel myCalendar.showTime();
To set/get the currently selected date you should use one of two respective methods:
// to set date myCalendar.setDate(date); // date object or string in specified date format // to get date // will return date object var curDateObj = myCalendar.getDate(); // will return date as string according to current date format var curDateStr = myCalendar.getDate(true);
You have a possibility to set holidays in calendar. The way holidays are rendered in calendar is determined by the CSS file. To set a date as holiday you should use the setHolidays() method (see details).
myCalendar.setHolidays("2011-09-25"); // sets September 25, 2011 as holiday
//all dates starting from June 08,2011 will be dimmed.Dates until June 08,2011 will be active. myCalendar.setInsensitiveRange("2011-06-08", null); //all dates starting from June 08,2011 will be active.Dates until July 08,2011 will be dimmed. myCalendar.setSensitiveRange("2011-06-08", null); //June 10,2011, June 17,2011, June 18,2011 will be dimmed.All other dates will be active. myCalendar.setInsensitiveDays(["2011-06-10", new Date(2011,5,17), "2011-06-18"]); //Mondays,Tuesdays and Thursdays of each week in the calendar will be dimmed myCalendar.disableDays("week", [1,2,4]);
If a date is set as a string, it should correspond to the format specified with the setDateFormat() method.
When a calendar is initialized as an individual object, you can change a container it's placed into by using the method setParent() (see details):
When calendar is initialized as a date input field you can set the position pop-up calendar will appear from. For this purpose you should use the setPosition() method (see details):
myCalendar.setPosition("right"); // "bottom" by default
You can show Today and Clear buttons on the calendar next to the time.
By clicking the Today button, the calendar sets selection on the current day. A click on the Clear button will clear the selection of date.
By default, the Today and Clear buttons are hidden. To show them, you need to use the showToday method:
To hide the buttons, use the hideToday method.Back to top