带有 React 的 FullCalendar

我终于完成了 Flatiron School 的期末项目！我为自己取得的进步感到无比自豪，但我仍然渴望学习更多——尤其是 CSS 和 UX/UI 设计。期末项目要求我们构建一个前端使用 React/Redux，后端使用 Rails API 的应用程序。不得不说，React 部分对我来说是迄今为止最有趣的。为了挑战自己，我决定学习如何将 FullCalendar 实现到我的宠物护理计划应用程序中。

为什么选择 FullCalendar

我知道我需要在我的应用中添加一个日历，但又不想浪费时间自己动手。很多课程都告诉我们，如果没有充分的理由，就不要重复造轮子。所以我开始研究，发现 FullCalendar 是一款非常流行的 JS 日历，功能丰富。我喜欢它加载和编辑事件的便捷性。在花了几个小时阅读文档和观看视频后，我决定尝试一下。

将 FullCalendar 导入 React

首先，我需要通过命令行安装 FullCalendar。

npm install --save @fullcalendar/react @fullcalendar/core @fullcalendar/daygrid @fullcalendar/interaction

然后，我必须将 FullCalendar 与通常导入的内容一起导入到我的组件中。

import React, { Component } from 'react'
import FullCalendar from '@fullcalendar/react'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from '@fullcalendar/interaction'

export default class Schedule extends Component {
  // declare any necessary functions such as handleDateClick, etc.

  render() {
    return <FullCalendar 
                    defaultView="dayGridMonth" 
                    plugins={[dayGridPlugin, interactionPlugin]}
                    editable={true}
                    eventDrop={this.handleEventDrop}
                    eventClick={this.handleEventClick}
                    events={this.formatEvents()}
                />
  }
}

注意：交互插件并非必需，但它可以实现与事件的交互（例如编辑和删除）。React 允许你使用所有常用的 FullCalendar 功能，这些只是我第一次尝试时为了保持简洁而选择的功能。你可以尽情尝试所有可能的功能！

FullCalendar React 文档

获取日历上的事件

FullCalendar 使用 events 属性来确定要渲染到日历上的内容。event 属性需要一个事件对象数组，其中包含 title、start 和可选的 end 键。它还有一个 extendedProps 键，用于发送事件，以及一些它不期望的键。为了在点击事件（eventClick 属性）时轻松访问事件信息，我将所需的所有信息都放在了 extendedProps 键下。

// ex. events={[{title: 'Appointment', start: '02-10-2020'}, {title: "", start: "03-05-2020"}]}

// events={this.formatEvents()}

formatEvents() {
  return this.props.appointments.map(appointment => {
            const {title, end, start} = appointment

            let startTime = new Date(start)
            let endTime = new Date(end)

            return {
              title, 
              start: startTime,
              end: endTime, 
              extendedProps: {...appointment}
            }
        })
}

编辑事件

使用 eventClick 和 eventDrop，用户可以轻松编辑事件。我使用 eventClick 打开一个表单，供用户查看和编辑有关该预约的任何信息。使用 eventDrop，当用户将预约拖到另一天时，可以编辑该预约，使其从该日期开始。

handleEventClick= ({event}) => {
    // openAppointment is a function I wrote to open a form to edit that appointment
    this.props.openAppointment(event.extendedProps)
}

handleEventDrop = (info) => {
        if(window.confirm("Are you sure you want to change the event date?")){
            console.log('change confirmed')

            // updateAppointment is another custom method
            this.props.updateAppointment({...info.event.extendedProps, start: info.event.start, end: info.event.end})

        } else {
            console.log('change aborted')
        }
   }

这些 FullCalendar 方法让更新和持久化数据变得非常容易。我计划进一步尝试 FullCalendar，以深入了解它的众多功能以及它在原生 JS 中的运作方式。

如果您有我尚未使用过的 FullCalendar 的喜爱功能，或者您在应用程序中使用的其他日历，请随时告诉我！:)

文章来源：https://dev.to/lberge17/fullcalendar-with-react-3hnl