How to refresh events when filtering the table

[InfinityXTech]

To my widget I added InteractsWithPageTable and in fetchEvents this $this->getPageTableQuery()

It works great after refreshing page but how could I refresh events after the table has been modified by filters/tabs?

[shahzadwaris]

Hi @soixt, I'm also trying to add the filters. Did you find any solution for this? Thanks

[orebarranco]

Hello @shahzadwaris, did you find any solution for this?
I'm trying to add the filters.

[jncalderon]

@orebarranco @shahzadwaris @InfinityXTech do you find a solution? In my case I trying to create a select for choose the "assignee" and filter for it, but I don't really sure how implement it

[InfinityXTech]

I did not, there is another calendar plugin, so maybe check that?

[jncalderon]

I did through header actions, doesn't fancy but it works!

protected function headerActions(): array
    {
        return [
            Actions\CreateAction::make()
                ->label(__('New appointment'))
                ->mountUsing(
                    function (Forms\Form $form, array $arguments) {
                        $form->fill([
                            'starts_at' => $arguments['start'] ?? null,
                            'ends_at' => $arguments['end'] ?? null,
                            'user_id' => auth()->id(),
                        ]);
                    }
                ),
            FActions\Action::make('Filter by user')
                ->translateLabel()
                ->form([
                    Forms\Components\Select::make('selectedUsers')
                        ->translateLabel()
                        ->multiple()
                        ->options(User::all()->pluck('name', 'id'))
                        ->default($this->selectedUsers)
                        ->reactive()
                ])
                ->badge(function () {
                    return count($this->selectedUsers ?? []);
                })
                ->action(function (array $data) {
                    $this->selectedUsers = $data['selectedUsers'];
                    $this->fetchEvents([
                        'start' => $this->start,
                        'end' => $this->end,
                    ]);
                    $this->dispatch('filament-fullcalendar--refresh');
                }),
        ];
    }

[felahdab]

Hello all.

To refresh the calendar when you change the filters and/or the search in the table, you can dispatch the filament-fullcalendar--refresh from the page (the Filament\Pages\Page) which you have the table (for example ListRecords which contains a Filament Table).

To do this, you can add handleTableFilterUpdates and/or updatedTableSearch to the appropriate page like below.
Don't forget to call the parent method.

protected function handleTableFilterUpdates(): void
    {
        parent::handleTableFilterUpdates();

         // Now that we have refreshed the livewire part, we can trigger a full calendar refresh.
        $this->dispatch('filament-fullcalendar--refresh');
    }

public function updatedTableSearch(): void
    {
        parent::updatedTableSearch();

       // Now that we have refreshed the livewire part, we can trigger a full calendar refresh.
        $this->dispatch('filament-fullcalendar--refresh');
    }

And of course, you should use the $this->getPageTableRecords()->items() method in the public function fetchEvents(array $fetchInfo): array method in order to retrieve the same records as the filtered/searched table.

Regards.
Florian.

[LeamonaDor1]

@felahdab
Your idea seems really good, but I didn't really understand it. Can you attach more code snippets and explanations?
Thanks in advance!

[felahdab]

When you are in a Page which contains a Table (let's say ListRecord):

• When you change the filter setting, the handleTableFilterUpdates method is called.
• When you change the search setting, the updatedTableSearch method is called.
  Therefore, you can overload these 2 methods to just dispatch the Livewire event that you need to react to those changes. For saade/filament-fullcalender, it's filament-fullcalendar--refresh

On the other part, in saade/filament-fullcalendar, the method fetchevent is defined as such by default:

 /**
     * FullCalendar will call this function whenever it needs new event data.
     * This is triggered when the user clicks prev/next or switches views.
     * @param array{start: string, end: string, timezone: string} $info
     */
    public function fetchEvents(array $info): array
    {
        return [];
    }

It's up to you to fill it to fetch the data you want to display in the calendar.

And accessing the table data from a widget in the same page is covered by filament documentation:
Accessing page table data in a widget

This is a way to take into account the filters and search parameters of the table into the widget (for example to refresh statistics).
So you "just" have to do the same thing and use this method in the fetchEvents method to load (and reload) the appropriate date on each update of the filter and/or search parameter of the table.

Hope it's clearer.
Regards.
Florian