FullCalender в списке реагирования

Question

Я использую Fullcalender в reactjs, но у меня возникли проблемы с реализацией 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;

Работает месяц сетка, но я хочу и сетку месяца, и сетку списка

Кто-нибудь может мне помочь в этом случае?

Я добавил сетку списка, но не работает

Answer 1

Привет, вот полный пример. Пожалуйста, проверь это. К вашему сведению, вы должны запустить пряжа с добавлением узла-sass для main.s css

FullCalendarExample Component

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 .s css

// 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;
}

Источник