Customizing event calendar header with view switcher

Event calendars & schedulers
1

So I’d like to add a view switcher control to the header of my event calendar, as in this example: JQuery and JQuery Mobile Scheduler Switching views Example | Mobiscroll

However, putting the switcher in between the date picker and the next/previous buttons means it gets squished on a small screen, so I’d like to have the switcher above the other controls within the header. For some reason I’m struggling with this. Do you have an example as to how this can be accomplished?

What I have
what%20I%20have

What I would like to have
what%20I%20would%20like%20to%20have

How do I accomplish this?

2

Hi @Vincent_Wansink,

The header uses flex layout, so it will need some extra flex modifiers and container. Here is a modified version of this header using mobiscroll flex modifier classes(these classes are used internally, and I used them here only for the demonstration and simplicity of the code):

    renderHeader: function () {
        return '<div class="mbsc-flex-col mbsc-flex-1-1">' +
            '<div class="cal-header-picker">' +
            '<label>Year<input mbsc-segmented type="radio" name="view" value="year" class="md-view-change"></label>' +
            '<label>Month<input mbsc-segmented type="radio" name="view" value="month" class="md-view-change" checked></label>' +
            '<label>Week<input mbsc-segmented type="radio" name="view" value="week" class="md-view-change"></label>' +
            '<label>Day<input mbsc-segmented type="radio" name="view" value="day" class="md-view-change"></label>' +
            '<label>Agenda<input mbsc-segmented type="radio" name="view" value="agenda" class="md-view-change"></label>' +
            '</div>' +
            '<div class="mbsc-flex">' +
            '<div mbsc-calendar-nav class="cal-header-nav mbsc-flex-1-1"></div>' +

            '<div mbsc-calendar-prev class="cal-header-prev"></div>' +
            '<div mbsc-calendar-today class="cal-header-today"></div>' +
            '<div mbsc-calendar-next class="cal-header-next"></div>' +
            '</div></div>';
    }

Let me know if this helps!

1 Like
3

Thank you Szili! That’s very helpful.

4

thanks my issue has been fixed.

5

thanks for the awesome information.