React FullCalendar

Customizable fullcalendar for react

Installation

npm i stark-fullcalendar

Usage

Import this component in page where you want to display graph.

import FullCalendar from 'stark-fullcalendar';

Use this in your page

import React, { useEffect, useRef, useState } from 'react';
import { Row, Col } from 'react-bootstrap';
import FullCalendar from 'stark-fullcalendar';

// declare state
const [events, setEvents] = useState([]);
const ref = useRef();

//declare methods
useEffect(() => {
    setEvents([
      { title: 'event 1', date: '2021-05-24', start: '2021-05-24T10:00:00', end: '2021-05-24T11:00:00', color: '#C12828', subject: 'English', instructor: 'Dev Leo', Duration: '0Min', status: 'join', allDay: false },
      { title: 'event 2', date: '2021-05-24', start: '2021-05-24T11:00:00', end: '2021-05-24T12:00:00', color: '#C12828', borderColor: 'green', backgroundColor: 'green', subject: 'Mathematics', instructor: 'Alexa', Duration: '50Min', status: 'Session Done' },
      { title: 'event 3', date: '2021-05-24', start: '2021-05-24T12:00:00', end: '2021-05-24T13:00:00', color: '#C12828', backgroundColor: 'yellow', subject: 'English', instructor: 'Alexa', Duration: '50Min', status: 'Cancelled', borderColor: 'yellow', textColor: 'blue' },
      { title: 'event 4', date: '2021-05-24', start: '2021-05-24T13:00:00', end: '2021-05-24T14:00:00', borderColor: 'grey', backgroundColor: 'grey', subject: 'English', instructor: 'Dev Leo', Duration: '50Min', status: 'Session Done' },
      { title: 'event 5', date: '2021-06-24', start: '2021-06-24T13:00:00', end: '2021-06-24T14:00:00', borderColor: 'grey', backgroundColor: 'grey', subject: 'English', instructor: 'Dev Leo', Duration: '50Min', status: 'Session Done' },
      { title: 'event 6', date: '2021-06-25', start: '2021-06-25T13:00:00', end: '2021-06-25T14:00:00', borderColor: 'grey', backgroundColor: 'grey', subject: 'English', instructor: 'Dev Leo', Duration: '50Min', status: 'Session Done' }

    ]);
  }, [])

  const handleEventClick = async (clickInfo) => {
    clickInfo.jsEvent.preventDefault();
    const { attributes } = clickInfo.jsEvent.target;
    const parentAction = Object.keys(clickInfo.jsEvent.target.attributes).filter(item => {
      return attributes[item].name.includes('parentcallback')
    });
    if (parentAction.length)
      return false;

    const arr = []
    Object.entries(clickInfo.event.extendedProps).map(([key, value]) => {
      const obj = {};
      obj.variableName = key;
      obj.value = value;
      arr.push(obj)
      return obj;
    });

    alert('event clicked - ' + clickInfo.event.title)
    console.log('event click with extra param', clickInfo.event, arr);
    return true;
  }

  const joinAction = (e, data) => {
    e.preventDefault();
    e.stopPropagation();
    alert(`Joining - ${data.title}`)
  }

  const renderEventContent = (eventInfo) => {
    return (
      <>
        {
          eventInfo.view.type === 'timeGridDay' ? (
            <>
              <Row className='day-time-wrapper align-item-center h-100'>
                <Col>
                  <i>{eventInfo.event.title}</i>
                  <i>{eventInfo.event.description}</i>
                </Col>
                {Object.keys(eventInfo.event.extendedProps).map(i => {
                  return <Col>{
                    (eventInfo.event.extendedProps[i] === 'join') ? <button type='button' id='btnAction' parentcallback='joinAction' className='btn btn-primary' onClick={(e) => joinAction(e, eventInfo.event)}> {eventInfo.event.extendedProps[i]}</button> : eventInfo.event.extendedProps[i]
                  }</Col>
                })}

              </Row>
            </>
          ) : (
            <>
              <div className="fc-daygrid-event-dot" style={{ borderColor: eventInfo.borderColor }} />
              <div className="fc-event-time">{eventInfo.timeText}</div>
              <div className="fc-event-title">{eventInfo.event.title}</div>
            </>
          )
        }
      </>
    )
  }

  const getEventList = (fetchInfo, successCallback) => {
    let type = ''

    if (ref && ref.current)
      type = ref.current.getApi().view.type

    // you can call api here  
    return successCallback(events);
  }
// some code

render() {
    return (
        <>
      <FullCalendar
            // required if need to handle action
            ref={ref}
            
            // optional : to wrapper class for calendar
            classWrapper="calender-wrap"
            
            // optional : by default 0 for Sunday 
            firstDay='1'
            
            // required : at least one. if action required then must add interactionPlugin
            pluginslist={['dayGridPlugin', 'timeGridPlugin', 'interactionPlugin']}
            
            // optional : you can hide or show header toolbar
            headerToolbar={{
              left: 'prev,next today more',
              center: 'title',
              right: 'dayGridMonth,timeGridWeek,timeGridDay'
            }}
            
            // required : based on plugin specified up.
            initialView="dayGridMonth"
            
            // optional: to allow drag and edit event
            editable={false}
            
            // optional
            selectable={false}
            
            // optional
            selectMirror={false}
            
            // optional
            dayMaxEvents
            
            //optional : to show weekends in calendar
            weekendsVisible
            
            // required : here u can directly specify data or use callback function to handle navigation
            events={getEventList}
            
            // optional : to change layout of event
            eventContent={(e) => renderEventContent(e)}
            
            //optional : to perform action on event click
            eventClick={(e) => handleEventClick(e)}
            
            // optional : to parform action when click on date
            dateClick={(e) => {
              const calendarApi = ref.current.getApi();
              calendarApi.changeView('timeGridDay', e.date)
            }}

            // optional: you can add custom button and assign action. like we implenented more button
            customButtons={{
              more: {
                text: 'More',
                click: () => {
                  alert('Custom button More clicked')
                }
              }
            }}

            // optional : to control weekday and hours. based on other day and time will disable
            businessHours ={[{
              daysOfWeek: [1, 2, 3, 4, 5], // Monday to Friday
              startTime: '08:00', // 8am
              endTime: '18:00' // 6pm
            }]}
          />
        </>
    )
}

Events Data Object Descriptive:

• title : required : String
• date : required : date (e.g - 2021-05-24)
• start : required : datetime (e.g - 2021-06-24T14:00:00)
• end : required : datetime (e.g - 2021-06-24T14:00:00)
• color : optional : color (e.g - #C12828)
• backgroundColor : optional : color (e.g - #C12828)
• borderColor : optional : color (e.g - #C12828)
• also you can specify custom attribute in key value pair which will you get in extendedProps attribute in event.

Note :

• You can add new attribute to this package based on any new attribute added in fullcalender core package.

dependencies package

• react-boostrap
• boostrap
• @fullcalendar/bootstrap
• @fullcalendar/daygrid
• @fullcalendar/interaction
• @fullcalendar/react
• @fullcalendar/timegrid
• @patternfly/react-core