如何将FullCalendar两个时间段配置合并到同一日历渲染？

你不能通过创建两个绑定到同一DOM的日历实例来实现需求——第二个实例渲染时会完全覆盖第一个实例的内容，每个DOM元素只能绑定一个FullCalendar实例。

要在同一个日历中显示10:30-12:00和14:30-19:00两个不连续时段，有两种可行方案：

方案一：利用FullCalendar内置时段控制功能 #

设置日历整体时间范围为最早到最晚的时间（10:30至19:00），通过businessHours定义有效时段，再用slotHiddenCallback隐藏非工作时段的时间槽：

$(document).on('click', '.dad-visita', function(){
    const initialViews = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) 
        ? 'timeGridWeek' 
        : 'timeGridWeek';

    const calendarEl = document.getElementById('calendario');
    const today = moment().day();

    const calendar = new FullCalendar.Calendar(calendarEl, {
        headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay'
        },
        locale: "pt-br",
        buttonText:{
            today:    'Hoje',
            list:     'Lista'
        },
        navLinks: true,             
        firstDay: today,
        hiddenDays: [ 0 ],
        initialView: initialViews,
        editable: true,
        selectable: true, 
        unselectAuto:true,
        eventOverlap: false,
        eventColor: '#f16621', 
        slotDuration: '00:45',
        allDaySlot : false,
        eventStartEditable: false,
        eventDurationEditable:false,
        longPressDelay: 0,
        nowIndicator: "true",
        // 设置日历整体时间范围
        slotMinTime: '10:30',
        slotMaxTime: '19:00',
        contentHeight: 'auto',
        // 定义两个有效工作时段
        businessHours: [
            {
                start: '10:30',
                end: '12:00'
            },
            {
                start: '14:30',
                end: '19:00'
            }
        ],
        // 隐藏12:00-14:30之间的时间槽
        slotHiddenCallback: function(slotInfo) {
            const slotTime = slotInfo.start;
            const hour = slotTime.hour();
            const minute = slotTime.minute();
            return (hour >= 12 && hour <14) || (hour ===14 && minute <30);
        }
    });

    calendar.render();
});

方案二：自定义CSS隐藏中间时段 #

同样设置日历整体时间范围为10:30-19:00，通过CSS选择器定位并隐藏12:00-14:30对应的时间槽元素：

/* 根据实际DOM结构调整选择器，隐藏目标时段的时间槽 */
.fc-timegrid-slot[data-time="12:00"],
.fc-timegrid-slot[data-time="12:45"],
.fc-timegrid-slot[data-time="13:30"],
.fc-timegrid-slot[data-time="14:15"] {
    display: none;
}

对应的JavaScript代码只需合并为一个日历实例，设置slotMinTime: '10:30'和slotMaxTime: '19:00'即可，无需额外的时段回调逻辑。

内容的提问来源于stack exchange，提问作者Bruno