Our powerful JS Calendar component


Post by ngarimalla »

Hello - We reduce the viewport of Calendar - Basic Demo we are not seeing that the Calendar adjusts responsively. Can you show us how to make Calendars responsive?

Please see the image in the attachment

Attachments
CalendarResponsive.png
CalendarResponsive.png (138.33 KiB) Viewed 603 times

Post by mats »

Try instead using the Chrome Dev tools to simulate iPhone and you will see it works well.

You can achieve responsiveness using standard media queries:

@media (max-width : 700px) {
    .b-sidebar,
    .b-calendar .b-top-toolbar .b-calendar-view-desc,
    [data-ref=todayButton],
    [data-ref=toggleSideBar] {
        display : none;
    }

.b-calendar .b-top-toolbar {
    padding-left : 0;
    font-size    : 0.8em;
}

.b-yearview-content .b-calendar-week {
    max-width : 100%;
}

.b-calendarrow .b-cal-cell-header {
    padding-top : 1em;

    .b-day-name-date {
        font-size : 1em;
    }
}

.b-agendaview {
    .b-cal-agenda-date {
        flex-shrink : 1;
    }

    .b-grid-cell {
        font-size : 0.7em;
    }

    .b-cal-agenda-event-time {
        flex: 0 0 9em;
    }
}
}

We will improve the support for responsiveness in the core for 4.2.0 as part of this ticket:
https://github.com/bryntum/support/issues/2899


Post Reply