像学校时间表一样对FullCalendar的制定做出反应
像学校时间表一样对FullCalendar的制定做出反应
提问于 2022-09-18 23:05:19
我正在为我的学校开发一个应用程序，就像一个调度器，但也是为老师们准备的。我想要这样的东西：
我正在为我的应用程序和FullCalendar组件使用React。我的组件配置如下：
<FullCalendar
weekends={false}
editable
droppable
selectable
events={events}
ref={calendarRef}
rerenderDelay={10}
initialDate={date}
initialView={view}
dayMaxEventRows={30}
eventDisplay="block"
headerToolbar={false}
allDayMaintainDuration
eventResizableFromStart
select={handleSelectRange}
eventDrop={handleDropEvent}
eventClick={handleSelectEvent}
eventResize={handleResizeEvent}
height={isDesktop ? 720 : 'auto'}
plugins={[listPlugin, dayGridPlugin, timelinePlugin, timeGridPlugin, interactionPlugin]}
slotMinTime="8:00:00"
slotMaxTime="19:00:00"
displayEventTime={false}
/>但是，我不知道是否可以删除“小时”第一列，并将每个事件作为一个分隔的组件，并使用箭头表示展开。我需要在每一件事上写一些文字(有时是一篇长文)，每周都有自己的课文。当然，所有数据都保存到mongo数据库中。现在，我的组件如下所示：
你知道是否有什么方法或方法可以使事件在没有持续时间的情况下堆叠起来，并且适合内容标题，然后扩展它？我并不是固定在FullCalendar组件上，我可以使用其他组件(如果它可以满足我的需要)，但是我需要节省每周的时间。
提前谢谢。
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-09-20 08:16:30
为此，您可以在fullCalendar中使用“fullCalendar”视图。
上面提到了在这里的文档中，那里也有一个现场演示，向您展示它的样子。
随着eventDisplay设置的另一个小调整，它开始看起来类似于您的屏幕截图。
就像这样：
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: "dayGridWeek",
eventDisplay: "block",
headerToolbar: {
left: "prev,next today",
center: "title",
right: "dayGridWeek,timeGridWeek"
},...etc。演示：https://codepen.io/ADyson82/pen/KKRqaJe
当然，如果您愿意，那么您可以添加您自己的进一步定制，使用完全日历的事件呈现钩子更改事件的外观。
我不是一个React用户，所以我的演示程序使用了普通的JS，但是您可以通过React语法获得完全相同的结果。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73766938
复制相关文章
相似问题
腾讯云开发者
