如何在全日历中实现自定义假期

问题描述 投票:0回答:2

我已经实现了 fullcalendar api 来显示公司的所有营业/工作日。

    $('#calendar').fullCalendar({
    header: {
    left: 'prev,next today',
    center: 'title',
    right: 'month,agendaWeek,agendaDay'
},
allDaySlot:false,
    events: evtObj,  //evtObj contains list of working days in JSON
    editable: false,
    height: 630
});

例如:从2015年6月1日到2015年10月31日。现在我有一个商务假期清单,比如:6月25日,8月31日……

现在我怎样才能删除这些日期的显示。由于事件对象仅包含开始日期和结束日期作为参数

{
    title: event name,
    start: start time,
    end  : end time
}
fullcalendar
2个回答
0
投票

您无法在全日历中执行此操作。不过,有某种解决方法。
您可以为那些具有与营业时间相同 CSS 类的日期添加后台事件。 假设您有这些日期:

var start = new Date(2015, 5, 1), //1st of June 0:00
    end = new Date(2015, 5, 2); //2nd of June 0:00

现在为 1 个特定日期创建 2 个事件,为 allDay 时段创建 1 个事件,为当天的其余时间创建 1 个事件。 事件如下所示:

{
    start: moment(start),
    end: moment(end),
    rendering: 'background',
    className: 'fc-nonbusiness'
},
{
    start: moment(start),
    allDay: true,
    rendering: 'background',
    className: 'fc-nonbusiness'
}

0
投票

完整日历包不提供满足此要求的内置解决方案。您可以按照此存储库的第一个问题和解决方案进行操作。

Vue 完整日历包 - 添加自定义假期

© www.soinside.com 2019 - 2024. All rights reserved.