Remove past dates and next months dates from the current month

Question

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.

I doubt that there is an option for this. But you can download the source code and make a custom build. — Niko, Oct 02 '11 at 18:16

score 14 · Answer 1 · answered Feb 14 '12 at 15:10

14

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

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

answered Feb 14 '12 at 15:10

Bascht

194
1
6

for version 2.0 or higher you need to add "._d" event.start._d.getMonth() view.start._d.getMonth() – altore Mar 09 '16 at 09:38
Well, when I applied "event.start._d.getMonth() !== monthView.start._d.getMonth()" for month view, all my events are gone. – boomboomboom Apr 07 '16 at 02:27
For version 2.0 or higher, it's not working. Can someone share a solution? – aniskhan001 Apr 29 '16 at 14:13
Hey y'all. I have a working answer below that works with modern versions of FullCalendar: https://stackoverflow.com/a/32847680/1174795 – ZettaGeek Jan 06 '20 at 05:12

Kihats · Answer 2 · 2019-05-20T09:13:11.623

11

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

edited May 20 '19 at 09:13

answered Mar 07 '18 at 11:27

Kihats

3,326
5
31
46

score 8 · Answer 3 · answered Oct 03 '11 at 11:36

8

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

answered Oct 03 '11 at 11:36

David Webster

314
1
5

This a) wouldn't hide the events on those dates and b) would only work on dates from the past month, but not on those dates in the past that are in the current month. – Niko Oct 03 '11 at 11:47
So cant we hide the past dates in the current month's view?? – rubyist Oct 03 '11 at 12:58
The best way to alter events in the past would be to patch fullcalendar.js so that it adds a class to events that end before today's date. I'd add an if statement to the part in fullCalendar that iterates around the events and builds the markup (around line 4646 in v1.5.1) Here's the code I'd use: `if (event.end < new Date()) { classes.push("fc-event-past") }` You can then use that class to select the elements in jQuery or CSS and style them differently or call .hide() if you want. – David Webster Oct 27 '11 at 14:19
@DavidWebster To apply the patch, where would that be in v2.5.0? – Roberto Flores May 19 '16 at 21:07

score 6 · Answer 4 · answered Jan 05 '15 at 09:15

6

Try this!

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

This works for me!

answered Jan 05 '15 at 09:15

Mohamed Alikhan

1,315
11
14

Thank you...short and simple – Shwet Feb 12 '16 at 06:37
Done in viewRender callback. Works! – Ashikodi Sep 17 '16 at 20:32

score 5 · Answer 5 · answered Sep 29 '15 at 15:13

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

answered Sep 29 '15 at 15:13

ZettaGeek

309
2
11

It's worth noting that whatever the id is of your calendar should be used in the jQuery selector for fetching the calendarDate object on the 3rd line of my example code. – ZettaGeek Sep 29 '15 at 15:14
2

This should be the correct answer - Thanks for posting this! – AnnieMac Oct 19 '17 at 07:26
1

Yes, this worked for me also. This should be the answer. Thanks Zetta. – Hemal Mar 09 '18 at 13:23

score 2 · Answer 6 · answered Sep 27 '20 at 10:17

2

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

answered Sep 27 '20 at 10:17

sai kanth

21
1

score 1 · Answer 7 · answered Sep 23 '15 at 05:38

1

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

answered Sep 23 '15 at 05:38

Nishikant

11
1

This works for me to remove previous and next month events from calendar. – Nishikant Sep 23 '15 at 05:41
In the above code I compared the event start month with current calendar display month and event start month with the end month of current calendar display. If all same then return false to display. It works amazing..... – Nishikant Sep 23 '15 at 05:44

score 1 · Answer 8 · answered May 06 '16 at 04:19

1

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

answered May 06 '16 at 04:19

jettpleyn

130
4

jettpleyn: for the eventRender, would it go before the event? I am having issues with not displaying the actual events and not the dates – Roberto Flores May 16 '16 at 22:28
here is my question with the code I have on the matter: http://stackoverflow.com/questions/37220785/full-calendar-how-to-distinguish-past-events-and-future-events – Roberto Flores May 16 '16 at 22:34
your class name should start from .fc- and not .fcc- but I can't edit your post due to minimum edit length requirement – Aug 03 '16 at 08:33

score 1 · Answer 9 · answered May 13 '16 at 23:05

1

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

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

Hope it helps

answered May 13 '16 at 23:05

Roberto Flores

775
2
12
46

3

Or, fixedWeekCount: false – Sarath Jan 26 '17 at 20:44

score 1 · Answer 10 · edited Dec 07 '16 at 14:44

1

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

edited Dec 07 '16 at 14:44

JCDonis

33
2

answered Nov 18 '16 at 14:46

Ryan Barkley

11
1

Varun Sreedharan · Answer 11 · 2016-12-08T04:05:50.683

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

Mahesh Kathiriya · Answer 12 · 2018-01-29T10:26:31.643

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

`'showNonCurrentDates' => false, and 'fixedWeekCount' => false,` this does the job. thanks — Santosh, Jul 08 '20 at 08:13

score 1 · Answer 13 · edited May 14 '18 at 01:13

1

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

and for disabling other month:

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

edited May 14 '18 at 01:13

Stephen Rauch

47,830
31
106
135

answered May 14 '18 at 00:54

mudassar031

83
7

score 1 · Answer 14 · answered Mar 17 '20 at 10:35

1

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.

answered Mar 17 '20 at 10:35

Kamlesh

5,233
39
50

score 0 · Answer 15 · edited Dec 15 '14 at 12:11

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

score 0 · Answer 16 · answered Oct 18 '17 at 13:20

0

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

answered Oct 18 '17 at 13:20

Cioccolato

1

score 0 · Answer 17 · answered Aug 21 '19 at 07:03

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

                            });
                        },

score 0 · Answer 18 · answered Dec 26 '19 at 15:57

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.

score 0 · Answer 19 · answered May 12 '22 at 15:01

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

Remove past dates and next months dates from the current month

19 Answers19

Linked