To init the component you need to perform a simple procedure - call initialization code.
Initialization code or an object constructor lets you create an object by using common declaration.
dhx.ui ({view:"calendar",
...})
In constructor you can specify the following parameters:
date - (date) a Date() object that specifies the initial date of the calendar (particularly month).
startOnMonday - (boolean) defines whether or not calendar must be started from monday. The default value is 'true'. The value 'false' sets representation from Sunday.
navigation - (boolean) defines whether or not calendar will have month navigation (the possibility to change months). The default value is 'true'.
weekHeader - (boolean) defines whether or not calendar will have header with the days' names. The default value is 'false'.
weekNumber - (boolean) defines whether or not calendar will have left column with the weeks' numbers. The default value is 'false'.
skipEmptyWeeks - (boolean) defines whether 6 weeks (42 days) must be displayed all the time or weeks which completely belong to the next month should be skipped. The default value is 'true'.
calendarDateFormat - (string) specifies date format of the calendar.
calendarMonthHeader - (string) sets the format of the month header.
calendarDayHeader - (string) sets the format of the days representation.
calendarWeek - (string) sets the format of the weeks representation (have sense just if the weekNumber parameter is true).
cellHeight - (integer) the height of the cell with day
cellAutoHeight - (boolean) if it's set to 'true', cellHeight will be ignored and height will be set subject to content. If it's set to 'false' and cell_height is not specified - the default value will be applied.
width - (integer) the width of the calendar
height - (integer) the height of the calendar
Please note, calendar is a derived class, i.e. it inherits all the features of the base class (calendar → View).
dhx.ui({
view:"window",
body:{
view:"calendar", date: new Date(2010, 0, 1), weekHeader: true, calendar_date_format: "%Y-%m-%d", weekNumber: true
},
head:{
view:"toolbar", type:"MainBar", data:[
{type:"label", label: "Calendar", align:'left'},
{ type:'button', label: 'Close', align: 'right'}
]
},
top:150,
left:300
});