CODEWITHSUNDEEP
reactjsfullcalendar
jrock2004
jrock2004

Reputation: 3501

FullCalendar New Appointment Button for Creating an Event

I want to add button in the header that will open my window to create a new event. I got that working to the point of, how do I gain access to the view calendar API to create the event? Seems like I can only get that if I click somewhere in the calendar

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

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

Upvotes: 1

Views: 1405

Answers (1)

ricardo-dlc
ricardo-dlc

Reputation: 486

As I understand, you want to add your button to header so you can use it to create a new event. To achieve that check for the eventObject info and/or the addEvent method or use your custom function in case you store your events in a database for example.

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',
  }
});

Edit:

React

If you see this example, the way you can handle your events is almost the same as you do in Javascript. Also check this info from documentation about how to access to the 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()
  }
}

Upvotes: 1

Related Questions