【问题标题】: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

【讨论】:

    猜你喜欢
    • 2017-03-15
    • 2019-07-23
    • 1970-01-01
    • 1970-01-01
    • 2020-11-29
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-01-30
    相关资源
    最近更新 更多