我正在做一個(gè)測(cè)試日歷項(xiàng)目，到目前為止我已經(jīng)使用了fullcalendar和react-calendar-timeline。我目前的問(wèn)題是，react-calendar-timeline超出了我的工作范圍； react-calendar-timeline，但是，使用fullcalendar，我可以將日歷放在工作區(qū)fullcalendar中。我希望react-calendar-timeline和我的fullcalendar一樣，但是由于某種原因，它一直在右邊。

這是我為fullcalendar準(zhǔn)備的代碼:

import { useState } from "react";
import { formatDate } from '@fullcalendar/core';
import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";
import interactionPlugin from "@fullcalendar/interaction";
import listPlugin from "@fullcalendar/list";
import {
    Box,
    List,
    ListItem,
    ListItemText,
    Typography,
    useTheme,
} from "@mui/material";
import Header from "../components/Header";
import { tokens } from "../theme";
import CircleOutlinedIcon from '@mui/icons-material/CircleOutlined';

const Coverage = () => {
    const theme = useTheme()
    const colors = tokens(theme.palette.mode)
    const [currentEvents, setCurrentEvents] = useState([]); // Save events on the calendar. 
    const handleDateClick = (selected) => {
        const title = prompt("Enter the user") // can only be done with a model?
        const calendarApi = selected.view.calendar;
        calendarApi.unselect();
        if (title) {
            calendarApi.addEvent({
                id: `${selected.dateStr}-${title}`,
                title,
                start: selected.startStr,
                end: selected.endStr,
                allDay: selected.allDay
            })
        }
    }
    const handleEventClick = (selected) => {
        if (window.confirm(`Are you sure you want to delete the event '${selected.event.title}'`)) {
            selected.event.remove();
        }
    }
    return (
        <Box m="20px">
            <Header title="Calendar" subtitle="Full Calendar Interactive Page" />

            <Box display="flex" justifyContent="space-between">
                {/* CALENDAR SIDEBAR */}
                <Box
                    flex="1 1 20%"
                    backgroundColor={colors.primary[400]}
                    p="15px"
                    borderRadius="4px"
                >
                    <Typography variant="h3" sx={{ fontWeight: 'bold' }}>Events</Typography>
                    <Box>
                        <Typography variant="h4" align="center" >Schedule</Typography>
                        <Typography variant="h6" sx={{ alignItems: 'center' }}><CircleOutlinedIcon />Morning: 6:00 am to 3:00 pm</Typography>
                    </Box>
                    <Box>
                        <Typography variant="h4">Staff</Typography>
                        <Typography variant="h6" sx={{ alignItems: 'center' }}><CircleOutlinedIcon />Schedule</Typography>
                    </Box>
                </Box>

                {/* CALENDAR */}
                <Box flex="1 1 100%" ml="15px">  {/* flex-grow, flex-shrink, and flex-basis*/}
                    <FullCalendar
                        height="75vh"
                        plugins={[
                            dayGridPlugin,
                            timeGridPlugin,
                            interactionPlugin,
                            listPlugin,
                        ]}
                        headerToolbar={{
                            left: "prev,next today",
                            center: "title",
                            right: "dayGridMonth,timeGridWeek,timeGridDay",
                        }}
                        initialView="dayGridMonth"
                        editable={true}
                        selectable={true}
                        selectMirror={true}
                        dayMaxEvents={true}
                        select={handleDateClick}
                        eventClick={handleEventClick}
                        eventsSet={(events) => setCurrentEvents(events)}
                        initialEvents={[
                            {
                                id: "12315",
                                title: "All-day event",
                                date: "2022-09-14",
                            },
                            {
                                id: "5123",
                                title: "Timed event",
                                date: "2022-09-28",
                            },
                        ]}
                    />
                </Box>
            </Box>
        </Box>

    )
}

export default Coverage;

這是我為反應(yīng)-日歷-時(shí)間線準(zhǔn)備的代碼:

import React from 'react';
import Timeline from 'react-calendar-timeline';
import 'react-calendar-timeline/lib/Timeline.css';
import moment from 'moment';
import { Box } from '@mui/material';
import Header from "../components/Header";

const BlockEvents = () => {
    // Generate some example data for the timelines
    const groups1 = [
        { id: 1, title: 'Group 1' },
        { id: 2, title: 'Group 2' },
    ];

    const items1 = [
        {
            id: 1,
            group: 1,
            title: 'Item 1',
            start_time: moment(),
            end_time: moment().add(1, 'hour'),
        },
        {
            id: 2,
            group: 2,
            title: 'Item 2',
            start_time: moment().add(2, 'hours'),
            end_time: moment().add(3, 'hours'),
        },
    ];

    const groups2 = [
        { id: 3, title: 'Group 3' },
        { id: 4, title: 'Group 4' },
    ];

    const items2 = [
        {
            id: 3,
            group: 3,
            title: 'Item 3',
            start_time: moment().add(1, 'day'),
            end_time: moment().add(1, 'day').add(2, 'hours'),
        },
        {
            id: 4,
            group: 4,
            title: 'Item 4',
            start_time: moment().add(1, 'day').add(3, 'hours'),
            end_time: moment().add(1, 'day').add(4, 'hours'),
        },
    ];

    return (
        <Box sx={{
            '& .react-calendar-timeline': {
                padding: '10px',
                display: 'block',
                maxWidth: 'auto'
            }
        }}>
            <Header title="Calendar" subtitle="Full Calendar Interactive Page" />
            <Box display="flex" justifyContent="space-between">
                <Box
                    flex="1 1 100%"
                    p="5px"
                    borderRadius="4px"
                >
                    <Timeline
                        groups={groups1}
                        items={items1}
                        defaultTimeStart={moment().add(-12, 'hours')}
                        defaultTimeEnd={moment().add(12, 'hours')}
                    />
                </Box>
            </Box>
        </Box>
    );
};

export default BlockEvents

這是index.css:

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300;400;700&display=swap');

html,
body,
#root,
.app,
.content {
  height: 100%;
  width: 100%;
  font-family: 'Noto Sans', sans-serif;

}

.app {
  display: flex;
  position: relative;
}

*:focus {
  outline: none;
}

剛剛提到，我有一個(gè)反應(yīng)親側(cè)邊欄折疊和擴(kuò)展。