Using responsive in view change breaks the Event Calendar view switching

Event calendars & schedulers
1

Hi.

I’m trying to use a responsive month view with header buttons to switch views. It all loads fine, and I can switch views until I click on a day. After that, the view switching buttons no longer work. If I take out the responsive part and just uses a normal view it works fine.

$('.md-view-change').change(function (ev) {
 
    switch (ev.target.value) {
        case 'month':
            inst.setOptions({
                responsive: {
                    xsmall: {
                        view: {
                            calendar: {
                                type: 'month'
                            },
                            agenda: {
                                type: 'day'
                            }
                        }
                    },
                    custom: {
                        breakpoint: 600,
                        view: {
                            calendar: {
                                type: 'month',
                                labels: true
                            },
                            agenda:{
                                type: 'month'
                            }
                        }
                    }
                }
            })
            break;
        case 'week':
            inst.setOptions({
                view: {
                    schedule: { 
                        type: 'week',
                        startTime: '07:00'
                    }
                }
            })
            break;
        case 'day':
            inst.setOptions({
                view: {
                    schedule: { 
                        type: 'day',
                        startTime: '06:00'  
                    }
                }
            })
            break;
    }
});
2

Hi @heather,

The problem is that you set the responsive setting at month view and at week and day views just the view setting. In this case, the responsive setting also takes effect, which causes the problem. The solution is that you need to set the responsive setting at every view types, for example:

$('.md-view-change').change(function (ev) {
    switch (ev.target.value) {
        case 'month':
            inst.setOptions({
                responsive: {
                    xsmall: {
                        view: {
                            calendar: {
                                type: 'month'
                            },
                            agenda: {
                                type: 'day'
                            }
                        }
                    },
                    custom: {
                       breakpoint: 600,
                       view: {
                            calendar: {
                                type: 'month',
                                labels: true
                            },
                            agenda: {
                               type: 'month'
                           }
                        }
                    }
                }
            })
            break;
        case 'week':
            inst.setOptions({
                responsive: {
                    xsmall: {
                        view: {
                            schedule: {
                                type: 'week',
                                startTime: '07:00'
                            }
                        }
                    }
                }
             })
             break;
        case 'day':
            inst.setOptions({
                responsive: {
                    xsmall: {
                        view: {
                            schedule: {
                                 type: 'day',
                                startTime: '06:00'
                            }
                        }
                    }
                }
            })
            break;
    }
});
1 Like
3

That did the trick. Thanks!!