How to use fullcalendarjs react event update ito update the view start date?

Question

Hi all I am using fullcalendarjs with react + typescript.

I have one issue when I want to update an existing event.

I can update the event title fine using arg.event.mutate and this updates the calendar view as well, BUT the issue is that the start and end dates are ignored and calendar does not refresh.

If I update manually like below

//arg.event.setStart(item.postAtUtcTimestamp);
                //arg.event.setEnd(null);

it works fine and the view is updated with the new values BUT the issue is that I receive 2 eventChange events and not only 1.

I rely to eventChange event for updating the event in my Database via api.

I created some code so you can reproduce the issue, code in ts is below:

import React from 'react';

import { DateSelectArg, EventAddArg, EventChangeArg, EventClickArg } from '@fullcalendar/core'; // must go before plugins
import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin, { DateClickArg } from '@fullcalendar/interaction';
import FullCalendar from '@fullcalendar/react';
import timeGridPlugin from '@fullcalendar/timegrid';


const Magic: React.FC = () => {

    const handleDateClick = (arg: DateClickArg): void => {
        arg.view.calendar.addEvent({
            title: 'new event',
            start: Date.now(),
            allDay: arg.allDay,
            rawItem: {a: 2,},
        });
    };

    const handleEventClick = (arg: EventClickArg): void => {
        arg.event.mutate({
            standardProps: {
                title: 'new event text updated',
                start: Date.now() + 3600,
                end: null,
            },
            extendedProps: {
                rawItem: {c: 'newitemisupdated'},
            },
        });
    };

    return (
        <FullCalendar
            events={[]}
            plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
            initialView="timeGridWeek"
            nowIndicator={true}
            headerToolbar={{
                center: 'dayGridMonth,timeGridWeek,timeGridDay',
            }}
            dateClick={handleDateClick}
            eventClick={handleEventClick}
        />
    );
}
export default Magic;

1. Click on some date and a new event will be added
2. Click the created event and I am updating the title + date. You will see only the new title in the view and date will still be the same (old date+time)

Answer 1

Unfortunately fullCalendar doesn't provide the ability to update all the properties of an event in one method call (I don't know why). It requires the dates to be updated separately from other event data.

In this case you'll probably just need to call a function directly to send things to your API, rather than relying on eventChange unfortunately.