Remove past dates and next months dates from the current month

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; }
}

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            
});

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!

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;
    }
}

For Full calendar v5.0, add the below line in full calendar js:

showNonCurrentDates: false

Add below css to your page:

.fc-day-disabled {
    visibility:hidden;
}

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; } },

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

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'])
        ]);
        ?>

$('.fc-other-month').html('');

and for disabling other month:

$(".fc-other-month").addClass('fc-state-disabled');

Checked below solution in Full Calendar Version-4. It works, hides previous and next month's days and also does not pass previous/next month date in events URL.

showNonCurrentDates: false

Thanks to ask this question.

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'}
        });
    }
}   

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; }
 }

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();

                            });
                        },

You can change the color of the text as background color, i.e white so it will be invisible

td.fc-other-month {
        color: white;
    }

But it your version is >= 3, then you can check parameter- showNonCurrentDays : false, but this is for month view.

As of Full Calendar v5.11.0, eventRender is no longer a valid option and the other answers didn't work for me. Using the VisibleRange function is what ended up doing the trick for me.

var calendar = new Calendar(calendarEl, {
  initialView: 'timeGrid',
  visibleRange: function(currentDate) {
    // Generate a new date for manipulating in the next step
    var startDate = new Date(currentDate.valueOf());
    var endDate = new Date(currentDate.valueOf());

    // Adjust the start & end dates, respectively
    startDate.setDate(startDate.getDate() - 1); // One day in the past
    endDate.setDate(endDate.getDate() + 2); // Two days into the future

    return { start: startDate, end: endDate };
  }
});