'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.

jquery fullcalendar

Solution 1:^[1]

You could try skipping the events in the eventRender() method:

eventRender: function(event, element, view)
{
   if(event.start.getMonth() !== view.start.getMonth()) { return false; }
}

Solution 2:^[2]

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

Solution 3:^[3]

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

Solution 4:^[4]

Try this!

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

This works for me!

Solution 5:^[5]

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

Solution 6:^[6]

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

Solution 7:^[7]

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

Solution 8:^[8]

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

Solution 9:^[9]

Try using weekMode: http://fullcalendar.io/docs/display/weekMode/.

weekMode: 'liquid', or `weekMode: 'variable',`

Hope it helps

Solution 10:^[10]

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

Solution 11:^[11]

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

Solution 12:^[12]

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

Solution 13:^[13]

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

and for disabling other month:

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

Solution 14:^[14]

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.

Solution 15:^[15]

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

Solution 16:^[16]

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

Solution 17:^[17]

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

                            });
                        },

Solution 18:^[18]

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.

Solution 19:^[19]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Bascht
Solution 2
Solution 3	David Webster
Solution 4	Mohamed Alikhan
Solution 5	ZettaGeek
Solution 6	sai kanth
Solution 7	Nishikant
Solution 8	jettpleyn
Solution 9	Roberto Flores
Solution 10	JCDonis
Solution 11
Solution 12
Solution 13	Stephen Rauch
Solution 14	Kamlesh
Solution 15	LuÃs Cruz
Solution 16	Cioccolato
Solution 17	Manish Vadher
Solution 18	Dip
Solution 19	Adam

'Remove past dates and next months dates from the current month

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]

Solution 8:[8]

Solution 9:[9]

Solution 10:[10]

Solution 11:[11]

Solution 12:[12]

Solution 13:[13]

Solution 14:[14]

Solution 15:[15]

Solution 16:[16]

Solution 17:[17]

Solution 18:[18]

Solution 19:[19]