用于创建事件的 FullCalendar 新约会按钮

Question

我想在 header 中添加按钮，这将打开我的 window 以创建新事件。我明白了，我如何才能访问查看日历 API 来创建活动？好像我只能在日历中的某个地方单击才能得到它

 const customButtons = {
    newAppointment: {
      text: 'New Appointment',
      click: (event) => {
        console.log(event);
        toggleNewAppointment();
      }
    }
  }

  const headerToolbar = {
    start: 'title',
    center: 'newAppointment',
    end: 'today prev,next',
  }

Answer 1

据我所知，您想将按钮添加到页眉，以便您可以使用它来创建新事件。要实现这一点，请检查 eventObject info and/or the addEvent 方法或使用您的自定义函数，以防您将事件存储在数据库中。

calendar = new FullCalendar.Calendar(calendarEl, {
  customButtons: {
    newAppointment: {
      text: 'New Appointment',
      click: () => {
        // Here you have to create an event object, since this function has no parameter from FullCalendar API
        const event = {
          id: 'a',
          title: 'my event',
          start: '2018-09-01'
        }
        console.log(event);
        createEventFuntion(event); // Send to your event save function
        // Or use the addEvent method instead
        // calendar.addEvent(event);
      }
    }
  },
  headerToolbar: {
    start: 'title',
    center: 'newAppointment',
    end: 'today prev,next',
  }
});

编辑：

反应

如果您从有关如何访问 API 的文档中看到 this example, the way you can handle your events is almost the same as you do in Javascript. Also check this info。

import React from 'react'
import FullCalendar from '@fullcalendar/react'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'

export default class DemoApp extends React.Component {

  // Create a reference
  calendarRef = React.createRef()

  state = {
    weekendsVisible: true,
    currentEvents: []
  }

  render() {
    return (
      <div className='demo-app'>
        {this.renderSidebar()}
        <div className='demo-app-main'>
          <FullCalendar
            ref={this.calendarRef} // Here is the reference
            plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
            headerToolbar={{
              left: 'prev,next today',
              center: 'newAppointment',
              right: 'dayGridMonth,timeGridWeek,timeGridDay'
            }}
            customButtons={{
              newAppointment: {
                  text: 'custom!',
                  click: function() {
                    alert('clicked the custom button!');
                    someMethod();
                  },
              },
            }}
            editable={true}
            selectable={true}
            // ...
            /* you can update a remote database when these fire:
            eventAdd={function(){}}
            eventChange={function(){}}
            eventRemove={function(){}}
            */
          />
        </div>
      </div>
    )
  }

  someMethod() {
    // Then you can use the reference to access to the API
    let calendarApi = this.calendarRef.current.getApi()
    calendarApi.addEvent()
  }
}

用于创建事件的 FullCalendar 新约会按钮

FullCalendar New Appointment Button for Creating an Event

fullcalendar

reactjs

编辑：

反应