FullCalendar简单的应用（新增，拖动，编辑事件）

大概效果：?

以 react 为例：

日历组件所需依赖： (Plugin Index - Docs | FullCalendar)

? ? "@fullcalendar/core": "^6.1.10",

? ? "@fullcalendar/daygrid": "^6.1.10",

? ? "@fullcalendar/interaction": "^6.1.10",

? ? "@fullcalendar/react": "^6.1.10",

安装以上依赖

npm install @fullcalendar/core?@fullcalendar/daygrid??@fullcalendar/interaction?@fullcalendar/react

引入依赖

import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';// 日历格子显示
import interactionPlugin from '@fullcalendar/interaction'; // 拖拽插件
import locale from '@fullcalendar/core/locales/zh-cn';// 中文

import { Form, Input, Modal } from 'antd';
import React, { Component } from 'react';

     <FullCalendar
          ref='fullcalendar'
          locale={locale} // 中文插件
          headerToolbar={{
            left: '',
            center: 'prev,title,next',
            right: '',
          }}
          dayHeaderFormat={(date, index) => {
            // 自定义 日历表头 周日 周一 可以改成其他的
            const week = Moment(date.date.marker).format('ddd');
            return week;
          }}
          firstDay={0} // 每周周几为开始日0周日 1周一 以此类推
          editable // false之后不可以拖拽
          selectable
          scroll
          weekMode='liquid'
          plugins={[dayGridPlugin, interactionPlugin]}
          initialView='dayGridMonth'
          showNonCurrentDates={false}
          eventContent={this.renderEventContent}
          dateClick={(info) => {
            // 单击某个日期
            this.showModal(info, 'date');
            this.setState({ selectDate: info.dateStr });
          }}
          select={(info) => {
            // 托选某几个日期
            this.showModal(info, 'range');
          }}
          eventClick={(info) => {
            // 事件被点击
            this.setState({
              isModalOpen: true,
              items: info.event.title,
              modalMsg: {
                id: info.event.id,
                allDay: info.event.allDay,
                startStr: info.event.startStr,
                endStr: info.event.endStr,
                dateStr: info.event.startStr,
                type: info.event.extendedProps.type,
              },
            });
            console.log(this.state.eventList);
          }}
          eventDrop={(eventDropInfo) => {
            // 事件被拖拽
            const { eventList,   } = this.state;
            if (eventDropInfo.event.id) {
              const eventListTemp = eventList.map((e) => {
                if (e.id === eventDropInfo.event.id) {
                  return {
                    ...e,
                    start: eventDropInfo.event.startStr,
                    end: eventDropInfo.event.endStr,
                  };
                }
                return e;
              });
              this.setState({
                eventList: eventListTemp,
              });
            }
          }}
          eventResize={(eventResizeInfo) => {
            // 事件变化 缩短或者 拉长了时间
            const { eventList } = this.state;
            if (eventResizeInfo.event.id) {
              const eventListTemp = eventList.map((e) => {
                if (e.id === eventResizeInfo.event.id) {
                  return {
                    ...e,
                    start: eventResizeInfo.event.startStr,
                    end: eventResizeInfo.event.endStr,
                  };
                }
                return e;
              });
              console.log(eventListTemp,'eventListTemp');

              this.setState({
                eventList: eventListTemp,
              });
            }
          }}
          events={this.state.eventList}
        />

?新增事件的模态框：（根据需求自定义）

        <Modal title='添加日历事项' visible={this.state.isModalOpen} onOk={this.handleOk} onCancel={this.handleCancel}>
          <p>
            选中时间： {this.state.modalMsg.dateStr}
            {this.state.modalMsg.endStr ? '~' + this.state.modalMsg.endStr : ''}
          </p>
          <Input
            addonBefore='添加日期事项'
            defaultValue='活动1'
            value={this.state.items}
            onChange={(e) => {
              this.setState({ items: e.target.value });
            }}
          />
        </Modal>

使用的事件：

 this.state = {
      eventList: [],
      isModalOpen: false,
      modalMsg: { type: 'date' },
      items: '',
    };

dateClick、select 事件打开模态框? （传入事件等等参数）

  showModal = (info, type) => {
    this.setState({ isModalOpen: true, modalMsg: { ...info, dateStr: info.startStr || info.dateStr, type } });
  };

事件模态框点击确定

  handleOk = () => {
    const { eventList, modalMsg, items } = this.state;
    console.log(modalMsg);
    if (modalMsg.id) {
      const eventListTemp = eventList.map((e) => {
        if (e.id === modalMsg.id) {
          return { ...e, title: items };
        }
        return e;
      });
      this.setState({
        eventList: eventListTemp,
      });
    } else {
      if (modalMsg.type === 'range') {
        this.setState({
          eventList: [
            ...eventList,
            {
              id: random(),
              title: items,
              start: modalMsg.startStr,
              end: modalMsg.endStr,
              allDay: true,
              type: modalMsg.type,
            },
          ],
        });
      } else {
        this.setState({
          eventList: [
            ...eventList,
            {
              title: items,
              start: modalMsg.dateStr,
              allDay: true,
              id: random(),
              type: modalMsg.type,
            },
          ],
        });
      }
    }
    console.log('eventList', this.state.eventList);
    this.setState({ isModalOpen: false, items: '', modalMsg: { type: 'date' } });
  };

模态框点击取消
?

  handleCancel = () => {
    this.setState({ isModalOpen: false, items: '', modalMsg: { type: 'date' } });
  };

?使用的属性解析：??

【locale】（Locale - Docs | FullCalendar）

选项用于定义本地化设置，以便使日历适应不同的语言和地区

1. 英语（美国）：'en' 或 'en-us'
2. 中文（简体中文）：'zh' 或 'zh-cn'
3. 法语：'fr' 或 'fr-fr'
4. 德语：'de' 或 'de-de'
5. 西班牙语（西班牙）：'es' 或 'es-es'
6. 日语：'ja' 或 'ja-jp'
7. 俄语：'ru' 或 'ru-ru'
8. 阿拉伯语：'ar' 或 'ar-sa'

【headerToolbar】

如果设置为false，则不显示头部信息。

1. left: 左侧区域的按钮和标题配置。
2. center: 中间区域的按钮和标题配置。
3. right: 右侧区域的按钮和标题配置。

每个区域的配置可以包含以下属性：

• prev: 切换到上一个日期或视图的按钮。
• next: 切换到下一个日期或视图的按钮。
• today: 切换到当前日期的按钮。
• title: 显示当前日期范围或视图名称的区域。
• prevYear: 切换到上一年的按钮。
• nextYear: 切换到下一年的按钮。
• prevMonth: 切换到上个月的按钮。
• nextMonth: 切换到下个月的按钮。
• dayGridMonth: 切换到月视图的按钮。
• timeGridWeek: 切换到周视图的按钮。
• timeGridDay: 切换到天视图的按钮。
• todayButton: 切换到今天的按钮。

【dayHeaderFormat】?

设置在天视图中每个天的列上显示的日期格式。可以自定义这些列头的文本格式，以适应你的需求。

以下是一些 dayHeaderFormat 的示例以及它们的含义：

• 'dd'：显示短格式的星期几（例如：周一、周二）。
• 'dddd'：显示完整的星期几名称（例如：星期一、星期二）。
• 'D'：显示天的数字，不带前导零（1、2、3）。
• 'DD'：显示天的数字，带前导零（01、02、03）。

也可以完全自定义

         dayHeaderFormat={(date, index) => {
            // 自定义 日历表头 周日 周一 可以改成其他的
            const week = Moment(date.date.marker).format('ddd');
            return week;
          }}

【weekMode】

在月视图里显示周的模式，因为每月周数可能不同，所以月视图高度不一定。

• fixed：固定显示6周高，日历高度保持不变
• liquid：不固定周数，高度随周数变化
• variable：不固定周数，但高度固定

【initialView】

?默认为哪个视图

• 月：dayGridMonth?
• 周：timeGridWeek?
• 日：timeGridDay?

?

【showNonCurrentDates】

属性为true，即非当前月份的日期会显示出来。如果将showNonCurrentDates属性设置为false，则非当前月份的日期将不会显示。?

【dateClick】?

dateClick是fullcalendar插件中的一个事件，当用户点击日历中的某个日期时触发?

          dateClick={(info) => {
            // 单击某个日期
 
          }}

【select】

用于表示用户选择了日期范围的操作

          select={(info) => {
            // 托选某几个日期
            this.showModal(info, 'range');
          }}

?【eventClick】

用于表示用户点击了事件的操作

          eventClick={(info) => {
            // 事件被点击
        
          }}

?【eventDrop】表示拖动事件

          eventDrop={(eventDropInfo) => {
            // 事件被拖拽
   
          }}