How to set Month View in Full Calendar to expand only if there is a event?

Question

I have Customised the FullCalendar plugin little bit for a project of mine, it looks like this - month view. As you can see the empty date has the same height of the date's with the Events. what I want is that the week of the month view without any event day should be small. I have set the height of the days using aspect ratio now. Please do guide me. Thank you cheers...

There's no setting or built-in function to do this. You'd have to write your own code to run after all events have rendered, get the current set of client events, loop through them, keep a record of any currently displayed days which have no events found in them, and then find the relevant `` for that day and change its height. You'd have to make sure this runs whenever an event is added, updated or deleted, the date is changed, or the view type is changed to month (but doesn't run when the view type is not month). — ADyson, Jun 26 '17 at 15:27
If you want some detailed help with this, make your own attempt using that logic, and if you get stuck, post your code here in the question and we can help to fix it. — ADyson, Jun 26 '17 at 15:27
no worries, glad the suggestion was of help. Hope it solves your problem. — ADyson, Jun 27 '17 at 11:35
@ADyson `thank you` for your reply... I tried with your logic and some of my ideas and came up with a function and it worked for me, I will put it as answer if you think the function will work ok, please mark it as the answer. ty Cheers... — Jithin Raj P R, Jun 27 '17 at 11:42
I can't mark it as the answer, it's your question. You are permitted to answer your own questions though. If you think it would be of use to future readers you can do that. If I think it's good I might give it an upvote (not the same as it being the accepted answer - only you can set that). — ADyson, Jun 27 '17 at 11:44
@ADyson, am new to StackOverflow so sorry for that, anyway check my answer if it's useful please do support me. — Jithin Raj P R, Jun 27 '17 at 11:56

score 1 · Accepted Answer · answered Jun 27 '17 at 11:53

Here is the answer that worked for me special thanks for @Adyson for the help and suggestions.

var calHeight = function() {
    $('#calendar').find('.fc-row').each(function() {
        var ogHeigth = '';
            if ($(this).find('.fc-event-container').length > '0') {
                ogHeigth = $(this).outerHeight();
            }
            if ($(this).find('.fc-event-container').length == '0') {
                $(this).css('height', ogHeigth - ogHeigth / 3);
            }
    });
}

I put this function in all functions inside the full calendar , so that this runs whenever an event is added, updated or deleted, the date is changed etc. its working for me hope this helps you guys to. ty

seems like a sensible approach :-) – ADyson Jun 27 '17 at 12:04 — ADyson, Jun 27 '17 at 12:04

How to set Month View in Full Calendar to expand only if there is a event?

1 Answers1