@fullcalendar/react使用
import React, { useState, useEffect, useRef } from 'react'
import FullCalendar from '@fullcalendar/react' // must go before plugins
import dayGridPlugin from '@fullcalendar/daygrid'
let calendarApi = null;
function Contact() {
const calendarRef = useRef(null);
useEffect(() => {
calendarApi = calendarRef.current.getApi(); // 获取api，使用内置方法
FullCalendarDate(calendarApi.view.title, 'month'); // calendarApi.view.title 获取当前时间，存储store
}, []);
const [fullCalendarType, setFullCalendarType] = useState("");
const [eventSources, setEventSources] = useState({
events: [ // put the array in the `events` property
{
title: 'event1',
start: '2010-01-01'
},
{
title: 'event2',
start: '2010-01-05',
end: '2010-01-05'
},
{
title: 'event3',
start: '2010-01-09',
end: '2010-01-09',
}
],
color: 'black', // an option!
textColor: 'yellow' // an option!
});
const [initialDate, setinitialDate] = useState('2010-01-01')
// 今天
const getToday = () => {
calendarApi.today(); // 调用内置方法
FullCalendarDate(calendarApi.view.title);
};
// 下一月
const getNext = () => {
calendarApi.next(); // 调用内置方法
FullCalendarDate(calendarApi.view.title);
};
// 上一月
const getPrev = () => {
calendarApi.prev(); // 调用内置方法
FullCalendarDate(calendarApi.view.title);
};
// 月
const month = () => {
calendarApi.changeView("dayGridMonth"); // 调用内置方法
FullCalendarDate(calendarApi.view.title, "month");
};
// 周
const week = () => {
calendarApi.changeView("timeGridWeek"); // 调用内置方法
FullCalendarDate(calendarApi.view.title, "week");
};
// 列表
const list = () => {
calendarApi.changeView("listDay"); // 调用内置方法
FullCalendarDate(calendarApi.view.title, "list");
};
// 页面内容点击事件
const eventClick = (eventInfo) => {
// 可控制弹窗显示等操作
};
const FullCalendarDate = (dateTime, type) => {
if (type) setFullCalendarType(type)
getFullCalendarData(dateTime, type ?? fullCalendarType)
}
const getFullCalendarData = (dateTime, type) => {
// dateTime当前时间，type类型
switch (type) {
case "month":
console.log("请求接口")
break
case "week":
console.log("请求接口")
break
case "list":
console.log("请求接口")
break
default:
}
}
const getevent = () => {
console.log("get event api", calendarApi)
}
const setevent = (date, tag) => {
if (date === "2010-02") {
console.log("setevent 2010-02", initialDate)
setEventSources({
events: [ // put the array in the `events` property
{
title: 'event1:' + tag,
start: `${date}-01`,
end: `${date}-01`,
},
{
title: 'event2' + tag,
start: `${date}-02`,
end: `${date}-02`,
},
{
title: 'event3' + tag,
start: `${date}-03`,
end: `${date}-03`,
}
],
color: 'black', // an option!
textColor: 'yellow' // an option!
})
}
else if (date === "2010-03") {
setEventSources({
events: [ // put the array in the `events` property
{
title: 'event1:' + tag,
start: `${date}-01`,
end: `${date}-01`,
},
{
title: 'event2' + tag,
start: `${date}-02`,
end: `${date}-02`,
},
{
title: 'event3' + tag,
start: `${date}-03`,
end: `${date}-03`,
}
],
color: 'black', // an option!
textColor: 'yellow' // an option!
})
}
else {
setEventSources({
events: [ // put the array in the `events` property
{
title: 'event1:' + tag,
start: `${date}-01`,
end: `${date}-01`,
},
{
title: 'event2' + tag,
start: `${date}-02`,
end: `${date}-02`,
},
{
title: 'event3' + tag,
start: `${date}-03`,
end: `${date}-03`,
}
],
color: 'red', // an option!
textColor: 'white' // an option!
})
}
// setinitialDate(date === "2010-03" ? `${date}-09` : `${date}-01`)
console.log("setevent initialDate", initialDate)
calendarApi.gotoDate(date === "2010-03" ? `${date}-09` : `${date}-01`);
}
const changedata = function (n) {
switch (n) {
case 1:
setevent("2010-02", "1111111");
console.log("changedata=2010-02")
break;
case 2:
setevent("2010-03", 22222)
console.log("changedata=2010-03")
break;
case 3:
setevent("2022-03", 3333)
console.log("changedata=2022-03")
break;
default:
break;
}
}
return (
Contact
Aliquam iaculis a nisi sed ornare. Sed venenatis tellus vel consequat
congue. In bibendum vestibulum orci et feugiat.
{
console.log("event", event.event.title)
return 111
}}
customButtons={{
// 自定义按钮触发回调函数
getToday: { text: "今天", click: getToday },
getNext: { text: ">", click: getNext },
getPrev: { text: "<", click: getPrev },
month: { text: "月", click: month },
week: { text: "周", click: week },
list: { text: "列表", click: list }
}}
/>
)
}
export default Contact
参考：
fullCalendar日历，React-Hooks简单使用 - 简书
Documentation | FullCalendar