How to display multiple events by having flexible row height?

[Peterngkc]

I have managed to output multiple events on one day from my database. However, the height of each row in the Calendar does not adjust to the number of events.

Is there anyway to have the calendar adjust its row height automatically depending on the number of events, without using scroll?

[Peterngkc]

Added these code to get a dynamic height for each row in the calendar. However, it is no too 'responsive' to the width of the browser.

$('#calendar').on('shown.calendar.calendario', function () {

        var elementHeight1 = $('.fc-row:nth-child(1) .fc-content').map(function () {
            return $(this).height();
        }).get();
        var maxHeight = Math.max.apply(null, elementHeight1);
        if (maxHeight > 0 & window.matchMedia('(min-width: 880px)').matches) {
            $('.fc-row:nth-child(1)').height(maxHeight + 10);
        }
        else if (window.matchMedia('(min-width: 880px)').matches) {
            var calendarHeight = 370;
            $('.fc-four-rows .fc-row:nth-child(1)').height(0.25 * calendarHeight);
            $('.fc-five-rows .fc-row:nth-child(1)').height(0.20 * calendarHeight);
            $('.fc-six-rows .fc-row:nth-child(1)').height(0.16 * calendarHeight);
        }

        var elementHeight2 = $('.fc-row:nth-child(2) .fc-content').map(function () {
            return $(this).height();
        }).get();
        var maxHeight = Math.max.apply(null, elementHeight2);
        if (maxHeight > 0 & window.matchMedia('(min-width: 880px)').matches) {
            $('.fc-row:nth-child(2)').height(maxHeight + 10);
        }
        else if (window.matchMedia('(min-width: 880px)').matches) {
            var calendarHeight = 370;
            $('.fc-four-rows .fc-row:nth-child(2)').height(0.25 * calendarHeight);
            $('.fc-five-rows .fc-row:nth-child(2)').height(0.20 * calendarHeight);
            $('.fc-six-rows .fc-row:nth-child(2)').height(0.16 * calendarHeight);
        }

        var elementHeight3 = $('.fc-row:nth-child(3) .fc-content').map(function () {
            return $(this).height();
        }).get();
        var maxHeight = Math.max.apply(null, elementHeight3);
        if (maxHeight > 0 & window.matchMedia('(min-width: 880px)').matches) {
            $('.fc-row:nth-child(3)').height(maxHeight + 10);
        }
        else if (window.matchMedia('(min-width: 880px)').matches) {
            var calendarHeight = 370;
            $('.fc-four-rows .fc-row:nth-child(3)').height(0.25 * calendarHeight);
            $('.fc-five-rows .fc-row:nth-child(3)').height(0.20 * calendarHeight);
            $('.fc-six-rows .fc-row:nth-child(3)').height(0.16 * calendarHeight);
        }

        var elementHeight4 = $('.fc-row:nth-child(4) .fc-content').map(function () {
            return $(this).height();
        }).get();
        var maxHeight = Math.max.apply(null, elementHeight3);
        if (maxHeight > 0 & window.matchMedia('(min-width: 880px)').matches) {
            $('.fc-row:nth-child(4)').height(maxHeight + 10);
        }
        else if (window.matchMedia('(min-width: 880px)').matches) {
            var calendarHeight = 370;
            $('.fc-four-rows .fc-row:nth-child(4)').height(0.25 * calendarHeight);
            $('.fc-five-rows .fc-row:nth-child(4)').height(0.20 * calendarHeight);
            $('.fc-six-rows .fc-row:nth-child(4)').height(0.16 * calendarHeight);
        }

        var elementHeight5 = $('.fc-row:nth-child(5) .fc-content').map(function () {
            return $(this).height();
        }).get();
        var maxHeight = Math.max.apply(null, elementHeight5);
        if (maxHeight > 0 & window.matchMedia('(min-width: 880px)').matches) {
            $('.fc-row:nth-child(5)').height(maxHeight + 10);
        }
        else if (window.matchMedia('(min-width: 880px)').matches) {
            var calendarHeight = 370;
            $('.fc-four-rows .fc-row:nth-child(5)').height(0.25 * calendarHeight);
            $('.fc-five-rows .fc-row:nth-child(5)').height(0.20 * calendarHeight);
            $('.fc-six-rows .fc-row:nth-child(5)').height(0.16 * calendarHeight);
        }

        var elementHeight6 = $('.fc-row:nth-child(6) .fc-content').map(function () {
            return $(this).height();
        }).get();
        var maxHeight = Math.max.apply(null, elementHeight6);
        if (maxHeight > 0 & window.matchMedia('(min-width: 880px)').matches) {
            $('.fc-row:nth-child(6)').height(maxHeight + 10);
        }
        else if (window.matchMedia('(min-width: 880px)').matches) {
            var calendarHeight = 370;
            $('.fc-four-rows .fc-row:nth-child(6)').height(0.25 * calendarHeight);
            $('.fc-five-rows .fc-row:nth-child(6)').height(0.20 * calendarHeight);
            $('.fc-six-rows .fc-row:nth-child(6)').height(0.16 * calendarHeight);
        }

    });

[deviprsd]

Why don't you just use a scroll, like a javascript custom scroll or css one.

[Peterngkc]

There will be at least 8-15 events per day. Using a scroll will make it rather untidy.

By the way, the calendar appears first then followed by the data from the database. How do I load the data first?

[deviprsd]

https://github.com/CalendarioFX/Calendario/blob/master/index2.html#L114 like this, if you happen to load the events through ajax or whatever method you are using. You can initialize calendar after a successful ajax and likewise.

[Peterngkc]

Can you guide me? I load the events using:

        $.get('/Calendar/CalendarJson', { name: 'content' }, function (data) {
            var obj = JSON.stringify(data);
            $('#calendar').calendario('setData', data, false);
        }, 'json');

[deviprsd]

How about you initialize the calendar when you have the events

$.get('/Calendar/CalendarJson', { name: 'content' }, function (data) {
    var obj = JSON.stringify(data);
    $( '#calendar' ).calendario({
        caldata : data, //events go here
        displayWeekAbbr : true,
        events: ['click', 'focus']
    });
}, 'json');

[Peterngkc]

Thanks, it works!