Day/Week View Switcher

Scheduling people, teams or an entire workforce requires different views. Sometimes you'll be needing a helicopter view of a week and other times you might want to dig into a specific day. This all can be served through a simple switching mechanism implemented with a segmented control right in the header of the calendar.

By dynamically changing the options you can set the level of detail you want to see. Eg. Show a daily timeline with hourly steps, show the work week with the same resolution or zoom out for a full week-view with 12 hour steps.

Want to see how to set other views?  Check out this example for switching views →
Download and try example

Demo

Loading the live demo

Preview in full screen

Build resource schedules with day, work-week, and full-week views on a Timeline — switch views from the header to control time-grid detail.

Code

View code on GitHub 
mobiscroll.setOptions({
  locale:  ,
  theme: ' ',
  themeVariant: ' '
});

var calendar = mobiscroll.eventcalendar('#demo-day-work-week-view', {
  clickToCreate: true,
  dragToCreate: true,
  dragToMove: true,
  dragToResize: true,
  view: {
    timeline: {
      type: 'week',
    },
  },
  resources: [
    {
      id: 1,
      name: 'Ryan',
      color: '#ff0101',
      title: 'Cloud System Engineer',
      img: 'https://img.mobiscroll.com/demos/m1.png',
    },
    {
      id: 2,
      name: 'Kate',
      color: '#239a21',
      title: 'Help Desk Specialist',
      img: 'https://img.mobiscroll.com/demos/f1.png',
    },
    {
      id: 3,
      name: 'John',
      color: '#8f1ed6',
      title: 'Application Developer',
      img: 'https://img.mobiscroll.com/demos/m2.png',
    },
    {
      id: 4,
      name: 'Mark',
      color: '#01adff',
      title: 'Network Administrator',
      img: 'https://img.mobiscroll.com/demos/m3.png',
    },
    {
      id: 5,
      name: 'Sharon',
      color: '#d8ca1a',
      title: 'Data Quality Manager',
      img: 'https://img.mobiscroll.com/demos/f2.png',
    },
  ],
  renderResource: function (resource) {
    return (
      '<div class="md-work-week-cont">' +
      '<div class="md-work-week-name">' +
      resource.name +
      '</div>' +
      '<div class="md-work-week-title">' +
      resource.title +
      '</div>' +
      '<img class="md-work-week-avatar" src="' +
      resource.img +
      '"/>' +
      '</div>'
    );
  },
  renderHeader: function () {
    return (
      '<div mbsc-calendar-nav class="md-work-week-nav"></div>' +
      '<div class="md-work-week-picker">' +
      '<label>Day<input mbsc-segmented type="radio" name="view" value="day" class="md-view-change"></label>' +
      '<label>Work week<input mbsc-segmented type="radio" name="view" value="workweek" class="md-view-change"></label>' +
      '<label>Week<input mbsc-segmented type="radio" name="view" value="week" class="md-view-change" checked></label>' +
      '</div>' +
      '<div mbsc-calendar-prev class="md-work-week-prev"></div>' +
      '<div mbsc-calendar-today class="md-work-week-today"></div>' +
      '<div mbsc-calendar-next class="md-work-week-next"></div>'
    );
  },
  invalid: [
    {
      start: '00:00',
      end: '06:00',
      recurring: {
        repeat: 'weekly',
        weekDays: 'MO,TU,WE,TH,FR',
      },
    },
    {
      start: '20:00',
      end: '23:59',
      recurring: {
        repeat: 'weekly',
        weekDays: 'MO,TU,WE,TH,FR',
      },
    },
    {
      recurring: {
        repeat: 'weekly',
        weekDays: 'SA,SU',
      },
    },
  ],
  onEventCreateFailed: function () {
    mobiscroll.toast({
      message: "Can't schedule outside of working hours",
    });
  },
  onEventUpdateFailed: function () {
    mobiscroll.toast({
      message: "Can't schedule outside of working hours",
    });
  },
});

document.querySelectorAll('.md-view-change').forEach(function (elm) {
  elm.addEventListener('change', function (ev) {
    switch (ev.target.value) {
      case 'day':
        calendar.setOptions({
          view: {
            timeline: { type: 'day' },
          },
        });
        break;
      case 'workweek':
        calendar.setOptions({
          view: {
            timeline: {
              type: 'week',
              startDay: 1,
              endDay: 5,
            },
          },
        });
        break;
      case 'week':
        calendar.setOptions({
          view: {
            timeline: {
              type: 'week',
            },
          },
        });
        break;
    }
  });
});

mobiscroll.getJson(
  'https://trial.mobiscroll.com/timeline-events/',
  function (events) {
    calendar.setEvents(events);
  },
  'jsonp',
);

Duplicate Session

You have signed in on a different machine. To keep everything in sync, you have been signed out of this session.

If you need to invite team members, manage seats and accounts you can do it from the licenses page.

Duplicate Session

We noticed you are logged in on a different machine and have closed your old session.

If you need to invite team members, manage seats and accounts you can do it from the licenses page.