我正在使用react-big-calendar,虽然它工作得很好,但我被困住了。
我希望能够在用户单击单元格时添加 15 分钟的事件。无论我尝试过什么设置,我都无法让时间少于 30 分钟。
基本上,设置 timeslot=1,steps=15 会使日历在左侧显示小时,如下所示:9:00AM、9:30AM、10:00AM、10:30AM,并且只有一个时段。单击一天时可以添加的事件默认为 30 分钟。如果我强制结束时间为 15 分钟,则没有区别,因为事件将在 9:00 或 9:30 添加。
添加 timeslots=4 和 steps=15 会使日历“缩小”,并且时间显示为 08:00AM(有 4 个时间段),然后是 10:00AM,依此类推。
我想要 9:00、9:15、9:30、9:45,并且能够单击并将事件时间默认为 15 分钟。
我怎样才能实现这个目标?
我们可以尝试自定义日历的设置,并通过设置时间段和步骤属性来处理事件创建逻辑,以控制日历时段的粒度
import React from 'react';
import { Calendar, momentLocalizer } from 'react-big-calendar';
import moment from 'moment';
const localizer = momentLocalizer(moment);
const MyCalendar = () => {
return (
<Calendar
localizer={localizer}
timeslots={4}
step={15}
style={{ height: 500 }}
/>
);
};
export default MyCalendar;
然后我们可以使用 onSelectSlot 方法来处理用户点击并创建 15 分钟的事件
import React, { useState } from 'react';
import { Calendar, momentLocalizer } from 'react-big-calendar';
import moment from 'moment';
const localizer = momentLocalizer(moment);
const MyCalendar = () => {
const [events, setEvents] = useState([]);
const handleSelectSlot = (slotInfo) => {
const startTime = new Date(slotInfo.start);
startTime.setMinutes(startTime.getMinutes() - startTime.getMinutes() % 15);
const endTime = new Date(startTime.getTime());
endTime.setMinutes(endTime.getMinutes() + 15);
const newEvent = {
title: 'New Event',
start: startTime,
end: endTime,
};
setEvents([...events, newEvent]);
};
return (
<Calendar
localizer={localizer}
timeslots={4}
step={15}
style={{ height: 500 }}
events={events}
onSelectSlot={handleSelectSlot}
/>
);
};
export default MyCalendar;
我认为现在应该允许在用户单击日历中的单元格时创建 15 分钟的事件