Fullcalendar 事件侵入周视图的底行
Posted
技术标签:
【中文标题】Fullcalendar 事件侵入周视图的底行【英文标题】：Fullcalendar event invades bottom row on week view 【发布时间】：2021-11-24 09:04:18 【问题描述】：问题： 我在让事件只使用其中一行而不像现在这样侵入其他行时遇到问题：
目标： 我的意图是做单行事件，每一行只有一个事件，如下所示：
我尝试用 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>【问题讨论】：
【参考方案1】：问题在于您的活动都有相同的开始和结束时间。就 fullCalendar 而言，它们占用 0 分钟。就好像您根本没有指定 end 属性一样。
当然，这会使它们无法显示，因此 fullCalendar 为它们提供 1 小时的默认持续时间 - 这就是它们重叠到下一个插槽的原因。
要解决此问题，您可以：
-
为每个事件指定比开始时间晚 30 分钟的结束时间。
或者
-
将
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>【讨论】：
非常感谢！现在我知道如果我对事件有其他问题，我应该查阅文档的哪一部分。以上是关于Fullcalendar 事件侵入周视图的底行的主要内容，如果未能解决你的问题，请参考以下文章
隐藏 UIActivityViewController 中的底行
如何在 FullCalendar DayGrid 视图中更改事件元素的大小？