如何在全日历的当前月份视图中隐藏上个月和下个月的单元格？答案

【问题标题】：How to hide cells of previous and next month from current month view in fullcalendar?如何在全日历的当前月份视图中隐藏上个月和下个月的单元格？
【发布时间】：2017-10-04 14:27:29
【问题描述】：

我想隐藏当前月份视图中的上个月和下个月日期的单元格。我尝试添加 css 但对我不起作用：

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

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

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

【问题讨论】：

你试过了吗this
是的@ShaunakD 我试过了，实际上那是为了不渲染事件，我也想隐藏单元格/或至少这样用户不能点击那天（在我的应用程序中用户可以创建单击日期后的事件，我不希望用户在下/上个月日期创建事件。）

标签： jquery css fullcalendar

【解决方案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/

【讨论】：

我升级了我的日历，这样我就可以使用这个设置了！干杯

【解决方案2】：

试试这个：

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

为我工作。我看不出它不适合你的原因，但如果不适合，请告诉我。

编辑：

将visibility 设置为hidden 后，您将不得不更改您拥有代码的方法，这会导致在单击单元格时生成偶数。在那里，你需要做这样的事情：

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

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

此外，您应该使用 fixedWeekCount 将其实现为 fixedWeekCount: false 来限制日历月视图中的周数。

【讨论】：

嗨@vivek 添加这个只是它隐藏 day-number ，单元格仍然可见。我想隐藏单元格。实际上，在我的应用程序中，用户可以在单击任何一天（单元格）后创建事件，如果单元格可见，那么如果用户单击它，也会为其他月份日期创建事件。我已编辑问题，请查看添加的图片。
我也试过这个，但它把日历全部清空了

【解决方案3】：

我找到了这个没有减法的解决方案。该代码有效，但不加载当前月份的第 1 天和下个月的第 1 天。所以我使用 moment().subtract 在 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; }
},

【讨论】：

自此日期起工作。使用 FullCalendar v3.1.0。干得好:-)

【解决方案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

【讨论】：