7

I want to hide cells of previous and next month dates, which are coming in current month view. I tried adding css but not working for me:

<style>
    .hiddenEvent{display: none;}
    .fc-other-month .fc-day-number { display:none;}

    td.fc-other-month .fc-day-number {
        visibility: hidden;
    }
</style>

I want to hide cells, so that user cannot create events by clicking on next month's days. Here user is able to create events on blank cells also i.e next month dates Thank you.

nirux
  • 131
  • 2
  • 2
  • 7
  • Did you try **[this](http://stackoverflow.com/a/9279293/3639582)** – Shaunak D Apr 05 '15 at 04:35
  • yes @ShaunakD I tried that, actually that is for not rendering the events and I want to hide the cells also/ or at least so that user cannot click on that day ( In my application user can create event after clicking on day and I don't want user to create event on next/ previous month date. ) – nirux Apr 05 '15 at 04:45

4 Answers4

13

From version 3.3.0 you can now use showNonCurrentDates: false .

        $('#calendar_1').fullCalendar({
        header: {
            left: '',
            center: 'title',
            right: ''
        },
        defaultView: 'month',
        editable: true,
        allDaySlot: true,
        selectable: true,
        selectHelper: true,
        selectOverlap: false,
        fixedWeekCount: false,
        showNonCurrentDates: false,
        select: function (start, end) {
            var title = "Available";
            var evid = SaveEvent(start, end, '1');
            $('#calendar_1').fullCalendar('unselect');
        },
        eventClick: function (calEvent, jsEvent, view) {
            var ev_id = calEvent.ID;
            var st_dt = calEvent.start;
            var ed_dt = calEvent.end;
            infoEventShow('1', ev_id, st_dt, ed_dt);
        },
        slotMinutes: 15,
        events: '/Aircrew/GetEvents/',
        eventColor: '#339900'
    });

Reference https://fullcalendar.io/docs/display/showNonCurrentDates/

SteveP
  • 385
  • 2
  • 11
4

Try this :

td.fc-other-month {
   visibility: hidden;
}

Works for me. I don't see a reason why it shouldn't for you but let me know if it doesn't.

EDIT:

After setting the visibility to hidden, you will have to alter the method where you have code which leads to even generation upon click on a cell. And there, you need to do something like this :

if(event.start.getMonth() !== view.start.getMonth()) { return false; }

And similar if comparison would be needed for view.end as well.

Also, you should limit number of weeks in your month view of calendar using fixedWeekCount implementing it as fixedWeekCount: false.

Patel
  • 1,478
  • 1
  • 13
  • 24
  • Hi @vivek by adding this only it's hiding day-number , cells are still visible. I want to hide cells. Actually in my application user can create event after clicking on any day (cell), if cells are visible, events are getting created for other month dates also if user clicks on that. I have edited question please see the image added. – nirux Apr 07 '15 at 07:15
  • I have also tried this but it blanks out the calendar all together – Roberto Flores May 19 '16 at 20:02
3

I found this solution without the subtract. The code works but dont load day 1 of current month and load day 1 of next month. So i used moment().subtract to go back the date 1 day in intervalStart and intervalEnd and works fine for me. Hope can help you.

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; }
},
JCDonis
  • 33
  • 2
1
viewRender:function(){$(".fc-other-month.fc-day-number").html('');}

If you using .fc-other-month.fc-day-number{display:none;} It hides the td so the date is not correctly displays. $(".fc-other-month.fc-day-number").html(''); hides the day number only.

If you want to hide other month events too follow this link https://stackoverflow.com/a/32847680/8039714

Community
  • 1
  • 1
Arun Karthik
  • 11
  • 4