To init the component you need to perform a simple procedure - call initialization code.
Initialization code or an object constructor lets you create 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).
start_on_monday - (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'.
week_header - (boolean) defines whether or not calendar will have header with the days' names. The default value is 'false'.
week_number - (boolean) defines whether or not calendar will have left column with the weeks' numbers. The default value is 'false'.
skip_empty_weeks - (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'.
calendar_date_format - (string) specifies date format of the calendar.
calendar_month_header - (string) sets the format of the month header.
calendar_day_header - (string) sets the format of the days representation.
calendar_week - (string) sets the format of the weeks representation (have sense just if the week_number parameter is true).
cell_height - (integer) the height of the cell with day
cell_auto_height - (boolean) if it's set to 'true', cell_height 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.
move - (boolean) specifies whether a calendar can be moved. The default value is false.
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), week_header: true, calendar_date_format: "%Y-%m-%d", week_number: true
},
head:{
view:"toolbar", type:"MainBar", data:[
{type:"label", label: "Calendar", align:'left'},
{ type:'button', label: 'Close', align: 'right'}
]
},
top:150,
left:300,
move:true
});