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 contains 5 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>"} ];
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} ];
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 scheduler toolbar contains 3 controls:
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"} ];
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
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:
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');
The detail information about the mentioned components you can find in the DHTMLX Touch documentation -
'Master components'.
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