I'd like to prohibit fullcalendar from displaying events in the other month cells. I figured 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 the ???? to get 开发者_运维问答the calendar's current month. Anybody have some tips?
I guess there isn't a way to reference the parent calendar from within this event. "this" refers to the event object. I didn't realize that the view also gets passed as a 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;
}
});
If you use a fullcalendar with year view (https://github.com/tpruvot/fullcalendar). You cannot use view.start.getMonth() on year view. I used a little trick passing through 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')
},
You can do it with some custom style
.fc-other-month {
background: white !important;
}
.fc-row .fc-bg {
z-index: 5;
pointer-events: none;
}
The solution here: using day of fc-other-month
over the day of curent-month
with background white.
eventRender: function(event, element) {
var view = $('#calendar').fullCalendar('getView');
if (event.start.month() == view.intervalStart.month()) {
element.addClass("bg-blue");
}
},
精彩评论