Advanced: changing scheduler's structure

The mobile scheduler has a multiview-based architecture supplemented with the bottom toolbar. Details see in the related DHTMLX Touch documentation 'Building app architecture'.

Please remember, you can customize just the scheduler's toolbars. It can be either the main bottom toolbar or toolbars of the multiview's views.

So, in this article we will concentrate your attention on toolbars. Below, you can find all the available toolbars and their default definitions.

The detail information about the toolbar you can find in the DHTMLX Touch documentation - 'Toolbar component'.

Related sample: samples/07_mobile/06_custom_form.html

Multiview

Multiview contains 5 views:

  • List (don't contain any toolbars)
  • Day
  • Month
  • Event preview screen
  • Details form

Day and Month views

In the “Day” and “Month” views, the toolbar contains navigation buttons and a label with the selected date.

scheduler.config.day_toolbar = [
	{view:'label',id:"prev",align:"left",label:"<div class='dhx_cal_prev_button'><div></div></div>"},
	{view:'label',id:"date",align:"center",width:200},
	{view:'label',id:"next",align:"right",label:"<div class='dhx_cal_next_button'><div></div></div>"}
];

Event preview screen

Here, the toolbar contains 2 buttons: “Back” and “Edit” (hidden in read-only mode).

scheduler.config.selected_toolbar = [
	{view:'button', inputWidth:scheduler.xy.icon_back, type:"prev", id:"back",align:"left",label:scheduler.locale.labels.icon_back},
	{view:'button', inputWidth:scheduler.xy.icon_edit, id:"edit",align:"right",label:scheduler.locale.labels.icon_edit}
];

Details form

The toolbar of the details form has 2 buttons: “Cancel” and “Save”.

scheduler.config.form_toolbar = [
	{view:'button', inputWidth:scheduler.xy.icon_cancel, id:"cancel",css:"cancel",align:"left",label:scheduler.locale.labels.icon_cancel},
	{view:'button', inputWidth:scheduler.xy.icon_save, id:"save",align:"right",label:scheduler.locale.labels.icon_save}
];

Main bottom toolbar

Main scheduler toolbar contains 3 controls:

  • “Today” button
  • tabbar with the “List”, “Day” and “Month” tabs
  • “Add” button
scheduler.config.bottom_toolbar = [
		{ view:"button",id:"today",label:scheduler.locale.labels.icon_today,inputWidth:scheduler.xy.icon_today, align:"left",width:scheduler.xy.icon_today+6},
		{ view:"segmented", id:"buttons",selected:"schEvents",align:"center",multiview:true, options:[
		{ value:"schEvents", label:scheduler.locale.labels.list_tab,width:scheduler.xy.list_tab},
		{ value:"schDayEvents", label:scheduler.locale.labels.day_tab,width:scheduler.xy.day_tab},
  	    { value:"monthEvents", label:scheduler.locale.labels.month_tab,width:scheduler.xy.month_tab}
	]},
	{ view:"button",css:"add",id:"add", align:"right",label:"",inputWidth:42,width:50},
	{ view:"label", label:"",inputWidth:42,width:50, batch:"readonly"}
];

Adding new elements to the toolbar and event handling

If you want to add some custom button to one of the mentioned toolbars, you need to redefine the structure of that toolbar.
Clicks on the default buttons are handled automatically. But for new buttons you should define “click” event handlers.

Let's assume you want to add a new button - 'Location'.

The definition of your new toolbar can be the following:

scheduler.config.selected_toolbar = [
	{view:'button', inputWidth:scheduler.xy.icon_back, type:"prev", id:"back",align:"left",label:scheduler.locale.labels.icon_back},
	{view:'button', inputWidth:120, id:"location",align:"right",label:"location", click:"showLocation"},
	{view:'button', inputWidth:scheduler.xy.icon_edit, id:"edit",align:"right",label:scheduler.locale.labels.icon_edit}
];

To show an event location on button click, you need to define some handler function, for example, as follows:

function showLocation(){
	var eventId = $$("scheduler").getCursor();
	var location = $$("scheduler").item(eventId).location;
	dhx.alert(location)
}

In the function you could be confused by the method getCursor(). This method is a part of 'binding' functionality that's used by the scheduler. You can read about the mentioned functionality in the related DHTMLX Touch documentation - 'Binding'.

Related sample: samples/07_mobile/06_custom_form.html

Accessing scheduler's elements

The scheduler includes different components: lists, toolbars, a form and etc. To access any of them you can use the '$$(schedulerId).$$(componentId)' construction.

The ids of the toolbars' buttons can be found above, in the toolbars' descriptions. And here are the ids of components from the scheduler's multiview:

  • 'list' - the 'List' view
  • 'day' - the 'Day' view
    • 'dayBar' - the top toolbar
    • 'dayList' - the list with the events
  • 'month' - the 'Month' view
    • 'calendar' - the calendar
    • 'calendarDayEvents' - the list with the events of the selected day
  • 'event' - the 'Event preview screen' view
    • 'eventBar' - the top toolbar
    • 'eventTemplate' - the template with the event's data
  • 'form' - the 'Details form' view
    • 'editBar' - the toolbar
    • 'editForm' - the form with the event's details.

For example, if you want to show the 'Month' view initially, you need to call show() method for the 'month' view and select the 'month' button of the tabbar control on the bottom toolbar:

$$('scheduler').$$('month').show();
$$('scheduler').$$('buttons').setValue('month');
  • where 'month' and 'buttons' are the ids of the appropriate scheduler's components.

The detail information about the mentioned components you can find in the DHTMLX Touch documentation -
'Master components'.

A custom view

It's possible to add a custom view to the scheduler's multiview. All you need is to add view configuration to the scheduler.config.views array. Beware, view configuration should go before the code line with scheduler initialization.

For example, if you'd like to add a view that will contain a google map, it can be done as follows:

scheduler.config.views.push({
	view:"googlemap",
	id:"mymap"	
});

Related sample: samples/07_mobile/11_custom_view.html