saade / filament-fullcalendar

The Most Popular JavaScript Calendar as a Filament Widget
MIT License
295 stars 88 forks source link

eventDidMount doesn't work #162

Closed cawecoy closed 8 months ago

cawecoy commented 9 months ago

Hi. I am developing the event tooltip with eventDidMount and Tooltip.js like in the official FullCalendar Demo

I've changed a little bit their Codepen moving the tooltip function to the function eventTooltip(info) and in the FullCalendar configuration I've changed the eventDidMount render hook to eventDidMount: eventTooltip. And it works fine: https://codepen.io/cawecoy/pen/jOJgjay

So, I want to implement it through this Filament plugin. That's what I did:

public function panel(Panel $panel): Panel
{
    return $panel->plugins([
        FilamentFullCalendarPlugin::make()->config(['eventDidMount' => 'eventTooltip']),
    ]);
}

I have the function eventTooltip(info) in a JS file that is loaded perfectly.

But it's not working.

The events are not even displayed on the calendar (they were being displayed before I added ['eventDidMount' => 'eventTooltip'] to the plugin ->config()):

image

I can see that the plugin config is loaded in the HTML:

<div class="filament-fullcalendar fc fc-media-screen fc-direction-ltr fc-theme-standard" wire:ignore="" ax-load="" ax-load-src="http://localhost/js/saade/filament-fullcalendar/components/filament-fullcalendar-alpine.js?v=3.1.3.0" ax-load-css="http://localhost/css/saade/filament-fullcalendar/filament-fullcalendar-styles.css?v=3.1.3.0" x-data="fullcalendar({
                locale: 'pl',
                plugins: JSON.parse('[\u0022dayGrid\u0022,\u0022timeGrid\u0022,\u0022interaction\u0022,\u0022list\u0022,\u0022moment\u0022,\u0022momentTimezone\u0022]'),
                schedulerLicenseKey: null,
                timeZone: 'UTC',
                config: JSON.parse('{\u0022eventDidMount\u0022:\u0022eventTooltip\u0022}'),
                editable: false,
                selectable: false,
})">
    ...
</div>

I see my config here: JSON.parse('{\u0022eventDidMount\u0022:\u0022eventTooltip\u0022}')

So how can I use eventDidMount through this plugin?

I guess that config is redered as string like "eventDidMount": "eventTooltip", but for this config to work it should be rendered like "eventDidMount": eventTooltip.

Or maybe this plugin can have a dedicated method to Event Render Hooks (only for functions then rendered in Javascript always without quotes), as we have for locale, timezone, and so on. Then we just do:

public function panel(Panel $panel): Panel
{
    return $panel->plugins([
        FilamentFullCalendarPlugin::make()->renderHooks(['eventDidMount' => 'eventTooltip']),
    ]);
}

I might try to send a PR. Let me know.