Mobile scheduler view

Webix JS
1

Hello!

When using the mobile scheduler, is there any way to check what current view is selected?(day/week/edit/add,etc)?

Also, is it possible to add a new view to the scheduler? (for example, on a click to show a blank page)?

Thanks

2

Hi!

Scheduler consists of several widgets: Layouts, Lists, Calendars, Buttons, Forms,… including two Multiviews:

  • “tabViews” - Day, Week and Year views
  • “views” - includes “tabViews” Multiview and other views.

Here is an article about accessing Scheduler elements:

So, to access “tabViews” Multiview and get its active id you can do the following:

var id = $$(“scheduler”).$$(“tabViews”).getActiveId();

This id is unique. And to get view name (id inside scheduler) you can apply innerId() method:

function getActiveId(){
   var activeId,
         sch= $$("scheduler");
  
   if(sch.$$("tabViews").isVisible())
        activeId = sch.$$("tabViews").getActiveId();
   else
        activeId = sch.$$("views").getActiveId();
  return sch.innerId(activeId);
}

is it possible to add a new view to the scheduler?

Yes, its possible:

To show the new view you can call show() method for it:

$$(“scheduler”).$$(“mylist”).show();

3

Great,thanks a lot for the info.

But still, where can I find the exact structure of a custom view?some explanations about what and how I create a custom view, maybe even a working example?

For example i am trying to create a view with a label and 2 buttons, but I just can’t get my head around where and how i should define those controlls.

4

Hi,

scheduler.config.views is the collection of views inside Scheduler: Form view, Event view, collection with Week, Day and Month views. So, you can use it to add a “page” into Scheduler.

If you just want to add several buttons, you can add them into existent forms or toolbars http://docs.webix.com/mobile_calendar__mobile_advanced.html. Or if these buttons should be outside scheduler, you can use rows layout:

  • toolbar with your buttons
  • scheduler
webix.ui({
   rows:[
          {view : "toolbar", elements:[]},
          {view: "scheduler", ...}
    ]
});