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组件 鼠标事件

猜你喜欢

微信小程序腾讯电子健康卡接入实战

Node.js爬虫 CheerioJS ‌轻量级解析、操作和渲染HTML及XML文档

daisyUI 扩展之 pin input 组件开发，极致pin码输入框

Lodash.js 实用工具库常用方法详解

Math.js高级数学运算与函数库使用详解

react day.js使用及经典场景详解

评论0

在线客服

升级VIP

全屏浏览

夜间模式

返回顶部

8.13 修改事件属性如颜色等

8.16 FullCalendar组件国际化

8.18 FullCalendar组件鼠标事件