DHTMLX Touch documentation

Calendar

Calendar is a component that presents a normal calendar. UI-related calendar inherites 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 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).
  • 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
		});

Related how-tos