Fullcalendar 事件侵入周视图的底行

Question

问题： 我在让事件只使用其中一行而不像现在这样侵入其他行时遇到问题：

目标： 我的意图是做单行事件，每一行只有一个事件，如下所示：

我尝试用 css 来做，但是 fullcalendar 将事件向右移动，并且没有 ccs 标签标识它能够用 css 移动它，而是使用 inset，我真的不明白如何实现它。

有两种选择：

• 找到一种方法让行适应事件的大小。

• 以某种方式将 fullcalendar 向右移动的事件移动。

问题是我的知识很少，我不知道该怎么做。

精简事件的代码：

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,
                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('añadir', 'abrir');
        },

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

.fc-timegrid-col-events .fc-timegrid-event-harness{
    height: 34px!important;
    width: 100%!important;
}
.fc-timegrid-event-harness .fc-timegrid-event {
    position: static;
}
.fc-timegrid-event-harness .fc-timegrid-event .fc-event-main {
    line-height: 15px;
}

<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>

Answer 1

问题在于您的活动都有相同的开始和结束时间。就 fullCalendar 而言，它们占用 0 分钟。就好像您根本没有指定 end 属性一样。

当然，这会使它们无法显示，因此 fullCalendar 为它们提供 1 小时的默认持续时间 - 这就是它们重叠到下一个插槽的原因。

要解决此问题，您可以：

1. 为每个事件指定比开始时间晚 30 分钟的结束时间。

或者

1. 将 defaultTimedEventDuration 从 1 小时（默认值）更改为 30 分钟，正如我在下面的演示中所做的那样。

在任何一种情况下，都不需要您的自定义 CSS。

文档：https://fullcalendar.io/docs/defaultTimedEventDuration

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'
        },
        defaultTimedEventDuration: "00:30",
        initialView: "timeGridWeek",
        views: {
            timeGrid: {
                type: 'timeGrid',
                //slotEventOverlap: false,
                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('añadir', 'abrir');
        },

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

<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>

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