Loading indicator

[olivier-nolf]

Hi,

Is there anyone that tried to add a loading indicator?
If I read the documentation there is a loading callback from fullcalendar itself but this not implemented.
Maybe we need to ask for this but meanwhile someone has a workaround?

Thanks!

[bobwurtz]

@olivier-nolf were you able to figure this out? I would like to add a loading indicator. I tried publishing the view and adding wire:class.loading="opacity-50" to the section but it didn't work.

[olivier-nolf]

@bobwurtz Yes, I added the loading property in the filament-fullcalendar.js. In the export and the returned init. (as this an event from FullCalendar itself; https://fullcalendar.io/docs/loading)

export default function fullcalendar({ locale, plugins, schedulerLicenseKey, timeZone, config, editable, selectable, eventClassNames, eventContent, eventDidMount, eventWillUnmount, loading, }) { return { init() { const calendar = new Calendar(this.$el, { headerToolbar: { 'left': 'prev,next today', 'center': 'title', 'right': 'dayGridMonth,dayGridWeek,dayGridDay', }, plugins: plugins.map(plugin => availablePlugins[plugin]), locale, schedulerLicenseKey, timeZone, editable, selectable, ...config, locales, eventClassNames, eventContent, eventDidMount, eventWillUnmount, events: (info, successCallback, failureCallback) => { this.$wire.fetchEvents({ start: info.startStr, end: info.endStr, timezone: info.timeZone }) .then(successCallback) .catch(failureCallback) }, dateClick: ({ dateStr, allDay, view, resource }) => { if (!selectable) return; this.$wire.onDateSelect(dateStr, null, allDay, view, resource) }, select: ({ startStr, endStr, allDay, view, resource }) => { if (!selectable) return; this.$wire.onDateSelect(startStr, endStr, allDay, view, resource) }, loading, }) calendar.render() window.addEventListener('filament-fullcalendar--refresh', () => calendar.refetchEvents()) }, } }

Added an overlay in the fullcalender.blade.php and in the x-data of the filament-fullcalendar I added this: loading: function (isLoading) { if(isLoading) { document.querySelector('.calendar-overlay').style.display = 'flex'; } else { document.querySelector('.calendar-overlay').style.display = 'none'; } },

<div class="calendar-overlay-container"> <div class="calendar-overlay"> <div class="loader"></div> </div> <div class="filament-fullcalendar" wire:ignore ax-load ax-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('filament-fullcalendar-alpine', 'saade/filament-fullcalendar') }}" ax-load-css="{{ \Filament\Support\Facades\FilamentAsset::getStyleHref('filament-fullcalendar-styles', 'saade/filament-fullcalendar') }}" x-ignore x-data="fullcalendar({ locale: @js($plugin->getLocale()), plugins: @js($plugin->getPlugins()), schedulerLicenseKey: @js($plugin->getSchedulerLicenseKey()), timeZone: @js($plugin->getTimezone()), config: @js($this->getConfig()), editable: @json($plugin->isEditable()), selectable: @json($plugin->isSelectable()), eventClassNames: {!! htmlspecialchars($this->eventClassNames(), ENT_COMPAT) !!}, eventContent: {!! htmlspecialchars($this->eventContent(), ENT_COMPAT) !!}, eventDidMount: {!! htmlspecialchars($this->eventDidMount(), ENT_COMPAT) !!}, eventWillUnmount: {!! htmlspecialchars($this->eventWillUnmount(), ENT_COMPAT) !!}, loading: function (isLoading) { if(isLoading) { document.querySelector('.calendar-overlay').style.display = 'flex'; } else { document.querySelector('.calendar-overlay').style.display = 'none'; } }, })"> </div> </div>

So I used the standard loading event from the FullCalendar package and exposed it to the blade so I could just display the overlay or not.

[bobwurtz]

Wow thank you so much!

[bobwurtz]

I couldn't figure out how to override the vendor JS file, so I went with this instead:

@php
    $plugin = \Saade\FilamentFullCalendar\FilamentFullCalendarPlugin::get();
@endphp

<x-filament-widgets::widget>
    <div wire:loading.class="opacity-50">
        <x-filament::section>
            <div class="flex justify-end flex-1 mb-4">
                <x-filament-actions::actions :actions="$this->getCachedHeaderActions()" class="shrink-0" />
            </div>
    
            <div class="filament-fullcalendar" wire:ignore ax-load
                ax-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('filament-fullcalendar-alpine', 'saade/filament-fullcalendar') }}"
                ax-load-css="{{ \Filament\Support\Facades\FilamentAsset::getStyleHref('filament-fullcalendar-styles', 'saade/filament-fullcalendar') }}"
                x-ignore x-data="fullcalendar({
                    locale: @js($plugin->getLocale()),
                    plugins: @js($plugin->getPlugins()),
                    schedulerLicenseKey: @js($plugin->getSchedulerLicenseKey()),
                    timeZone: @js($plugin->getTimezone()),
                    config: @js($this->getConfig()),
                    editable: @json($plugin->isEditable()),
                    selectable: @json($plugin->isSelectable()),
                    eventClassNames: {!! htmlspecialchars($this->eventClassNames(), ENT_COMPAT) !!},
                    eventContent: {!! htmlspecialchars($this->eventContent(), ENT_COMPAT) !!},
                    eventDidMount: {!! htmlspecialchars($this->eventDidMount(), ENT_COMPAT) !!},
                    eventWillUnmount: {!! htmlspecialchars($this->eventWillUnmount(), ENT_COMPAT) !!},
                })">
            </div>
        </x-filament::section>
    </div>

    <x-filament-actions::modals />
</x-filament-widgets::widget>

I just added a <div> that wraps the section and added wire:loading.class="opacity-50". Simple but it works. Hope it helps someone else in the future.