@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 (
        <div>
            <h1>Contact</h1>
            <p>
                Aliquam iaculis a nisi sed ornare. Sed venenatis tellus vel consequat
                congue. In bibendum vestibulum orci et feugiat.
            </p>
            <div>
                <button onClick={getNext}>getNext</button>
                <button onClick={() => changedata(1)}>变成2月</button>
                <button onClick={() => changedata(2)}>变成3月</button>
                <button onClick={() => changedata(3)}>变成2022年1月</button>
                <button onClick={getevent}>get event</button>
            </div>
            <FullCalendar
                ref={calendarRef}
                plugins={[dayGridPlugin]}
                height={600} // 高度
                initialView="dayGridMonth" // 默认视图
                headerToolbar={{
                    left: "getToday,getPrev,getNext", // 左侧按钮展示为下方自定义按钮名称
                    center: "title", // 时间展示
                    right: "month,week,list" // 右侧按钮展示
                }}
                eventClick={eventClick} // 事项点击事件
                firstDay={1} // 默认第一行展示第一周
                allDayText="全天" // 全部展示文字
                eventSources={[eventSources]} // 数据源
                initialDate={initialDate}
                eventContent={(event) => {
                    console.log("event", event.event.title)
                    return <div>111</div>
                }}
                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 }
                }}
            />
        </div>
    )
}
 
export default Contact

参考：

fullCalendar日历，React-Hooks简单使用 - 简书 

Documentation | FullCalendar