Calendar

Calendar is a component that presents a normal calendar. UI-related calendar inherits from view.


Full code of the example in the picture

Initialization

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",
...})

Parameters

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
});

Related how-tos