fullcalendar / fullcalendar-react

The official React Component for FullCalendar

FullCalendar React Component

The official React Component for FullCalendar

Installation

Install the React connector, the core package, and any plugins (like daygrid):

npm install @fullcalendar/react @fullcalendar/core @fullcalendar/daygrid

Usage

Render a FullCalendar component, supplying options as props:

import FullCalendar from '@fullcalendar/react'
import dayGridPlugin from '@fullcalendar/daygrid'

const events = [
  { title: 'Meeting', start: new Date() }
]

export function DemoApp() {
  return (
    <div>
      <h1>Demo App</h1>
      <FullCalendar
        plugins={[dayGridPlugin]}
        initialView='dayGridMonth'
        weekends={false}
        events={events}
        eventContent={renderEventContent}
      />
    </div>
  )
}

// a custom render function
function renderEventContent(eventInfo) {
  return (
    <>
      <b>{eventInfo.timeText}</b>
      <i>{eventInfo.event.title}</i>
    </>
  )
}

Links

• Documentation
• Example Project

Development

You must install this repo with PNPM:

pnpm install

Available scripts (via pnpm run <script>):

• build - build production-ready dist files
• dev - build & watch development dist files
• test - test headlessly
• test:dev - test interactively
• lint
• clean

fullcalendar-react's Issues

Problem with styles

How to viewRender props

import FullCalendar from "@fullcalendar/react";
<FullCalendar
                        defaultView="dayGridMonth"
                        locale={thLocale}
                        header={{
                            left: "prev, next today",
                            center: "title",
                            right: "dayGridMonth, timeGridWeek, listWeek"
                        }}
                        plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
                        eventTextColor="white"
                        ref={this.calendarComponentRef}
                        weekends={this.state.calendarWeekends}
                        events={this.state.calendarEvents}
                        dateClick={this.handleDateClick}
                        eventClick={this.handleEventClick}
                        viewRender={this.viewRender}
                    />

Not Working

----- //// ----

var intervalStart, intervalEnd; //variables with higher scope level

$('#calendar').fullCalendar({
   //...your options here...
    viewRender: function (view, element)
    {
        intervalStart = view.intervalStart;
        intervalEnd = view.intervalEnd;
    },
    events: function(start, end, timezone, callback) {
        console.log(intervalStart.format("YYYY-MM-DD"));
        console.log(intervalEnd.format("YYYY-MM-DD"));
        //...etc
    }
});

header prev next callback method

Hi i need help for prev and next month click callback methods in react.js

Changing resources prop does not update in render

When the resources prop is changed, the calendar does not rerender. This is inconsistent with the way that the React flow works.

For example, if an async request is working in the background and it finishes, with a new resources array, and the render() function of the parent component is called, the calendar is not rerendered.

While the docs mention a resources function for use with ajax, this does not work with my workflow (because the information is stored in redux and used with other components), and does not align with proper React flow.

Extra data gets removed from event object

Bug Reports

Here is my react component

import * as React from 'react'
import FullCalendar from '@fullcalendar/react'
import { EventInput } from '@fullcalendar/core'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction' // needed for dayClick

interface DemoAppState {

}

export default class DemoApp extends React.Component<{}, DemoAppState> {

  calendarComponentRef = React.createRef<FullCalendar>()

  constructor(props: {}) {
    super(props)
  }

  render() {
    return (
<FullCalendar
                defaultView="dayGridMonth"
                header={{
                  left: 'prev,next today',
                  center: 'title',
                  right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
                }}
                plugins={[ dayGridPlugin, timeGridPlugin, interactionPlugin, listPlugin]}
                ref={ this.calendarComponentRef }
                events={ [{id: 1, start: "2019-05-25 09:00:00", description: "this gets removed" }] }
                eventClick={ (event) => console.log(event.event) }
              />
    )
  }
}

event.description is undefined, the property gets removed.

Would like to just have access to the full event object rather than have to keep two copies of the array and search each time.

State Management Best Practices

This may not be the best place for this, but I have not been able to find any resources online.

The Demo application is a great start, but there are not many resources that show how to properly use the calendar within a large application. I understand that the library was designed for maximum flexibility, but has anyone built a thorough implementation of this library? I have an MVP working, but I would love to discuss the use of Hooks, specifically useState vs useReducer in regards to manipulating the calendar data.

Has anyone come up with some best practices? Is there a better place to have this conversation? I would love to write a blog or tutorial for going beyond the basic set up as I have ran into some very particular issues with the library that could be documented.

Cheers,

scrollTime not updating

Would be cool if the scrolling of the calendar would move when scrollTime is updated as prop. Not sure if it's supposed to work or not.

function Schedule() {
   const [scrollBy, setScrollBy] = useState('08:00:00');
       return <FullCalendar scrollTime={scrollBy} />
}

setState in function select

Hi, I'm very grateful for fullcalendar-react!

This is my problem when setState any params in function select.

Calendar does not initially resize to fit events rendered with ReactDOM.render

updateSize() function is not called initially if eventRenderer is used. because of this, we see overflow of events on first render.
Its a little bit weird. only on first render its not working. On window resize its working fine.

You can see the behaviour at : https://stackblitz.com/edit/react-ewzzac?file=Hello.js

External event drag and drop

External event drag and drop not working

Calendar does not show the time although time is specified and allDay is false

I am creating a calendar that shows events on a weekly basis.

like this. https://fullcalendar.io/docs/timegrid-standard-view-demo

I specified allDayDefault props to false, and specified json data in events props.

Objects whose allDay values ​​are defined as false are showing well on all-day area.

But objects whose allDay values ​​are defined as true are not showing.

          <FullCalendar
            defaultView="timeGridWeek"
            plugins={[ timeGridPlugin, dayGridPlugin ]}
            header={{
              left: 'prev,next today',
              center: 'title',
              right: 'timeGridWeek,timeGridDay',
            }}
            nowIndicator={true}
            allDayText="All Day"
            allDayDefault={false}
            locale='ko'
            timeZone='UTC'
            events={[
              {
                // not visible
                id: 1,
                title: "event 1",
                start: "2019-05-21T11:00:00+09:00",
                end: "2019-05-21T13:00:00+09:00",
                allDay: false,
              },
              {
                // not visible
                id: 2,
                title: "event 2",
                start: "2019-05-21T11:00:00+09:00",
                end: "2019-05-21T13:00:00+09:00",
              },
              {
                // visible on All Day area
                id: 3,
                title: 'event 3',
                start: "2019-05-21T11:00:00+09:00",
                end: "2019-05-21T13:00:00+09:00",
                allDay: true,
              },
              {
                // not visible
                id: 4,
                title: 'event 4',
                start: moment().toDate(),
                end: moment().add(1, "days").toDate(),
              },
              {
                // visible on All Day area
                id: 5,
                title: 'event 5',
                date: '2019-05-20',
                allDay: true,
              },
              {
                // not visible
                id: 6,
                title: 'event 6',
                date: '2019-05-20',
              },
              {
                // not visible
                id: 7,
                title: 'event 7',
                date: '2019-05-20',
                allDay: false,
              },
            ]}
            scrollTime={'08:00:00'}
          />

Documentation issue with css imports

Bug Reports

Css import section on https://fullcalendar.io/docs/react says we need to import only

@import '~@fullcalendar/core/main.css';
@import '~@fullcalendar/daygrid/main.css';

however I found out the timeline grid css is also required otherwise week and day plugin ui breaks.
Could you please update documentation with following?

@import '~@fullcalendar/core/main.css';
@import '~@fullcalendar/daygrid/main.css';
@import "~@fullcalendar/timegrid/main.css";

Possible Issue with dragging and dropping external calendar events

I can able to drag and drop external events into calendar but how to get all the events which are on calender ?

Giving new copy of same events array does not forces calendar to re-render

I am using react version of this lib and I think this library is internally updating the events array which is sent as props (which is not how a react component should behave).

So I am trying to implement a basic example of resizing event, now as you can see that I am generating an array of events and I am passing it to <FullCalendar /> which works fine but when I resize the event due to some custom logic I don't want to allow that resize operation so I am generating a new copy of the initial events array in setState({ ... }) (line #47) call.

Expected result: Now as I have passed a new copy of same events array I am expecting to see no changes in calendar events because the event's start and end time are unchanged so when FullCalendar re-renders then it will create an event block at same location on calendar timeline.

Actual Result: Even though I am passing a new copy of events array with same start and end time values the calendar itself resizes the event, and is not re-rendering based on events array passed.
I think this library is internally updating passed events array (hence the UI gets updated) but when I pass a new copy of same array it first checks for any changes in passed events array using deepEquals function and as content wise there's no change in events it is not getting re-rendered.

CodeSandbox link: https://codesandbox.io/s/fullcalendar-react-yp2ju

Note: Toggle fixIssue variable to fix the bug line #39

Nextjs + fullcalendar-react Element is not defined

Hi,

Glitch to reproduce the bug
https://glitch.com/edit/#!/join/30dcdcf3-668a-449d-aa74-bfe3ff4e5b2c

Using react-fullcalendar 4.1 together with nextjs 8.1 I get ReferenceError: Element is not defined error in node_modules/@fullcalendar/core/main.js

I can fix this by replacing

var matchesMethod = Element.prototype.matches ||
    Element.prototype.matchesSelector ||
    Element.prototype.msMatchesSelector;

with

var matchesMethod=function(s) {
var matches = (this.document || this.ownerDocument).querySelectorAll(s),
i = matches.length;
while (--i >= 0 && matches.item(i) !== this) {}
return i > -1;
};

and

var closestMethod = Element.prototype.closest || function (selector) {
// polyfill
var el = this;
if (!document.documentElement.contains(el)) {
return null;
}
do {
if (elementMatches(el, selector)) {
return el;
}
el = el.parentElement || el.parentNode;
} while (el !== null && el.nodeType === 1);
return null;
};

with

var closestMethod = function (selector) {
// polyfill
var el = this;
if (!document.documentElement.contains(el)) {
return null;
}
do {
if (elementMatches(el, selector)) {
return el;
}
el = el.parentElement || el.parentNode;
} while (el !== null && el.nodeType === 1);
return null;
};

Cheers
/Mikael

I need an event to be fired as I navigate to next/previous months.

Bug Reports

You MUST post a recreation or else your issue will be CLOSED without explanation.
Instructions: https://fullcalendar.io/reporting-bugs

Feature Requests

Search the issue tracker for an existing ticket before creating a new one.
Instructions: https://fullcalendar.io/requesting-features

Is your bug/feature applicable to the core project, without React?

If so, use the main tracker: https://github.com/fullcalendar/fullcalendar/issues

(Please erase the above text and begin typing. Thanks!)

Ability to return a react element in eventRender function

I'd like to be able to return a JSX-style react element in the eventRender function, like in the customEventRender method in this CodePen:
https://codesandbox.io/embed/p7kyyr14ym

If I try this now I get TypeError: can't define property "fcSeg": Object is not extensible.

Let me know if I need to provide more info to describe this.

How separate between days on the week view with fullcalendar react?

I have a FullCalendar :

import FullCalendar from "@fullcalendar/react";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";
import interactionPlugin from "@fullcalendar/interaction";

// must manually import the stylesheets for each plugin

import "@fullcalendar/core/main.css";
import "@fullcalendar/daygrid/main.css";
import "@fullcalendar/timegrid/main.css";


<FullCalendar 
                   locale={frLocale}
                   allDaySlot={false}
            defaultView="timeGridWeek"
            nowIndicator={true}
            hiddenDays={[0]}
            slotDuration='00:45:00'
            minTime="07:00:00"
            maxTime="20:00:00"
            slotEventOverlap={false}
            handleWindowResize={true}
            header={{
              left: "prev,next today",
              center: "title",
              right: "dayGridMonth,timeGridWeek,timeGridDay"
            }}
            plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin ]}
            ref={this.calendarComponentRef}
           // weekends={true}
            events={this.state.events}
            dateClick={this.newEvent}
            eventLimit={true}
            displayEventEnd={true}

          />

when I run it, I get:

I want to separate between days like a yellow line :

My package.json :

I try to add this css :

.fc-timeGrid-view .fc-time-grid tbody tr:nth-of-type(even) {
    background: rgba(246, 246, 246, 0.667);
}

.fc-timeGrid-view .fc-widget-content {
  border-right: 2px solid #EE7 !important;
}

.fc-timeGrid-view .fc-widget-content:first-child {
  border-right: inherit !important;
}

But it doesn't working.

How can I fix it ?

Plugins Prop not working

Error: The FullCalendar view "dayGridMonth" does not exist. Make sure your plugins are loaded correctly.

import React from 'react';
import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';
import '@fullcalendar/core/main.css';
import '@fullcalendar/daygrid/main.css';

const Calendar = props => {
    return <FullCalendar defaultView="dayGridMonth" plugins={ [dayGridPlugin] } />;
};

export default Calendar;

Calendar view not updating on re-render

On component, re-rendering changes are reflecting on various parts of UI. Change of view not reflecting.

Duplicated events rendered on the calendar after external drag and drop

Hi, not sure if this is a bug or I am stupid. Here is the codesandbox:

https://codesandbox.io/s/strange-pine-5xkre

Expected behavior that the one event will be rendered and saved in the state, however I am getting duplicated events after I am using eventRecieve triggered after the external drop.

Is there any way to fetch events data on prev/next click of calendar?

Feature Requests

Kindly explain which method/function to be call to implement this feature. which callback functions are able to return values on changing the month that can be us to fetch events data dynamically from API.

How to get view

Hi,

Is there a way to get active view after change the view? In full calendar docs there is a callback method called viewRender. But I could not find a way to fire it.

Events out of sync with react state

Bug Reports

If you drag and drop an event, the event is changed in the FullCalendar itself, even if you don't modify the passed events. This makes sense for non-react applications where you don't have a state, but I don't like that behavior in react.

Can't go to a specific date on Full Calendar

I use the Full Calendar of primereact, but I need to select a specific year and month. I have separate date picker for this purpose. But when I try to change date with gotoDate method of Full Calendar,

there is an error

'Uncaught TypeError: Cannot read property 'onViewDateChange' of null'

//method on datepicker change
 
 handleChange(date) {
    console.log(date);
    this.setState({
      startDate: date.value,
    });
      const calendarEl = document.getElementById('fullCalendar');
      const calendar = new Calendar(calendarEl);
      calendar.gotoDate(date.value);
      // calendar.gotoDate(this.state.startDate);
    }
  }

//datepicker
<Calendar view="month" dateFormat="mm/yy" value={startDate} onChange={this.handleChange} yearNavigator yearRange="2015:2030"/>
//calendar
 <FullCalendar
                          id="fullCalendar"
                          firstDay={1}
                          defaultView={`${CalendarRepo()
                            .isCalendarModelMonth(model) === 'month' ? 'dayGridMonth' : 'timeGridWeek'}`}
                          header={{
                            left: 'prev,next today, custom',
                            center: 'title',
                            right: 'dayGridMonth,timeGridWeek',
                          }}
                          customButtons={{
                            custom: {
                              text: 'custom 1',
                              click() {
                                calendar.gotoDate();
                                alert('clicked custom button 1!');
                              },
                            },
                          }}
                          nowIndicator
                          displayEventEnd={{
                            month: false,
                            basicWeek: true,
                            default: false,
                          }}
                          businessHours
                          timeZone="Europe/Kiev"
                          selectable
                          rerenderDelay={10}
                          eventDurationEditable
                          editable
                          droppable
                          eventDrop={(info) => {
                            this.handleDragEvent(info.event.id, info.event.title, info.event.start, info.event.end, info.event.allDay);
                          }}
                          plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin, bootstrapPlugin, momentTimezonePlugin]}
                          themeSystem="bootstrap"
                          events={model.events}
                          eventReceive={this.eventReceive}
                          eventClick={this.handleEventClick}
                          dateClick={this.handleDateClick}
                          eventLimit
                        />

I created an event in the weekly view and tried to go to the monthly view and the console showed me TypeError: view.computeEventDraggable is not a function.

I am working with fullcalendar (https://fullcalendar.io) in react, my problem is when I create an event in the week view and try to go to the monthly view the console shows this error:

Uncaught TypeError: view.computeEventDraggable is not a function
    at TimeGridEventRenderer.renderSegHtml (main.esm.js: 155)
    at TimeGridEventRenderer.FgEventRenderer.renderSegEls (main.js: 9531)
    at TimeGridEventRenderer.FgEventRenderer.renderSegs (main.js: 9486)
    at TimeGrid.res [as renderFgEvents] (main.js: 3911)
    at TimeGrid.render (main.esm.js: 628)
    at TimeGrid.Component.receiveProps (main.js: 4802)
    at SimpleTimeGrid.render (main.esm.js: 1427)
    at SimpleTimeGrid.Component.receiveProps (main.js: 4802)
    at TimeGridView.render (main.esm.js: 1563)
    at TimeGridView.Component.receiveProps (main.js: 4802)
    at CalendarComponent.renderView (main.js: 7639)
    at CalendarComponent.render (main.js: 7549)
    at CalendarComponent.Component.receiveProps (main.js: 4802)
    at Calendar.renderComponent (main.js: 8298)
    at Calendar.executeRender (main.js: 8250)
    at Calendar.tryRerender (main.js: 8227)
    at Calendar.requestRerender (main.js: 8218)
    at Calendar.dispatch (main.js: 8201)
    at Calendar.changeView (main.js: 8538)
    at HTMLButtonElement.buttonClick (main.js: 7389)

My declaration of fullcalendar looks like this:
IMPORTS:
import FullCalendar from "@fullcalendar/react";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";
import interactionPlugin from "@fullcalendar/interaction";

import "@fullcalendar/core/main.css";
import "@fullcalendar/daygrid/main.css";
import "@fullcalendar/timegrid/main.css";
...
package.json
@fullcalendar/core": "^4.2.0",
"@fullcalendar/daygrid": "^4.2.0",
"@fullcalendar/interaction": "^4.3.0",
"@fullcalendar/react": "^4.2.0",
"@fullcalendar/timegrid": "^4.3.0",
...
<FullCalendar
defaultView="dayGridMonth"
header={{
left: "prev,next today",
center: "title",
right: "dayGridMonth,timeGridWeek,timeGridDay,listWeek"
}}
rerenderDelay={10}
eventDurationEditable={false}
editable={true}
droppable={true}
plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
ref={this.calendarComponentRef}
weekends={this.state.calendarWeekends}
events={this.state.calendarEvents}
eventDrop={this.drop}
drop={this.drop}
eventReceive={this.eventReceive}
eventClick={this.eventClick}
dateClick={ this.handleDateClick }
/>
I would very much appreciate some help, thanks

Bug Schedular ReactJs

None of the resource view is working fine for me. All resources are broken somehow.

`import React, { Component } from 'react';
import FullCalendar from '@fullcalendar/react'
import resourceCommonPlugin from '@fullcalendar/resource-common';
import resourceDayGridPlugin from '@fullcalendar/resource-daygrid';
import resourceTimeGridPlugin from '@fullcalendar/resource-timegrid';
import resourceTimelinePlugin from '@fullcalendar/resource-timeline';
import listPlugin from '@fullcalendar/list';

class Dashboard extends Component {

calendarComponentRef = React.createRef()
state = {
    calendarWeekends: true,
    calendarEvents: [ // initial event data
        { title: 'Event Now', start: '2019-06-07' }
    ]
}


render() {
    return (
        <div className="animated fadeIn">
            <FullCalendar
                schedulerLicenseKey="KEY-REMOVED-ON-PURPOSE"
                now='2019-06-07'
                allDayDefault="true"
                aspectRatio='1.8'
                scrollTime='00:00'
                ref={this.state.calendarComponentRef}
                header={this._headerOptions()}
                resourceLabelText="Team"
                resources={
                    [
                        { id: 'a', title: 'Auditorium A' },
                        { id: 'b', title: 'Auditorium B', eventColor: 'green' },
                        { id: 'c', title: 'Auditorium C', eventColor: 'orange' },
                        { id: 'd', title: 'Auditorium D', children: [
                                { id: 'd1', title: 'Room D1' },
                                { id: 'd2', title: 'Room D2' }
                            ] },
                        { id: 'e', title: 'Auditorium E' },
                        { id: 'f', title: 'Auditorium F', eventColor: 'red' },
                        { id: 'g', title: 'Auditorium G' },
                        { id: 'h', title: 'Auditorium H' },
                        { id: 'i', title: 'Auditorium I' },
                        { id: 'j', title: 'Auditorium J' },
                        { id: 'k', title: 'Auditorium K' },
                        { id: 'l', title: 'Auditorium L' },
                        { id: 'm', title: 'Auditorium M' },
                        { id: 'n', title: 'Auditorium N' },
                        { id: 'o', title: 'Auditorium O' },
                        { id: 'p', title: 'Auditorium P' },
                        { id: 'q', title: 'Auditorium Q' },
                        { id: 'r', title: 'Auditorium R' },
                        { id: 's', title: 'Auditorium S' },
                        { id: 't', title: 'Auditorium T' },
                        { id: 'u', title: 'Auditorium U' },
                        { id: 'v', title: 'Auditorium V' },
                        { id: 'w', title: 'Auditorium W' },
                        { id: 'x', title: 'Auditorium X' },
                        { id: 'y', title: 'Auditorium Y' },
                        { id: 'z', title: 'Auditorium Z' }
                    ]
                }
                events={
                    [
                        { id: '1', resourceId: 'b', start: '2019-06-07T02:00:00', end: '2019-06-07T07:00:00', title: 'event 1' },
                        { id: '2', resourceId: 'c', start: '2019-06-07T05:00:00', end: '2019-06-07T22:00:00', title: 'event 2' },
                        { id: '3', resourceId: 'd', start: '2019-06-06', end: '2019-06-08', title: 'event 3' },
                        { id: '4', resourceId: 'e', start: '2019-06-07T03:00:00', end: '2019-06-07T08:00:00', title: 'event 4' },
                        { id: '5', resourceId: 'f', start: '2019-06-07T00:30:00', end: '2019-06-07T02:30:00', title: 'event 5' }
                    ]
                }
                defaultView="listWeek"
                plugins={
                    [
                        resourceCommonPlugin,
                        resourceTimelinePlugin,
                        resourceDayGridPlugin,
                        resourceTimeGridPlugin,
                        listPlugin
                    ]
                } />
        </div>
    );
}

_headerOptions() {
    return {
        left: 'prev,next today',
        center: 'title',
        right: 'resourceTimelineWeek,resourceDayGridWeek,resourceTimeGridWeek,listWeek'
    };
}

}

export default Dashboard;
`

You can view the broken views as on following screenshots:

Resource Timeline:

Resource Daygrid

Resource Timegrid

Following css is included in file as well:
@import '~@fullcalendar/core/main.css'; @import '~@fullcalendar/resource-timeline/main.css';

Just to clarify my case further, events renders perfectly fine in simple ListView that is loaded for verifying this test case.

clear out gh-pages

Just some housekeeping for this repo: could you clear out everything related to gh-pages?

timeGridPlugin is broken for React (and possibly with TypeScript) - runnable code available

timeGridPlugin isn't working for React.
To be more specific, events are not displayed within the calendar.

I've made a minimum runnable sample with create-react-app at https://github.com/Hiroki111/fullcalendar-test

After you create a folder in your machine...
git clone [email protected]:Hiroki111/fullcalendar-test.git
yarn install
yarn start

Then, you'll see the calendar in your browser.

If you scroll down to the bottom...

Thank you for your help.

yarn: v1.13.0
typescript:3.4.2

Using locale does not translate text in the buttons

Using locale translates text in the calendar but not in the buttons above (today, month, week, day)

For example, using Spanish locale in this sandbox:
https://codesandbox.io/s/react-fullcalendar-external-events-drag-and-drop-vyokn

Could you update to alpha 4 please?

Is there any way you could upgrade this to alpha .4 from the current .2?

When the scheduler is connected, the Fullcalendar starts to work incorrectly

After connecting the scheduler, the calendar starts to work incorrectly, that using the api methods and that with the usual display an error appears Uncaught TypeError: equalityFunc is not a function

example:
api methods navigation: https://codesandbox.io/s/o40z811866
default navigation: https://codesandbox.io/s/wqlq3l16j7

Also, when you switch the view, after several times, the calendar starts to appear so:

Check in api methods navigation: month -> prev/next -> day/week/month/prev/next
Check in default navigation: month -> prev/next -> day/week/month/prev/next

maybe I'm doing something wrong?

but if not used @fullcalendar/resource-daygrid and @fullcalendar/resource-timegrid, then everything is fine working: https://codesandbox.io/s/rmly58zpmq

Re-Rendering of eventRender on every component change in fullcalendar 4.3.0

Hi,

I have the problem that the FullCalendar component with defined eventRender prop re-renders even if none of the props of FullCalendar changes.

Background is, that I add a button with menu and a longDescription to every event. But if I just open the menu or open an editor for the event (in a modal), every event is re-rendered, which makes rendering quite slow and you can't rely on a dom element.

Is it possible to prevent FullCalendar to re-render all the events during component update / change?

thx
Chris

Set businessHours on eventSource response

I'm trying to dinamically change the businessHours depending on the week view.

   <FullCalendar
      ref={calendarRef}
      defaultView="timeGridWeek"
      plugins={[timeGridPlugin, interactionPlugin]}
      allDaySlot={false}
      weekends={false}
      height="auto"
      nowIndicator={true}
      editable={true}
      selectable={true}
      eventSources={["/blocks?agent_id=2"]}
      eventSourceSuccess={(content, _xhr) => {
        calendarRef.current.calendar.setOption(
          "businessHours",
          content[content.length - 1]
        );
      }}
      eventTimeFormat={{
        hour: "2-digit",
        minute: "2-digit",
        hour12: false
      }}
  />

This works fine, as I can see the businessHours been applied.
The problem is that changing businessHours trigger another render of the calendar, which calls fetch the events again and start an infinite loop.

I used to do this on V3 with jQuery and worked fine.
jQuery code for reference (maybe what I'm doing now is not equivalent):

$('#event_calendar').fullCalendar({
    defaultView: 'agendaWeek',
    allDaySlot: false,
    height: 'auto',
    selectable: true,
    events: {
      url: '/blocks?agent_id=2',
      success: function(data, status, response) {
        $('#event_calendar').fullCalendar('option', {
            businessHours: data[data.length -1]
        });
      }
    },
...
});

Thanks in advance for any help.

Not rendering content if calendar is placed in tab

Bug Reports Maybe?

If the calendar is not rendered because it is inside a tabpane (reactstrap), it will not show its content as you switch to that pane. After causing any rerender event it works.
Is this a bug?
Of course I can call render manually
Edit:
No calling calender.render() in the componentDidUpdate() method.

A quite dirty hack (show is true if the tab is shown):

import React, {Component} from "react";
import FullCalendar from '@fullcalendar/react'
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import momentTimezonePlugin from '@fullcalendar/moment-timezone';
import '@fullcalendar/core/main.css';
import '@fullcalendar/daygrid/main.css';
import '@fullcalendar/timegrid/main.css';

export default class MyCalendar extends Component {
    constructor(props) {
        super(props);
        this.state = {};
        this.calendar = React.createRef();
    }
    /* Does not help
    componentDidUpdate(prevProps){
        if(!prevProps.show && this.props.show){
            this.calendar.current.render() //calling this.calendar.current.calendar.render() does something but still broken
        }
    }*/

    render(){
        return <div>
            { this.props.show &&
            <FullCalendar
            ref={this.calendar}
            defaultView="timeGridWeek"
            plugins= {[timeGridPlugin ]}
            defaultView= "timeGridWeek"
            header= {false}
            />
        }
        </div>
    }
}

this.fullCalendar.content =null ? why？

hi,i have a issue.
Create a reference to the component to use Full Calendar methods，but this.fullCalendar.content is null.

1、this.fullCalendar.content =null ?
constructor(props) {
super(props);
this.fullCalendar = React.createRef(); // this.fullCalendar.content =null ?
this.state = {
events: []
};
}
2、 ref={this.fullCalendar}
<FullCalendar
ref={this.fullCalendar}
id="your-custom-calendar-ID"
header={{
left: 'title',
center: '',
right: '' // agendaDay,agendaWeek,month
}}

Full Calendar Scheduler via SharePoint Framework (REACT)

I am trying to create a SharePoint Framework webpart (based on REACT) using FullCalendar Scheduler. Full Calendar React daygrid works but as soon as I import Scheduler addon (@fullcalendar/resource-timeline), build failed with following error:

The expected type comes from property 'plugins' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly & Readonly<{ children?: ReactNode; }>

import * as React from 'react'
import FullCalendar from '@fullcalendar/react'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import resourceTimelinePlugin from '@fullcalendar/resource-timeline'

import '@fullcalendar/core/main.css';
import '@fullcalendar/daygrid/main.css';
import '@fullcalendar/timegrid/main.css';

export default class MyCall extends React.Component {
render() {
return (
<FullCalendar
defaultView="dayGridMonth"
header={{
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
}}
plugins={[ dayGridPlugin, timeGridPlugin, resourceTimelinePlugin ]} />
)
}
}

If I remove the import statement for @fullcalendar/resource-timeline, it works fine but as soon as I add the import statement for scheduler, build error generated

Error occured when fetching API data on prev/next click of the calendar

There is an issue or bug occuring when I try to get API data on prev/next click of the calendar and after that calendar becomes fully unresponsive.

error is: TypeError: Cannot read property 'daysOfWeek' of undefined.
Kindly anyone give solution on this.

Custom views with `dayCount` or `visibleRange` has broken `prev` and `next`

Hi :)
I want a custom dayGridThreeDay views, analogous to the one described in the docs. Using duration (https://fullcalendar.io/docs/duration) works as expected. visibleRange (https://fullcalendar.io/docs/visibleRange) and dayCount (https://fullcalendar.io/docs/dayCount) however seems bugged.

You can easily reproduce the bug with this minimal create-react-app app: https://github.com/carlomartinucci/fullcalendar-react-views-bug

just run

git clone [email protected]:carlomartinucci/fullcalendar-react-views-bug.git
cd fullcalendar-react-views-bug
yarn install
yarn start

Relevant code follows:

// App.js
import React from "react";
import FullCalendar from "@fullcalendar/react";
import dayGridPlugin from "@fullcalendar/daygrid";
import dayjs from "dayjs";

import "./calendar.scss";

const views = {
  dayGridThreeDay: {
    type: 'dayGrid',
    dayCount: 3,
    // visibleRange: (currentDate) => {
    //   return {
    //     start: dayjs(currentDate).subtract(1, 'day').format('YYYY-MM-DD'),
    //     end: dayjs(currentDate).add(2, 'day').format('YYYY-MM-DD')
    //   };
    // }
  }
}

const plugins = [dayGridPlugin];

const App = props => (
  <FullCalendar
    defaultView="dayGridThreeDay"
    views={views}
    plugins={plugins}
    events={[]}
  />
);

export default App;

Toggle dayCount and visibleRange to reproduce both bugs. I am using day-js for the visibleRange mode, but it is not relevant.

Expected behaviour

both with dayCount or with visibleRange, you can click the default top left navigation buttons prev and next. Prev will shift the view one day back, next will shift the view one day forward.

Actual behaviour with dayCount

clicking next works. Clicking prev once will seem to work, but clicking again will not, and clicking next will go 2 days forward, like you never clicked prev at all.

Actual behaviour with visibleRange

clicking prev once will seems to work, but hitting it again will not change anything, and clicking next will go 2 days forward, just once. clicking back again will go 2 days back, just once, et cetera.

Regression since version 4.4.0

After upgrading to version 4.4.0 i get the following exception, during selecting a timespan in the calender. When reverting back to 4.3.0 it works as usual.

SitesCalendar.js:585 TypeError: Cannot read property 'calendar' of undefined
    at TimeGridSlicer../node_modules/@fullcalendar/core/main.esm.js.Slicer._sliceDateSpan (main.esm.js:8519)
    at TimeGridSlicer.sliceDateSelection (main.esm.js:1552)
    at TimeGridSlicer../node_modules/@fullcalendar/core/main.esm.js.Slicer.sliceProps (main.esm.js:8446)
    at main.esm.js:82
    at mapHash (main.esm.js:1265)
    at ResourceTimeGrid../node_modules/@fullcalendar/resource-timegrid/main.esm.js.ResourceTimeGrid.render (main.esm.js:81)
    at ResourceTimeGrid../node_modules/@fullcalendar/core/main.esm.js.Component.receiveProps (main.esm.js:3951)
    at ResourceTimeGridView../node_modules/@fullcalendar/resource-timegrid/main.esm.js.ResourceTimeGridView.render (main.esm.js:161)
    at ResourceTimeGridView../node_modules/@fullcalendar/core/main.esm.js.Component.receiveProps (main.esm.js:3951)
    at CalendarComponent../node_modules/@fullcalendar/core/main.esm.js.CalendarComponent.renderView (main.esm.js:6298) {componentStack: "↵    in FullCalendar (at SitesCalendar.js:591)↵    in SitesCalendar"}

It looks like the https://github.com/fullcalendar/fullcalendar/blame/master/packages/core/src/common/slicing-utils.ts#L168 context refactor commit broke something in combination with how the fullcaendar-react component works.

Events as functions not called on state change?

I'm not sure if this is the intended behavior but my function in eventSources is not fired when the component has been rerendered due to state change.

<FullCalendar 
        slotDuration='00:30:00'
        businessHours={businessHours}
        timeZone='Asia/Seoul'
        ref={this.calendarRef}
        locale={koLocale} 
        defaultView="timeGridWeek" 
        plugins={[timeGridPlugin, listPlugin, interactionPlugin]}
        eventAllow={this.eventAllowance}
        eventLimit={true}
        eventDurationEditable={true}
        editable={true}
        droppable={true}
        buttonIcons={true}
        eventSources={[this.loadScheduleFromApi]}
        eventClick={this.eventClick}
        eventDrop={this.eventUpdateTime}
        eventResize={this.eventUpdateTime}
        drop={this.externalEventDrop}
        select={this.select}
        allDaySlot={false}
        selectable={true}
        header={{
                left: "prev,next today",
                center: "title",
                right: "timeGridDay,timeGridWeek,listMonth"
        }}
 />

I tried calling refetch() myself on state change but this triggers another render because of state change and another render trigger refetch and repeating infinitely

if(this.calendarRef && this.calendarRef.current){
        let eventSources = this.calendarRef.current.calendar.getEventSources()
        eventSources[0].refetch()
}

I want my eventSource function to be fired on both date change and state change. How can I achieve this? Also is there a way to distinguish whether eventSource function has been fired by date change or state change?(possibly send custom argument?)

`columnHeaderHtml` not worked when passing React node

Bug Reports

You MUST post a recreation or else your issue will be CLOSED without explanation.
Instructions: https://fullcalendar.io/reporting-bugs

Feature Requests

Search the issue tracker for an existing ticket before creating a new one.
Instructions: https://fullcalendar.io/requesting-features

(Please erase the above text and begin typing. Thanks!)

Change the firstDay of the week when on timeGridWeek view

Hi,

I am trying to modify the week view so that it always starts on Monday.
I am trying to pass firstDay= '1' as a prop but this does not seem to work, so not sure if I am implementing it properly.

Would you be able to provide some advice? Thanks a lot!

See the component code below:

import React, {Component} from 'react'
import FullCalendar from '@fullcalendar/react'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction' // needed for dayClick

import './FullCalendar.css'

export default class FullCalendarExample extends Component {

  calendarComponentRef = React.createRef()
  state = {
    calendarWeekends: true,
    calendarEvents: [ // initial event data
      { title: 'Event Now', start: new Date() },
      { title: 'pasta', start: new Date('2019-05-08T15:00:00+01:00'), ingredients: 'chorizo!'}
    ]
  }

  render() {
    return (
      <div className='demo-app'>
        <div className='demo-app-calendar'>
          <FullCalendar
            defaultView="timeGridWeek"
            firstDay= '1'
            locale= 'en'
            firstDay='1'
            header={{
              left: 'prev,next today',
              center: 'title',
              right: 'dayGridMonth,timeGridWeek,timeGridDay'
            }}
            plugins={[ dayGridPlugin, timeGridPlugin, interactionPlugin ]}
            ref={ this.calendarComponentRef }
            weekends={ this.state.calendarWeekends }
            events={ this.state.calendarEvents }
            dateClick={ this.handleDateClick }
            />
        </div>
      </div>
    )
  }


  handleDateClick = (arg) => {
    if (window.confirm('Would you like to add a meal to ' + arg.dateStr + ' ?')) {
      console.log(arg);
      this.setState({  // add new event data
        calendarEvents: this.state.calendarEvents.concat({ // creates a new array
          title: 'New Event',
          start: arg.date,
          allDay: arg.allDay
        })
      })
    }
  }

}

I had an error of length undefined

Bug Reports

error in length of undefined :
Can somebody help what is plgin.dep this throws error of undefined
Cannot read property 'length' of undefined
at PluginSystem.push../node_modules/@fullcalendar/core/main.esm.js.PluginSystem.add (main.esm.js:4139)
at Calendar.push../node_modules/@fullcalendar/core/main.esm.js.Calendar.addPluginInputs (main.esm.js:6607)
at new Calendar (main.esm.js:6594)
at FullCalendar.push../node_modules/@fullcalendar/react/main.esm.js.FullCalendar.componentDidMount (main.esm.js:50)
at commitLifeCycles (react-dom.development.js:22101)
at commitLayoutEffects (react-dom.development.js:25344)
at HTMLUnknownElement.callCallback (react-dom.development.js:336)
at Object.invokeGuardedCallbackDev (react-dom.development.js:385)
at invokeGuardedCallback (react-dom.development.js:440)
at commitRootImpl (react-dom.development.js:25082)
at unstable_runWithPriority (scheduler.development.js:697)
at runWithPriority$2 (react-dom.development.js:12149)
at commitRoot (react-dom.development.js:24922)
at finishSyncRender (react-dom.development.js:24329)
at performSyncWorkOnRoot (react-dom.development.js:24307)
at react-dom.development.js:12199
at unstable_runWithPriority (scheduler.development.js:697)
at runWithPriority$2 (react-dom.development.js:12149)
at flushSyncCallbackQueueImpl (react-dom.development.js:12194)
at flushSyncCallbackQueue (react-dom.development.js:12182)
at scheduleUpdateOnFiber (react-dom.development.js:23709)
at Object.enqueueSetState (react-dom.development.js:13994)
at LoadableComponent.dll_ef0ff7c60362f24a921f../node_modules/react/cjs/react.development.js.Component.setState (react.development.js:325)
at update (index.js:205)

How to pass height as a prop?

events function rendering on all eventsClick

I have this where
events call the getCalendarData() that returns in the SuccessCallback the array of appointments that should be displayed.

But the issue is that this method is being rendered 3 times.

Also when EventClick (that opens a popup) is being clicked, the getCalendarData() is being called 12 times for no reason.

      <FullCalendar
                  defaultView="dayGridMonth"
                  header={{
                    left: "prev,next today",
                    center: "title",
                    right: ""
                    // dayGridMonth,listWeek"
                  }}
                  plugins={[
                    dayGridPlugin,
                    timeGridPlugin,
                    interactionPlugin,
                    bootstrapPlugin,
                    listPlugin
                  ]}
                  ref={calendarComponentRef}
   
                  dateClick={openDateList}
                  editable={true}
                  eventStartEditable={false}
                  eventResizableFromStart={true}
                  eventDurationEditable={true}
                  dragRevertDuration={true}
                  eventLimit={4}
                  slotDuration={30}
                  eventClick={seeEventAppointment}
                  events={(fetchInfo, successCallback, failureCallback) =>
                    getCalendarData(fetchInfo, successCallback, failureCallback)
                  }
                  //   events={calendarEvents}
                />

eventRender callback in react component ?

Trying to use the eventRender callback https://fullcalendar.io/docs/eventRender it doesn't seems to trigger.

	<FullCalendar
		noEventsMessage="No Bookable Slots To Display"
		ref={ calendarRef }
		timeZone="UTC"
		plugins={ [ rrulePlugin, dayGridPlugin, listPlugin ] }
		customButtons={ {
			listMonthButton: {
			text: 'month',
			click() {
				const calendarApi = calendarRef.current.getApi();
				calendarApi.changeView( 'listMonth' );
			      },
		       },
			listWeekButton: {
				text: 'week',
				click() {
					const calendarApi = calendarRef.current.getApi();
					calendarApi.changeView( 'listWeek' );
				},
			},
			listDayButton: {
				text: 'day',
				click() {
					const calendarApi = calendarRef.current.getApi();
					calendarApi.changeView( 'listDay' );
				},
			},
		} }
		header={ {
			left: 'prev,next today',
			center: 'title',
			right: 'list' === attributes.view ? 'listDayButton,listWeekButton,listMonthButton' : 'dayGridMonth,dayGridWeek,dayGridDay',
		} }
		defaultView={ 'list' === attributes.view ? 'list' : 'dayGridWeek' }
			events={ {
				url: '?bkap_events_feed=json',
				method: 'POST',
				extraParams: params,
			} }
		eventRender={ () => console.log( 'test' ) }
	/>

In NextJs Element not defined error

Bug Reports

In next Js app I get erro element not defined

ReferenceError: Element is not defined
reactive-framework: at C:\Users\Usha\Documents\Github\reactive\FIS_UX_platform\node_modules@fullcalendar\core\main.js:108:25
reactive-framework: at C:\Users\Usha\Documents\Github\reactive\FIS_UX_platform\node_modules@fullcalendar\core\main.js:8:68
reactive-framework: at Object. (C:\Users\Usha\Documents\Github\reactive\FIS_UX_platform\node_modules@fullcalendar\core\main.js:11:2)
reactive-framework: at Module._compile (internal/modules/cjs/loader.js:1144:30)
reactive-framework: at Object.Module._extensions..js (internal/modules/cjs/loader.js:1164:10)
reactive-framework: at Module.load (internal/modules/cjs/loader.js:993:32)
reactive-framework: at Function.Module._load (internal/modules/cjs/loader.js:892:14)
reactive-framework: at Module.require (internal/modules/cjs/loader.js:1033:19)
reactive-framework: at require (internal/modules/cjs/helpers.js:72:18)
reactive-framework: at Object.@fullcalendar/core (C:\Users\Usha\Documents\Github\reactive\FIS_UX_platform\packages\ethos-app.next\server\static\development\pages_app.js:11317:18)
reactive-framework: at webpack_require (C:\Users\Usha\Documents\Github\reactive\FIS_UX_platform\packages\ethos-app.next\server\static\development\pages_app.js:23:31)
reactive-framework: at Module../src/Components/Organisms/Calendar/Calendar.tsx (C:\Users\Usha\Documents\Github\reactive\FIS_UX_platform\packages\ethos-app.next\server\static\development\pages_app.js:6773:76)
reactive-framework: at webpack_require (C:\Users\Usha\Documents\Github\reactive\FIS_UX_platform\packages\ethos-app.next\server\static\development\pages_app.js:23:31)
reactive-framework: at Module../src/Components/Organisms/index.ts (C:\Users\Usha\Documents\Github\reactive\FIS_UX_platform\packages\ethos-app.next\server\static\development\pages_app.js:9584:76)
reactive-framework: at webpack_require (C:\Users\Usha\Documents\Github\reactive\FIS_UX_platform\packages\ethos-app.next\server\static\development\pages_app.js:23:31)
reactive-framework: at Module../src/Components/Templates/Layout/Layout.tsx (C:\Users\Usha\Documents\Github\reactive\FIS_UX_platform\packages\ethos-app.next\server\static\development\pages_app.js:9623:68)
reactive-framework:

Is your bug/feature applicable to the core project, without React?

If so, use the main tracker: https://github.com/fullcalendar/fullcalendar/issues

(Please erase the above text and begin typing. Thanks!)

Is this repo dead?

Is anyone maintaining this repo? Drag and drop is broken, issues are very stale. I would just love if I could ask someone a few questions, I am happy forking the repo and working on it but I would love if the people who built it could point me in the right direction...

Drag and drop broken? onReceiveEvent called twice, duplicate events created

Here is a re-creation from another user with the same issue here:

https://codesandbox.io/s/strange-pine-5xkre

Any idea what the issue could be ? Doesn't seem like this is intentional. It seems drag and drop is broken