FullCalendar的使用，react日历组件

news2024/10/1 21:25:17

1.下载

yarn add @fullcalendar/core @fullcalendar/react @fullcalendar/daygrid

2.运行

import React from 'react';
import FullCalendar from "@fullcalendar/react";
import dayGridPlugin from "@fullcalendar/daygrid";

const ExperimentalSchedule = () => {

  return (
    <>
          <FullCalendar
          height={500} // 此处高度为方便截图，可不设置
          defaultView="dayGridMonth"
          plugins={[dayGridPlugin]}
        />
    </>
  );
};

export default ExperimentalSchedule;

3.右上角需要，日周月

yarn add @fullcalendar/timegrid

 <FullCalendar
          defaultView="dayGridMonth"
          plugins={[dayGridPlugin, timeGridPlugin]}
          headerToolbar={{
            left: "prevYear,prev,next,nextYear today", // 上一年，上一月，下一月，下一年 今天
            center: "title", // 当前年月
            right: "timeGridDay,timeGridWeek,dayGridMonth" // 天 周 月
          }}
        />

4.汉化，locale='zh-cn'

 <FullCalendar
          defaultView="dayGridMonth"
          plugins={[dayGridPlugin, timeGridPlugin]}
          headerToolbar={{
            left: "prevYear,prev,next,nextYear today", // 上一年，上一月，下一月，下一年 今天
            center: "title", // 当前年月
            right: "timeGridDay,timeGridWeek,dayGridMonth" // 天 周 月
          }}
          locale='zh-cn'
          buttonText={{
            today: '今天',
            month: '月',
            week: '周',
            day: '天'
          }}
          allDayText='全天'
        />

5.修改，周一开头，时间修改为24小时制

 <FullCalendar
          defaultView="dayGridMonth"
          plugins={[dayGridPlugin, timeGridPlugin]}
          headerToolbar={{
            left: "prevYear,prev,next,nextYear today", // 上一年，上一月，下一月，下一年 今天
            center: "title", // 当前年月
            right: "timeGridDay,timeGridWeek,dayGridMonth" // 天 周 月
          }}
          locale='zh-cn'
          buttonText={{
            today: '今天',
            month: '月',
            week: '周',
            day: '天'
          }}
          allDayText='全天'
          firstDay={1} // 周一至周六为1～6，周日为0，喜欢周几开始就填几
          slotLabelFormat={{
            hour: '2-digit',
            minute: '2-digit',
            meridiem: false,
            hour12: false
          }}
        />

6.创建循环任务和单独任务

import React, { useEffect, useState } from 'react';
import FullCalendar from "@fullcalendar/react";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";


const ExperimentalSchedule = () => {
  let matchList = [
    {
      id: '1',
      name: '第一个任务',
      startTime: "2024-07-09 13:22:05",
      endTime: "2024-07-09 15:38:05",
      repeatExecute: false,
    },
    {
      id: '2',
      name: '第二个任务',
      startTime: "2024-07-13 09:45:23",
      endTime: "2024-07-13 15:10:23",
      repeatExecute: false,
    },
    {
      id: '3',
      name: '第三个任务',
      startTime: "2024-07-20 19:37:18",
      endTime: "2024-07-20 19:43:18",
      repeatExecute: false,
    },
    {
      id: '4',
      name: '第四个任务',
      startTime: "2024-07-25 14:49:05",
      endTime: "2024-07-25 03:15:05",
      repeatExecute: false,
    },
  ];

  let repeatMatchList = [
    {
      id: '5',
      name: '每周一，周三重复任务',
      startDate: "2024-07-09", // 任务创建于12月10日
      startTime: "09:10:00", // 每次任务的开始时间
      endTime: "17:30:23", // 每次任务的结束时间
      repeatDates: ["星期一", "星期三"],
      repeatExecute: true,
    },
    {
      id: '6',
      name: '每周二重复任务',
      startDate: "2024-07-09", // 任务创建于12月2日
      startTime: "15:10:00", // 每次任务的开始时间
      endTime: "17:30:23", // 每次任务的结束时间
      repeatDates: ["星期二"],
      repeatExecute: true,
    }
  ];
  const formartRepeat = (value) => {
    switch (value) {
      case '星期一':
        value = 1;
        break;
      case '星期二':
        value = 2;
        break;
      case '星期三':
        value = 3;
        break;
      case '星期四':
        value = 4;
        break;
      case '星期五':
        value = 5;
        break;
      case '星期六':
        value = 6;
        break;
      case '星期日':
        value = 0;
        break;
    }
    return value;
  }
  const [events, setEvents] = useState([]);
  useEffect(() => {
    // 准备事件数据
    const preparedEvents = (list) => {
      return list.map(({ id, name, startTime, endTime, repeatExecute, repeatDates, startDate }) => {
        let event = {
          id,
          title: name,
          start: repeatExecute ? `${startDate}T${startTime}` : startTime, // 格式化时间
          end: repeatExecute ? `${startDate}T${endTime}` : endTime, // 格式化时间
          borderColor: repeatExecute ? 'black' : 'red',
        };

        if (repeatExecute) {
          event.daysOfWeek = repeatDates.map(formartRepeat); // 设置星期几重复
          event.startRecur = startDate; // 重复开始日期
        }

        return event;
      });
    };

    const formattedEvents = [...preparedEvents(matchList), ...preparedEvents(repeatMatchList)];
    setEvents(formattedEvents);
  }, []);
  const  eventClick = (eventInfo) => {
    console.log(eventInfo.event);
  }
  return (
    <>
 <FullCalendar
          defaultView="dayGridMonth"
          plugins={[dayGridPlugin, timeGridPlugin]}
          headerToolbar={{
            left: "prevYear,prev,next,nextYear today", // 上一年，上一月，下一月，下一年 今天
            center: "title", // 当前年月
            right: "timeGridDay,timeGridWeek,dayGridMonth" // 天 周 月
          }}
          locale='zh-cn'
          buttonText={{
            today: '今天',
            month: '月',
            week: '周',
            day: '天'
          }}
          allDayText='全天'
          firstDay={1} // 周一至周六为1～6，周日为0，喜欢周几开始就填几
          slotLabelFormat={{
            hour: '2-digit',
            minute: '2-digit',
            meridiem: false,
            hour12: false
          }}
          events={events}
          eventClick={eventClick}
        />
    </>
  );
};

export default ExperimentalSchedule;

7.如果想让月视图的任务既显示开始时间又显示结束时间，加一个属性：