sardius-fullcalendar-wrapper

A react wrapper component for easy react integration of Full Calendar 4.0 of FullCalendar (a customizable javascript event calendar).

Full Calendar 4.0 has been officially released: v4 release notes.

Full Calendar v4 docs.

sardius-fullcalendar-wrapper Demo.

Table of contents

1. Installation
2. Basic usage
3. Plugins
4. License

Installation

npm install sardius-fullcalendar-wrapper --save

npm install ...any used @fullcalendar plugins ie. @fullcalendar/interaction

Basic usage

sardius-fullcalendar-wrapper creates a <FullCalendar /> component. You can use it just like any other React component. For example:

// import React...
import React from 'react';
import ReactDOM from 'react-dom';

// ... and sardius-fullcalendar-wrapper.
import FullCalendar from 'sardius-fullcalendar-wrapper';

// ... and any fullcalendar plugins you may require
import interactionPlugin from '@fullcalendar/interaction';
import timeGridPlugin from '@fullcalendar/timegrid';

// ... and any fullcalendar specific css
import '@fullcalendar/timegrid/main.css';

class ExampleComponent extends React.Component {
  constructor(props) {
    super(props);
    // Create a reference to the component to use Full Calendar methods
    this.fullCalendar = React.createRef();
    this.state = {
      events:[
        {
          title: 'All Day Event',
          start: '2018-12-01'
        },
        {
          title: 'Long Event',
          start: '2018-12-07',
          end: '2018-12-10'
        },
        {
          id: 999,
          title: 'Repeating Event',
          start: '2018-12-09T16:00:00'
        },
        {
          id: 999,
          title: 'Repeating Event',
          start: '2018-12-16T16:00:00'
        },
        {
          title: 'Conference',
          start: Date.now(),
        },
        {
          title: 'Click for Google Url Event',
          url: 'http://google.com/',
          start: '2017-12-28'
        }
      ],		
    }
  };

  eventClicked = (eventClickInfo) => {
    alert('Event has been clicked!');
  }

  getView = () => {
    // Use reference to call Full Calendar Methods
    const view = this.fullCalendar.current.calendar.getView();
    alert('We are using FullCalendar Methods!');
  }

  selectEvent = (selectionInfo) => {
    alert('Event Selected!');
  }

  render() {
    return (
      <div id="example-component">
        <FullCalendar
          ref={this.fullCalendar} // Add ref defined in constructor to FullCalendar
          id = "your-custom-calendar-ID"
          header = {{
            left: 'prev,next today myCustomButton',
            center: 'title',
            right: 'month,basicWeek,basicDay'
          }}
          defaultView="timeGrid" // Uses the timeGridPlugin
          defaultDate='2018-12-05'
          // Example of an option set to false (only required if the default is true)
          navLinks={false}
          // Example of an option set to true
          editable
          selectable // Uses the interactionPlugin
          selectHelper
          // Example of a callback / handler function
          select={selectionInfo => {
            this.selectEvent(selectionInfo);
          }}
          // Another example of a callback / handler function
          eventClick={eventClickInfo => {
            this.eventClicked(eventClickInfo);
          }}
          // Load in this calendar's events
          events={this.state.events} 
          // Add in required plugins for the options that you selected above
          plugins={[
            interactionPlugin,
            timeGridPlugin
          ]}
        />
      </div>
    );
  }
}

ReactDOM.render(<ExampleComponent />, document.getElementById('root'));

The id property declares the id of the root element for the FullCalendar component. If it isn't provided, the FullCalendar component will get a random generated id.

Plugins

By default the @fullcalendar/core and the @fullcalendar/daygrid plugins come already included in the sardius-fullcalendar-wrapper package.

FullCalendar offers the following packages:

Read More here: Plugin Docs.

| Plugin | README | | ------ | ------ | | @fullcalendar/core | Offers the Calendar class among other things. | | @fullcalendar/interaction | Required to detect dateClick actions, selectable actions, and event drag-n-drop & resizing. Not needed for eventClick or eventMouseEnter/eventMouseLeave.| | @fullcalendar/daygrid | Offers Month and DayGrid views: dayGridMonth, dayGridWeek, dayGridDay, dayGrid (generic) | | @fullcalendar/timegrid | Offers TimeGrid views: timeGridWeek, timeGridDay, timeGrid (generic) | | @fullcalendar/list | Offers Lists views: listYear, listMonth, listWeek, listDay, list (generic) | | @fullcalendar/timeline | Offers Timeline views with no resource support: timelineYear, timelineMonth, timelineWeek, timelineDay, timeline (generic)| | @fullcalendar/resource-common | Offers base support for resources. Required for all resource-related plugins. | | @fullcalendar/resource-daygrid | Offers resource-enabled DayGrid views: resourceDayGridMonth, resourceDayGridWeek, resourceDayGridDay resourceDayGrid (generic) | | @fullcalendar/resource-timegrid | Offers resource-enabled TimeGrid views: resourceTimeGridWeek, resourceTimeGridDay, resourceTimeGrid (generic) | | @fullcalendar/resource-timeline | Offers resource-enabled Timeline views: resourceTimelineYear, resourceTimelineMonth, resourceTimelineWeek, resourceTimelineDay, resourceTimeline (generic) | | @fullcalendar/bootstrap | Offers Bootstrap theming | | @fullcalendar/google-calendar | For loading events from a public Google Calendar feed | | @fullcalendar/rrule | For leveraging the RRule library for event recurrence | | @fullcalendar/luxon | Offers a named-timezone implementation, a formatting string implementation, and utilities for converting to Luxon DateTimes. | | @fullcalendar/moment | Offers a formatting string implementation and utilities fo convert to Moment objects. | | @fullcalendar/moment-timezone | Offers a named timezone implementation. |

View API

By default you

License

• MIT

Dependencies

• @fullcalendar/core
• @fullcalendar/daygrid

Peer dependencies

• react
• react-dom