时间戳

首页 > 解决方案 > FullCalendar 用于创建事件的新约会按钮

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

问题描述

我想在标题中添加按钮，该按钮将打开我的窗口以创建新事件。我明白了，如何访问查看日历 API 来创建事件？似乎只有在日历中单击某处才能获得

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

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

标签： reactjsfullcalendar

解决方案

据我了解，您希望将按钮添加到标题中，以便您可以使用它来创建新事件。例如，为了实现对eventObject信息和/或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',
  }
});

编辑：

反应

如果你看到这个例子，你可以处理你的事件的方式几乎和你在 Javascript 中做的一样。还可以从有关如何访问 API 的文档中查看此信息。

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()
  }
}

推荐阅读