Is it possible to remove the past dates and next month's dates from the fullcalendar? So for the current month it should display only current dates and days.
You could try skipping the events in the eventRender() method:
eventRender: function(event, element, view)
{
if(event.start.getMonth() !== view.start.getMonth()) { return false; }
}
The grid cells for the next and previous month have the class "fc-other-month", so you can target them that way:
e.g.: The hide the day numbers, add the CSS:
.fc-other-month .fc-day-number { display:none;}
or run this JavaScript:
$(".fc-other-month .fc-day-number").hide()
Try this!
$('.fc-other-month').html('');
This works for me!
Add this setting showNonCurrentDates: false. With this setting, dates and events that do not belong to the current month will not be shown.
$('#calendarId').fullCalendar({
// Other settings
showNonCurrentDates: false
});
None of the solutions provided on this answer properly solve the problem with the current version of FullCalendar. Using Bascht's answer as a starting point, I've updated his approach to use the current FullCalendar APIs. Below is working example code that will accomplish this task:
eventRender: function (event, element) {
var eventDate = event.start;
var calendarDate = $('#activitiesCalendar').fullCalendar('getDate');
if (eventDate.get('month') !== calendarDate.get('month')) {
return false;
}
}
eventRender: function (event, element, view) {
var currentMon = new Date(event.start);
var currentMonth = currentMon.getMonth();
var currentMonViewStart = new Date(view.start);
var currentMonthViewStart = currentMon.getMonth();
var currentMonViewEnd = new Date(view.end);
var currentMonthViewEnd = currentMonViewEnd.getMonth();
if((currentMonth == currentMonthViewStart) && (currentMonth == currentMonthViewEnd)){
return false;
}
}
for version 2.0 or higher:
eventRender: function (event, element, view) {
if(event.start._d.getMonth() !== $('calendar').fullCalendar('getDate')._d.getMonth()) {
return false;
}
}
// if you want to remove other month's days from view add to css:
.fcc-other-month {
visibility:hidden;
}
Try using weekMode: http://fullcalendar.io/docs/display/weekMode/.
weekMode: 'liquid', or `weekMode: 'variable',`
Hope it helps
For newer version of FullCalendar plugin, the following works utilizing Moment.js helper functions:
eventRender: function(event, element, view){
var evStart = moment(view.intervalStart).subtract(1, 'days');
var evEnd = moment(view.intervalEnd).subtract(1, 'days');
if (!event.start.isAfter(evStart) ||
event.start.isAfter(evEnd)) { return false; }
},
$('.fc-other-month').html('');
and for disabling other month:
$(".fc-other-month").addClass('fc-state-disabled');
For the latest version I used:
eventRender: function(event,element,view) {
var view_title = view.title;
var event_title = event.start;
var event_title2 = moment(event_title).format('MMMM YYYY');
if(event_title2 !== view_title) {
return false;
} else {
var idname = 'event' + event.id;
$(element).attr('id', idname).addClass('ttLT').attr('title', event.title);
var mytitle = event.title;
if (mytitle.toLowerCase().indexOf("open timeslot") >= 0)
{
$(element).addClass('alert').addClass('alert-success');
}
else{
$(element).addClass('alert').addClass('alert-info');
$(element).find('.fc-event-title').addClass('capitalize');
$(element).find('.fc-event-inner').addClass('capitalize');
}
element.qtip({
content: event.description,
style:{classes:'qtip-bootstrap'},
position:{my:'bottom right',at:'top left'}
});
}
}
Using event render and a callback function solved my issue .Perfectly hiding previous and next month events from current view
eventRender: function(event, element, view) {
if (view.name == "month") {
if (event.start._i.split("-")[1] != getMonthFromString(view.title.split(" ")[0])) {
return false;
}
}
}
function getMonthFromString(mon) {
var d = Date.parse(mon + "1, 2016");
if (!isNaN(d))
return new Date(d).getMonth() + 1;
return -1;
}
Hope it helps
This is working for me on version 3.6.1
eventRender: function(event, element, view)
{
if(!event.start.isBetween(view.intervalStart, view.intervalEnd)) { return false; }
}
you can try this clientOptions 'showNonCurrentDates' => false, and 'fixedWeekCount' => false,
This code allow me to hide the days of previous months and next months but the cells of thouse days remains: Try using Fullcalendar Doc
<?= $JSCode = <<<EOF
function(event, element, view) {
if(event.nonstandard.status =='0'){
element.find(".fc-title").css({"color": "red"});
$('.fc-day-top[data-date="'+event.nonstandard.date+'"]').find('.fc-day-number').css({"background-color": "red", "color": "white"});
} else if(event.nonstandard.status == '1'){
element.find(".fc-title").css({"color": "#1ab394"});
$('.fc-day-top[data-date="'+event.nonstandard.date+'"]').find('.fc-day-number').css({"background-color": "#1ab394", "color": "white"});
}else if(event.nonstandard.status == '4' || event.nonstandard.status == '5'){
$('.fc-day-top[data-date="'+event.nonstandard.date+'"]').find('.fc-day-number').css({"background-color": "#676a6c", "color": "white"});
}else if(event.nonstandard.status == '3'){
element.find(".fc-title").css({"color": "red"});
$('.fc-day-top[data-date="'+event.nonstandard.date+'"]').find('.fc-day-number').css({"background-color": "red", "color": "white"});
}else if(event.nonstandard.status == '2'){
element.find(".fc-title").css({"color": "orange"});
$('.fc-day-top[data-date="'+event.nonstandard.date+'"]').find('.fc-day-number').css({"background-color": "orange", "color": "white"});
}
if(event.nonstandard.working_hours) {
var new_description = '<strong>Total' + ' : </strong>' + event.nonstandard.working_hours + '<br/>';
element.append(new_description);
} } EOF;
yii2fullcalendar\yii2fullcalendar::widget([
'id' => 'calendar',
'options' => [
'lang' => 'en',
'header' => [
'left' => 'prev,next today',
'center' => 'title',
'right' => 'month,agendaWeek,agendaDay'
],
],
'clientOptions' => [
'height' => 750,
'showNonCurrentDates' => false,
'language' => 'en',
'eventLimit' => true,
'selectable' => true,
'selectHelper' => true,
'droppable' => false,
'editable' => false,
'fixedWeekCount' => false,
'defaultDate' => date('Y-m-d'),
'eventRender' => new JsExpression($JSCode),
],
'events' => Url::to(['/user/myattr/jsoncalendar'])
]);
?>
Remove past dates and next months dates events from the current month in year view using this trick.
eventAfterAllRender: function() {
$(".fc-other-month").each(function() {
var index=$(this).index();
var aa= $(this).closest("table").find("tbody").find("tr").
find("td:nth-child("+(index+1)+")");
aa.find(".fc-day-grid-event").hide();
});
},
来源：https://stackoverflow.com/questions/7628040/remove-past-dates-and-next-months-dates-from-the-current-month