FullCalendar 是一个强大的日历插件，支持多种视图，包括日历视图、时间视图、列表视图等。它还支持事件管理、拖拽、缩放等功能。本文将详细介绍 FullCalendar 的使用方法。

丰富的API，可以满足各种需求
支持多种视图，如月视图、周视图、日视图等
支持多种插件，如时间轴、拖拽、弹出框等
支持多种事件，如事件拖拽、事件缩放、事件点击等
支持多种交互，如事件编辑、事件删除、事件添加等
支持多种主题，如Bootstrap、Material Design等
支持多种语言，如中文、英文、日文等

1. 安装

npm install fullcalendar

2. 引入

import FullCalendar from '@fullcalendar/react'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from '@fullcalendar/interaction'

3. 使用

<FullCalendar
  plugins={[dayGridPlugin, interactionPlugin]}
/>

4. 配置

<FullCalendar
  plugins={[dayGridPlugin, interactionPlugin]}
  initialView="dayGridMonth"
  headerToolbar={{
    start: 'prev,next today',
    center: 'title',
    end: 'dayGridMonth,timeGridWeek,timeGridDay'
  }
}}

5. FullCalendar常用插件

名称	说明
croe	核心插件
iteraction	交互插件
daygrid	日历视图插件
timegrid	时间视图插件
list	列表视插件
multimount	多视图插件
scrollgrid	滚动视图插件
timeline	时间线视图插件
react	React插件
vue	Vue插件
vue3	Vue3插件
angular	Angular插件

6. FullCalendar常用属性

名称	说明
plugins	插件列表
initialView	初始视图
headerToolbar	头部工具栏
events	事件列表
eventClick	事件点击事件
eventDidMount	事件挂载事件
eventMouseEnter	事件鼠标进入事件
eventMouseLeave	事件鼠标离开事件
eventDragStart	事件拖拽开始事件

7. FullCalendar常用方法

名称	说明
getApi	获取FullCalendar实例
prev	上一视图
next	下一视图
today	回到今天
changeView	切换视图
addEventSource	添加事件源
removeEventSource	移除事件源
rerenderEvents	重新渲染事件

8. FullCalendar常用API方法

8.1. 基本使用

import FullCalendar from '@fullcalendar/react'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from '@fullcalendar/interaction'

const events = [
  {
    title: '事件1',
    start: '2021-01-01',
    end: '2021-01-02'
  },
  {
    title: '事件2',
    start: '2021-01-03',
    end: '2021-01-04'
  }
]

const handleEventClick = (info) => {
  console.log(info.event.title)
}

const handleEventDidMount = (info) => {
  console.log(info.event.title)
}

const handleEventMouseEnter = (info) => {
  console.log(info.event.title)
}

const handleEventMouseLeave = (info) => {
  console.log(info.event.title)
}

const handleEventDragStart = (info) => {
  console.log(info.event.title)
}


<FullCalendar
  plugins={[dayGridPlugin, interactionPlugin]}
  initialView="dayGridMonth"
  headerToolbar={{
    start: 'prev,next today',
    center: 'title',
    end: 'dayGridMonth,timeGridWeek,timeGridDay'
  }}
  events={events}
  eventClick={handleEventClick}
  eventDidMount={handleEventDidMount}
}
  eventMouseEnter={handleEventMouseEnter}
  eventMouseLeave={handleEventMouseLeave}
  eventDragStart={handleEventDragStart}
/>

8.2 跳转下个月/周/日

const calendarRef = useRef(null)

const handleNext = () => {
  calendarRef.current.getApi().next()
}

return (
  <div>
    <button onClick={handleNext}>下一月</button>
    <FullCalendar
      ref={calendarRef}
      plugins={[dayGridPlugin, interactionPlugin]}
      initialView="dayGridMonth"
      headerToolbar={{
        start: 'prev,next today',
        center: 'title',
        end: 'dayGridMonth,timeGridWeek,timeGridDay'
      }}
    />
  </div>
)

8.3 跳转上个月/周/日

const calendarRef = useRef(null)

const handlePrev = () => {
  calendarRef.current.getApi().prev()
}

return (
  <div>
    <button onClick={handlePrev}>上一月</button>
    <FullCalendar
      ref={calendarRef}
      plugins={[dayGridPlugin, interactionPlugin]}
      initialView="dayGridMonth"
      headerToolbar={{
        start: 'prev,next today',
        center: 'title',
        end: 'dayGridMonth,timeGridWeek,timeGridDay'
      }}
    />
  </div>
)

8.4 跳转到今天

const calendarRef = useRef(null)

const handleToday = () => {
  calendarRef.current.getApi().today()
}

return (
  <div>
    <button onClick={handleToday}>回到今天</button>
    <FullCalendar
      ref={calendarRef}
      plugins={[dayGridPlugin, interactionPlugin]}
      initialView="dayGridMonth"
      headerToolbar={{
        start: 'prev,next today',
        center: 'title',
        end: 'dayGridMonth,timeGridWeek,timeGridDay'
      }}
    />
  </div>
)

8.5 跳转到指定日期

const calendarRef = useRef(null)

const handleGoTo = () => {
  calendarRef.current.getApi().gotoDate('2021-01-01'); // 日期格式为 'YYYY-MM-DD'
}

return (
  <div>
    <button onClick={handleGoTo}>跳转到指定日期</button>
    <FullCalendar
      ref={calendarRef}
      plugins={[dayGridPlugin, interactionPlugin]}
      initialView="dayGridMonth"
      headerToolbar={{s
        start: 'prev,next today',
        center: 'title',
        end: 'dayGridMonth,timeGridWeek,timeGridDay'
      }}
    />
  </div>
)

8.6 获取当前视图起始日期和结束日期

const calendarRef = useRef(null)

const handleGetDates = () => {
  const api = calendarRef.current.getApi()
  const start = api.view.currentStart
  const end = api.view.currentEnd
  console.log(start, end)
}

return (
  <div>
    <button onClick={handleGetDates}>获取当前视图起始日期和结束日期</button>
    <FullCalendar
      ref={calendarRef}
      plugins={[dayGridPlugin, interactionPlugin]}
      initialView="dayGridMonth"
      headerToolbar={{
        start: 'prev,next today',
        center: 'title',
        end: 'dayGridMonth,timeGridWeek,timeGridDay'
}
      }}
    />
  </div>
)

8.7 获取当前视图类型

const calendarRef = useRef(null)

const handleGetViewType = () => {
  const api = calendarRef.current.getApi()
  const viewType = api.view.type
  console.log(viewType) // 例如：dayGridMonth, timeGridWeek, timeGridDay
}

return (
  <div>
    <button onClick={handleGetViewType}>获取当前视图类型</button>
    <FullCalendar
      ref={calendarRef}
      plugins={[dayGridPlugin, interactionPlugin]}
      initialView="dayGridMonth"
      headerToolbar={{
        start: 'prev,next today',
        center: 'title',
        end: 'dayGridMonth,timeGridWeek,timeGridDay'
      }}
    />
  </div>
)

8.8 获取当前视图的参数

const calendarRef = useRef(null)

const handleGetViewOptions = () => {
  const api = calendarRef.current.getApi()
  const viewOptions = api.view
  console.log(viewOptions)
}

return (
  <div>
    <button onClick={handleGetViewOptions}>获取当前视图的参数</button>
    <FullCalendar
      ref={calendarRef}
      plugins={[dayGridPlugin, interactionPlugin]}
      initialView="dayGridMonth"
      headerToolbar={{
        start: 'prev,next today',
        center: 'title',
        end: 'dayGridMonth,timeGridWeek,timeGridDay'
      }}
    />
  </div>
)

8.9 获取当前视图所有事件

const calendarRef = useRef(null)

const handleGetEvents = () => {
  const api = calendarRef.current.getApi()
  const events = api.getEvents()
  console.log(events)
}

return (
  <div>
    <button onClick={handleGetEvents}>获取当前视图所有事件</button>
    <FullCalendar
      ref={calendarRef}
      plugins={[dayGridPlugin, interactionPlugin]}
      initialView="dayGridMonth"
      headerToolbar={{
        start: 'prev,next today',
        center: 'title',
        end: 'dayGridMonth,timeGridWeek,timeGridDay'
}
      }}
    />
  </div>
)

8.10 添加事件

const calendarRef = useRef(null)

const handleAddEvent = () => {
  const api = calendarRef.current.getApi()
  api.addEvent({
    title: '新事件',
    start: '2021-01-01',
    end: '2021-01-02',
    allDay: true
  })
}

return (
  <div>
    <button onClick={handleAddEvent}>添加事件</button>
    <FullCalendar
      ref={calendarRef}
      plugins={[dayGridPlugin, interactionPlugin]}
      initialView="dayGridMonth"
      headerToolbar={{
        start: 'prev,next today',
        center: 'title',
        end: 'dayGridMonth,timeGridWeek,timeGridDay'
      }}
    />
  </div>
)

8.11 删除事件

const calendarRef = useRef(null)

const handleDeleteEvent = () => {
  const api = calendarRef.current.getApi()
  const events = api.getEvents()
  if (events.length > 0) {
    events[0].remove()
  }
}

return (
  <div>
    <button onClick={handleDeleteEvent}>删除事件</button>
    <FullCalendar
      ref={calendarRef}
      plugins={[dayGridPlugin, interactionPlugin]}
      initialView="dayGridMonth"
      headerToolbar={{
        start: 'prev,next today',
        center: 'title',
        end: 'dayGridMonth,timeGridWeek,timeGridDay'
      }}
    />
  </div>
)

8.12 更新事件

const calendarRef = useRef(null)

const handleUpdateEvent = () => {
  const api = calendarRef.current.getApi()
  const events = api.getEvents()
  if (events.length > 0) {
    events[0].setDates('2021-01-02', '2021-01-03')
  }
}

return (
  <div>
    <button onClick={handleUpdateEvent}>更新事件</button>
    <FullCalendar
  ref={calendarRef}
      plugins={[dayGridPlugin, interactionPlugin]}
      initialView="dayGridMonth"
      headerToolbar={{
        start: 'prev,next today',
        center: 'title',
        end: 'dayGridMonth,timeGridWeek,timeGridDay'
      }}
    />
  </div>
)

8.13 修改事件属性如颜色等

const calendarRef = useRef(null)

const handleUpdateEventColor = () => {
  const api = calendarRef.current.getApi()
  const events = api.getEvents()
  if (events.length > 0) {
    events[0].setProp('backgroundColor', 'red')
  }
}

return (
  <div>
    <button onClick={handleUpdateEventColor}>修改事件颜色</button>
    <FullCalendar
      ref={calendarRef}
      plugins={[dayGridPlugin, interactionPlugin]}
      initialView="dayGridMonth"
      headerToolbar={{
        start: 'prev,next today',
        center: 'title',
        end: 'dayGridMonth,timeGridWeek,timeGridDay'
      }}
    />
  </div>
)

8.14 自定义prev、next、 today按钮等 customButtons

const calendarRef = useRef(null)

const handleCustomButtons = () => {
  const api = calendarRef.current.getApi()
  api.addEvent({
    title: '新事件',
    start: '2021-01-01',
    end: '2021-01-02',
    allDay: true
  })
}

return (
  <div>
    <button onClick={handleCustomButtons}>自定义prev、next、 today按钮等</button>
    <FullCalendar
      ref={calendarRef}
      plugins={[dayGridPlugin, interactionPlugin]}
      initialView="dayGridMonth"
      headerToolbar={{
        start: 'myPrev,MyNext MyToday myCustomButton',
        center: 'title',
        end: 'dayGridMonth,timeGridWeek,timeGridDay'
      }}
      customButtons={{
        myCustomButton: {
          text: '自定义按钮',
          icon: 'fa fa-plus',
          click: function () {
            alert('自定义按钮被点击了')
          }
        },
        myToday: {
          text: '今天',
          icon: 'fa fa-calendar',
          click: function () {
            alert('今天被点击了')
          }
        },
        myPrev: {
          text: '上个月',
          icon: 'fa fa-chevron-left',
          click: function () {
            alert('上个月被点击了')
          }
        },
        myNext: {
          text: '下个月',
          icon: 'fa fa-chevron-right',
          click: function () {
            alert('下个月被点击了')
          }
        }}
      }}
    />
  </div>
)

8.15 配置 calendarOptions 单元格slotDuration属性

const calendarRef = useRef(null)

return (
  <div>
    <FullCalendar
      ref={calendarRef}
      plugins={[dayGridPlugin, interactionPlugin]}
      initialView="dayGridMonth"
      headerToolbar={{
        start: 'prev,next today',
        center: 'title',
        end: 'dayGridMonth,timeGridWeek,timeGridDay'
      }}
      slotDuration="00:30:00"
    />
  </div>
)

8.16 FullCalendar组件国际化

const calendarRef = useRef(null)

return (
  <div>
    <FullCalendar
      ref={calendarRef}
      plugins={[dayGridPlugin, interactionPlugin]}
      initialView="dayGridMonth"
      headerToolbar={{
        start: 'prev,next today',
        center: 'title',
        end: 'dayGridMonth,timeGridWeek,timeGridDay'
      }}
      locale="zh-cn"
    />
  </div>
)

8.17 FullCalendar组件 eventDrop事件

const calendarRef = useRef(null)

const handleEventDrop = (info) => {
  console.log(info)
}

const handleEventResize = (info) => {
  console.log(info)
}

const handleEventClick = (info) => {
  console.log(info)
}

return (
  <div>
    <FullCalendar
      ref={calendarRef}
      plugins={[dayGridPlugin, interactionPlugin]}
      initialView="dayGridMonth"
      headerToolbar={{
        start: 'prev,next today',
        center: 'title',
        end: 'dayGridMonth,timeGridWeek,timeGridDay'
      }}
      eventDrop={handleEventDrop}
      eventResize={handleEventResize}
      eventClick={handleEventClick}
    />
  </div>
)

8.18 FullCalendar组件鼠标事件

const calendarRef = useRef(null)

const handleEventMouseEnter = (info) => {
  console.log(info)
}

const handleEventMouseLeave = (info) => {
  console.log(info)
}

return (
  <div>
    <FullCalendar
      ref={calendarRef}
      plugins={[dayGridPlugin, interactionPlugin]}
      initialView="dayGridMonth"
      headerToolbar={{
        start: 'prev,next today',
        center: 'title',
        end: 'dayGridMonth,timeGridWeek,timeGridDay'
      }}
      eventMouseEnter={handleEventMouseEnter}
      eventMouseLeave={handleEventMouseLeave}
    />
  </div>
)

原文链接：https://code.ifrontend.net/archives/316，转载请注明出处。

FullCalendar 日历插件的使用详解

1. 安装

2. 引入

3. 使用

4. 配置

5. FullCalendar常用插件

6. FullCalendar常用属性

7. FullCalendar常用方法

8. FullCalendar常用API方法

8.1. 基本使用

8.2 跳转下个月/周/日

8.3 跳转上个月/周/日

8.4 跳转到今天

8.5 跳转到指定日期

8.6 获取当前视图起始日期和结束日期

8.7 获取当前视图类型

8.8 获取当前视图的参数

8.9 获取当前视图所有事件

8.10 添加事件

8.11 删除事件

8.12 更新事件

8.13 修改事件属性如颜色等

8.14 自定义prev、next、 today按钮等 customButtons

8.15 配置 calendarOptions 单元格slotDuration属性

8.16 FullCalendar组件国际化

8.17 FullCalendar组件 eventDrop事件

8.18 FullCalendar组件鼠标事件

评论0

在线客服

升级VIP

全屏浏览

夜间模式

返回顶部

FullCalendar 日历插件的使用详解

1. 安装

2. 引入

3. 使用

4. 配置

5. FullCalendar常用插件

6. FullCalendar常用属性

7. FullCalendar常用方法

8. FullCalendar常用API方法

8.1. 基本使用

8.2 跳转下个月/周/日

8.3 跳转上个月/周/日

8.4 跳转到今天

8.5 跳转到指定日期

8.6 获取当前视图起始日期和结束日期

8.7 获取当前视图类型

8.8 获取当前视图的参数

8.9 获取当前视图所有事件

8.10 添加事件

8.11 删除事件

8.12 更新事件

8.13 修改事件属性 如颜色等

8.14 自定义prev、next、 today按钮等 customButtons

8.15 配置 calendarOptions 单元格slotDuration属性

8.16 FullCalendar组件 国际化

8.17 FullCalendar组件 eventDrop事件

8.18 FullCalendar组件 鼠标事件

猜你喜欢

从播放器到编辑器：wavesurfer.js 打造高颜值音频可视化与交互

TresJS v5 震撼发布！让 Vue 开发者轻松玩转 3D 世界

Tweakpane 提速你的图形项目：实时参数调优 + 监控面板全攻略

Reveal.js + Mermaid，图表用写的，比画的更快！

前端大佬都在用的演示神器！Reveal.js API 深度解析，告别枯燥的PPT时代

前端演示提效：Pointer/Chalkboard 让你的 Reveal.js 演示文稿更“会说话”

评论0

在线客服

升级VIP

全屏浏览

夜间模式

返回顶部

8.13 修改事件属性如颜色等

8.16 FullCalendar组件国际化

8.18 FullCalendar组件鼠标事件