I can't get the calendar view switching to work. (V5)

Event calendars & schedulers
1

I’m following the sample shown in this demo here: Javascript Event calendar Switching views Example | Mobiscroll

But it’s not switching the calendar view at all. There are no javascript errors and the code steps through the switch statement and hits the “calendar.setOptions({” code as it should, but the calendar doesn’t switch.

I’m triggering the switch from a dropdown control.

<select id=viewpicker>
  <option value='month'>Month</option>
  <option value='week'>Week</option>
  <option value='day'>Agenda</option>
</select>

And here is my javascript.

$.get("get-staffschedule.json.php?staffid=<?=$staffid?>", function(data){

  var calendar = $('#staffschedule').mobiscroll5().eventcalendar({
    locale: mobiscroll5.localeRu,
    display: 'inline',
    invalid: [<?=$invalidstring?>],
    calendarHeight: 600,
    themeVariant: 'light',
    responsive: {
        xsmall: {
            view: {
                calendar: {type: 'month'},
                agenda: {type: 'day'}
            }
        },
        small: {
            view: {
                calendar: {type: 'month',labels:true}
            }
        }
    },
    onEventSelect: function (event, inst) {
          mobiscroll.toast({
              message: event.event.text
          });
    }

  }).mobiscroll5('getInst');

  calendar.setEvents(JSON.parse(data));

  $('#viewpicker').change(function (ev) {

      switch (ev.target.value) {
          case 'month':
              calendar.setOptions({
                  view: {
                      calendar: { type: 'month' },
                      agenda: { type: 'month' }
                  }
              })
              break;
          case 'week':
              calendar.setOptions({
                  view: {
                      calendar: { type: 'week' },
                      agenda: { type: 'week' }
                  }
              })
              break;
          case 'day':
              calendar.setOptions({
                  view: {
                      agenda: { type: 'day' }
                  }
              })
              break;
      }
  });
});

I must be missing something but I can’t see it.

2

The problem is, that you also have the responsive option specified. The setOptions call will set the view options correctly, but the responsive option is still there, and the view specified there has higher priority.

3

Thank you! That makes perfect sense.

4

Is it possible to change the priority so that I can use the responsive on initialization but still override that setting with the switch logic?