How can i reload the calendar?

[AttilioIurlaro]

I've inserted a switch into the popup of the event

When the switch is clicked the event need to disappear
How can I do that?

[aldabil21]

This sounds like the same functionality as deleting an event. when you delete an event, it disappears.

To delete event (or make event disappear), you have multiple ways to do it:

1. Use the viewer delete option. (duh,,, but I believe you don't want that?)
2. I assume you are using customViewer or viewerExtraComponent to render your switch/button? you can use the Ref approach to edit internal events state. Example like:

<Scheduler
      ref={calendarRef}
      events={EVENTS}
      customViewer={(event) => (
        <div>
          <div>Your custom popover</div>
          <button
            onClick={() => {
              const updatedEvents = calendarRef.current?.scheduler?.events?.filter(
                (e) => e.event_id !== event.event_id
              );
              calendarRef.current?.scheduler?.handleState(updatedEvents, "events");
            }}
          >
            Switch to hide
          </button>
        </div>
      )} 
    />

Feel free to re-open if you still have issues

[AttilioIurlaro]

Many thanks.
It's good but I don't know why the events disappear after 2 sec
I'm using the getRemoteEvents

[aldabil21]

Share a minimum example of the issue so I can check it out

[AttilioIurlaro]

In the meantime, I've changed my code.
Now I use the edit mode to set the event completed. And everything is good.

However I need a filter (a switch) that can be useful to show whether the event is complete or not.

I use getRemoteEvent to get the data

<Scheduler view="week" ref={calendarRef} hourFormat="24" translations={traduzioni} locale={it} month={month} week={week} editable={false} resources={resources} resourceViewMode="tabs" getRemoteEvents={fetchRemote} onConfirm={confermaOperazione} customEditor={(scheduler) => <CustomEditor scheduler={scheduler} />} // events={eventiFiltrato} viewerExtraComponent={(fields, event)=> { return ( <Box sx={{marginTop: 2}}> <RiepigoloEvento event={event} /> </Box> ); }} />

This is the fetchRemote
` const fetchRemote = async (query: RemoteQuery): Promise<ProcessedEvent[]> => {

    const { start, end } = query;
    const startDate = convertToSQLDate(start);
    const endDate = convertToSQLDate(end);
    return new Promise((res) => {
        getAllTrattative(startDate, endDate).then(data =>{
            let eventiCalendario : ProcessedEvent[] = settaEventi(data);
            setEventi(eventiCalendario);
            setEventiFiltrato(eventiCalendario.filter((evento) => evento.completato == filtroEventiCompletati));
            res(eventiCalendario)
            
        })
    });
  };`

And this is the change of the filter
const handleFiltro = () => { setfiltroEventiCompletati(!filtroEventiCompletati); setEventiFiltrato(eventi.filter((evento) => evento.completato == filtroEventiCompletati)); calendarRef.current?.scheduler?.handleState(eventiFiltrato, "events"); };

It works but only for a few seconds. He filter correctly but after 1/2 seconds the events disappear 

[aldabil21]

I'm sorry I didn't catch the issue with the above code, its not clear when the handleFiltro get called.

However, as you mention

I need a filter (a switch) that can be useful to show whether the event is complete or not

Then you can do:

1. Attach a prop to your events object like { event_id: 123, completed: true, /* ...etc */}, this might be decided on the server since you are using getRemoteEvents.
2. Use eventRenderer to render different style based on your condition (completed/not)

If that still not helping, I hope you can arrange a minimum example on a sandbox with the issue you want to describe

[AttilioIurlaro]

Point 1 done
In ProcessedEvent I have a props "completato" that check it.
I fill that on getRemoteEvents from the server

then I have a switch <Switch color="primary" checked={filtroEventiCompletati} value={filtroEventiCompletati} name="utenteAbilitato" onChange={handleFiltro} />
When you use a switch the function handleFiltro is called. This function needs to hide or visualize events on props "completato"

I don't understand what I can do with eventRenderer
Is there an explanation?
Many thanks