Prevent other month events from rendering in jQuery FullCalendar

Question

I would like to prevent fullcalendar from displaying events in other cells of the month. I decided that I could do this with the eventRender event.

$('#calendar').fullCalendar({
    events: $.fullCalendar.myFeed(),
    eventRender: function (event, element) {
        if (event.start.getMonth() != ????)
            $(element).hide();
   }
});

I can’t figure out what to replace ???? to get the calendar for the current month. Does anyone have any clues?

Answer 1

I think there is no way to refer to the parent calendar from this event. "this" refers to the event object. I did not understand that the view is also passed as the third parameter. I was able to accomplish this using the following code:

    $('#calendar').fullCalendar({
        events: $.fullCalendar.myFeed(),
        eventRender: function (event, element, view) {
            if (event.start.getMonth() != view.start.getMonth())
                return false;
        }
    });

Answer 2

(https://github.com/tpruvot/fullcalendar). view.start.getMonth() . , eventAfterRender:

eventAfterRender: function (event, element, view) {
    var col=element.closest('td').index()+1;
    var $cellh=element.closest('table').find('thead td:nth-child('+col+')');
    if ($cellh.hasClass('fc-other-month') == true)
            element.css('visibility','hidden')
},

Answer 3

You can do it with a special style.

.fc-other-month {
    background: white !important;
}

.fc-row .fc-bg {
    z-index: 5;
    pointer-events: none;
}

The solution here is: using the day fc-other-monthduring the day curent-monthwith a white background.

Answer 4

eventRender: function(event, element) {

  var view = $('#calendar').fullCalendar('getView');
  if (event.start.month() == view.intervalStart.month()) {
    element.addClass("bg-blue");
  }
},

Run code