Andere Monatsereignisse durch Rendern in jQuery FullCalendar verhindern

Question

Ich möchte verhindern, dass Vollkalender Ereignisse in den anderen Monatszellen anzeigt. Ich dachte, ich könnte das mit dem eventRender-Event machen.

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

Ich kann nicht herausfinden, was die ???? um den aktuellen Monat des Kalenders zu erhalten. Hat jemand ein paar Tipps?

Answer 1

Ich denke, es gibt keine Möglichkeit, den übergeordneten Kalender von innerhalb dieses Ereignisses zu referenzieren. "this" bezieht sich auf das Ereignisobjekt. Ich habe nicht erkannt, dass die Ansicht auch als dritter Parameter übergeben wird. Ich konnte dies mit dem folgenden Code auszuführen:

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

Answer 2

Wenn Sie ein fullcalendar mit Jahresansicht verwenden (https://github.com/tpruvot/fullcalendar). Sie können view.start.getMonth() nicht in der Jahresansicht verwenden. benutzen ich einen kleinen Trick durch eventAfterRender vorbei:

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

Sie können es mit einigem benutzerdefinierten Stil

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

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

Die Lösung hier: mit Tag des fc-other-month über den Tag von curent-month mit weißen Hintergrund.

Answer 4

eventRender: function(event, element) { 
 

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