反应大日历15分钟事件

Question

我正在使用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 分钟。

我怎样才能实现这个目标？

Answer 1

我们可以尝试自定义日历的设置，并通过设置时间段和步骤属性来处理事件创建逻辑，以控制日历时段的粒度

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 分钟的事件