如何在fullcalendar中隐藏当前月份视图中上个月和下个月的单元格？

Question

我想隐藏上个月和下个月日期的单元格，这些日期将在当前月份视图中显示。 我尝试添加css但不适合我：

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

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

我想隐藏单元格，以便用户无法通过点击下个月的日期来创建活动。 谢谢。

Answer 1

从版本3.3.0开始，您现在可以使用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'
    });

参考https://fullcalendar.io/docs/display/showNonCurrentDates/

Answer 2

试试这个：

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

适合我。我不明白为什么它不适合你，但如果它没有，请告诉我。

修改

将visibility设置为hidden后，您必须更改您拥有代码的方法，这些代码甚至可以在单击单元格时生成。在那里，你需要做这样的事情：

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

如果view.end也需要进行比较，则类似。

此外，您应该使用fixedWeekCount将fixedWeekCount: false实施为{{1}}来限制每月的日历视图中的周数。

Answer 3

我发现这个解决方案没有减法。该代码有效但不加载当月的第1天并加载下个月的第1天。所以我用了moment（）。减去在intervalStart和intervalEnd中返回日期1天，对我来说工作正常。希望可以帮到你。

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

Answer 4

viewRender:function(){$(".fc-other-month.fc-day-number").html('');}

如果您使用.fc-other-month.fc-day-number{display:none;}它会隐藏td，因此日期未正确显示。 $(".fc-other-month.fc-day-number").html('');仅隐藏日期编号。

如果您想隐藏其他月份活动，请点击此链接https://stackoverflow.com/a/32847680/8039714