Multiple options for "Day" type

[Naveen Davuluri]

Hi, my following code doesn't work. Is it because i have 2 options of "Day". I have a need to show 1 day and also 3 days. Looks like only option is being considered

var scheduleObj = new ej.schedule.Schedule({

  width: "100%",

  height: "100%",

  selectedDate: Date.now(),

  showHeaderBar: false,

  views: [

    { displayName: "Day", option: "Day", interval: 1 },

    { displayName: "72 hrs", option: "Day", interval: 3 },

    { displayName: "Week", option: "Week", interval: 1, firstDayOfWeek: 1 },

    { displayName: "Gantt", option: "TimelineDay", interval: 3 },

  ],

[Swathi Ravi]

Hi Naveen,

Thanks for reaching out.

The issue you reported occurs because only one view is rendered in the scheduler. By default, the Week view is rendered initially, and you can navigate to other views using the toolbar. However, you need to enable the toolbar, as it is currently disabled by setting showHeaderBar to false.

Sample: https://stackblitz.com/edit/xsmcj3mk-n5xkt5zr?file=index.js

Regards,

Swathi

[Naveen Davuluri]

Thanks Swathi. I have a custom toolbar and hence i made headtoolbar invisible. This is the exact thing that i would like to achieve but in javascript. Can you please let me know if that is possible?

Multiple views with same Option but different intervals | Angular - EJ 2 Forums | Syncfusion®

[Swathi Ravi]

Naveen,

 

Thanks for sharing the details.

 

If you are using a custom toolbar, you can switch views by using the changeCurrentView method of the Scheduler. In that, you can pass the view names and view index to change to the appropriate view.

 

var data = new ej.base.extend([], window.zooEventsData, null, true);

var scheduleObj = new ej.schedule.Schedule({

  width: "100%",

  height: "650px",

  selectedDate: Date.now(),

  showHeaderBar: false,

  views: [

    { displayName: "Day", option: "Day", interval: 1 }, //viewindex 1

    { displayName: "72 hrs", option: "Day", interval: 3 },  //viewindex 2

    { displayName: "Week", option: "Week", interval: 1, firstDayOfWeek: 1 },  //viewindex 3

    { displayName: "Gantt", option: "TimelineDay", interval: 3 },  //viewindex 4

  ],

});

scheduleObj.appendTo('#Schedule');

 

// Custom toolbar

var toolbarObj = new ej.navigations.Toolbar({

  items: [

    { text: 'Day' },

    { text: '72 hrs' },

    { text: 'Week' },

    { text: 'Gantt' },

  ],

  clicked: toolbarClickHandler

});

toolbarObj.appendTo('#Toolbar');

 

function toolbarClickHandler(args) {

  switch (args.item.text) {

    case 'Day':

      scheduleObj.changeCurrentView('Day', 0)

      break;

    case '72 hrs':

      scheduleObj.changeCurrentView('Day', 1)

      break;

    case 'Week':

      scheduleObj.changeCurrentView('Week')

      break;

    case 'Gantt':

 

      break;

  }

}

 

Sample: https://stackblitz.com/edit/xsmcj3mk-lct5caxb?file=index.js