FactCalender在反应使用列表中

Question

我在reactjs中使用Fullcalender，但是我遇到了用完整日历实现List gird的麻烦：

这是我的代码：

import React, { Component } from 'react';
// import { connect } from "react-redux";
import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';
import { Calendar } from '@fullcalendar/core';
import interactionPlugin from "@fullcalendar/interaction";


import listPlugin from '@fullcalendar/list';



const events = [
    { title: 'event 1', date: '2020-04-01' },
    { title: 'event 2', date: '2020-04-02' }
  ]

class App extends Component {

  render() {
    return (

      <React.Fragment>
        <h1>Hello React</h1>
        <FullCalendar

        defaultView="dayGridMonth"
        plugins={[ dayGridPlugin, interactionPlugin, listPlugin ]}
        events={events}


         > 
         </FullCalendar>


      </React.Fragment>
    )
  }
}


export default App;

它正在月份网格上工作，但我同时希望月份网格和列表网格

在这种情况下有人可以帮助我吗？

我添加了listgrid但不起作用

Answer 1

嗨，这是完整的示例。请检查一下。仅供参考，您必须为main.scss运行yarn add node-sass

FullCalendarExample组件

import React from 'react'
import FullCalendar from '@fullcalendar/react'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction' // needed for dayClick
import listPlugin from '@fullcalendar/list';
import './main.scss'

export default class FullCalendarExample extends React.Component {
    calendarComponentRef = React.createRef();
    state = {
        calendarWeekends: true,
        calendarEvents: [ // initial event data
            {title: 'Event Now', start: new Date()}
        ]
    };

    render() {
        return (
            <div className='demo-app'>
                <div className='demo-app-top'>
                    <button onClick={this.toggleWeekends}>toggle weekends</button>
                    &nbsp;
                    <button onClick={this.gotoPast}>go to a date in the past</button>
                    &nbsp;
                    (also, click a date/time to add an event)
                </div>
                <div className='demo-app-calendar'>
                    <FullCalendar
                        defaultView="dayGridMonth"
                        header={{
                            left: 'prev,next today',
                            center: 'title',
                            right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
                        }}
                        plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin, listPlugin]}
                        ref={this.calendarComponentRef}
                        weekends={this.state.calendarWeekends}
                        events={this.state.calendarEvents}
                        dateClick={this.handleDateClick}
                    />
                </div>
            </div>
        )
    }

    toggleWeekends = () => {
        this.setState({ // update a property
            calendarWeekends: !this.state.calendarWeekends
        })
    };

    gotoPast = () => {
        let calendarApi = this.calendarComponentRef.current.getApi();
        calendarApi.gotoDate('2000-01-01') // call a method on the Calendar object
    };

    handleDateClick = (arg) => {
        this.setState({  // add new event data
            calendarEvents: this.state.calendarEvents.concat({ // creates a new array
                title: 'New Event',
                start: arg.date,
                allDay: arg.allDay
            })
        })
    }
}
main.scss

// you must include each plugins' css
// paths prefixed with ~ signify node_modules
@import '~@fullcalendar/core/main.css';
@import '~@fullcalendar/daygrid/main.css';
@import '~@fullcalendar/timegrid/main.css';

.demo-app {
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 14px;
}

.demo-app-top {
  margin: 0 0 3em;
}

.demo-app-calendar {
  margin: 0 auto;
  max-width: 900px;
}