Fullcalendar周视图事件侵占底部行 如何实现单一行事件正常展示

问题根因 #

1. 现有事件配置存在错误：事件start与end时间完全相同，被Fullcalendar判定为零时长事件，导致布局计算异常
2. 未开启堆叠数量限制配置，默认允许同时间槽事件并排展示，触发自动右偏移逻辑
3. 原有CSS错误修改了事件定位属性，打乱了Fullcalendar内置的布局计算规则

具体修改步骤 #

1. 修正事件时长配置：确保每个事件的end时间晚于start时间，或正确设置duration属性为时长值（如00:30:00）
2. 新增Fullcalendar核心配置：
   • 开启slotEventOverlap: false禁止事件重叠
   • 新增eventMaxStack: 1限制同时间区间最多堆叠1个事件，从根源取消右偏移逻辑
   • 统一设置slotHeight与事件高度适配，避免事件侵占其他行
3. 修正CSS样式，覆盖默认的inset偏移配置，适配行高

完整可运行代码 #

HTML #

<link href="https://cdn.jsdelivr.net/npm/fullcalendar@5.9.0/main.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.9.0/main.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="calendario"></div>

CSS #

/* 取消事件自动右偏移 */
.fc-timegrid-event-harness {
    inset: 0 0 0 0 !important;
    width: 100% !important;
    height: 34px !important;
}
/* 事件内部样式适配 */
.fc-timegrid-event {
    margin: 0 !important;
    height: 100% !important;
}
.fc-timegrid-event .fc-event-main {
    line-height: 30px;
    padding: 0 4px;
}
/* 时间槽行高适配 */
.fc-timegrid-slot {
    height: 40px !important;
}

JavaScript #

document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendario');
    var calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'dayGridMonth',
        timeZone: 'America/Guayaquil',
        headerToolbar: {
            start: 'today prev,next',
            center: 'title',
            end: 'dayGridMonth,timeGridWeek,listDay'
        },
        views: {
            timeGrid: {
                type: 'timeGrid',
                slotEventOverlap: false, // 禁止事件重叠
                eventMaxStack: 1, // 限制最多堆叠1个事件
                slotHeight: 40, // 时间槽高度和CSS适配
                eventMinHeight: 34, // 事件最小高度
                displayEventEnd: true,
                duration: { days: 7 },
                allDaySlot: false,
                slotDuration: '00:30:00',
                slotLabelFormat: {
                    hour: 'numeric',
                    minute: '2-digit',
                    hour12: false,
                    meridiem: false
                },
                slotLabelInterval: '00:30:00', 
                slotMinTime: '07:00:00',
                slotMaxTime: '18:30:00',
                expandRows: true,
                buttonText: 'Semana',
                nowIndicator: true,
            }
        },

        //Funciones
        dateClick: function(info){
            alert('Dia seleccionado: ' + info.dateStr);
            alert('Vista Actual: ' + info.view.type);
            info.dayEl.style.backgroundColor = '#F2F2F2';

            // 原代码中的cFormAñadir为自定义方法，按需保留
            // cFormAñadir('añadir', 'abrir');
        },

        //Eventos
        eventSources: [{
            events: [
                {
                    title: 'Consulta ginecologia',
                    start: '2021-10-05T14:00:00',
                    end: '2021-10-05T14:30:00', // 修正为正确的结束时间
                    allDay: false,
                    color: "#ed4245",
                    textColor: "#FFFFFF",
                    forceEventDuration: true
                },
                {
                    title: 'Consulta obstetricia',
                    start: '2021-10-05T13:00:00',
                    end: '2021-10-05T13:30:00', // 修正为正确的结束时间
                    allDay: false,
                    color: "#3AA95E",
                    textColor: "#FFFFFF"
                },
                {
                    title: 'Ecocardiograma',
                    start: '2021-10-05T13:30:00',
                    end: '2021-10-05T14:00:00', // 修正为正确的结束时间
                    allDay: false
                },
                {
                    title: 'Consulta obstetricia2',
                    start: '2021-10-06T13:00:00',
                    end: '2021-10-06T13:30:00', // 修正为正确的结束时间
                    allDay: false,
                    color: "#3AA95E",
                    textColor: "#FFFFFF"
                },
            ],
            color: "#FAA61A",
            textColor: "#FFFFFF"
        }]
        
    });
    calendar.render();
});

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