Filament•2w ago

Calendar plugin as a custom page rather than a widget

I've been looking into using this plugin: https://filamentphp.com/plugins/guava-calendar But rather than as a widget, I want it for the full page, but just cant get it to work at all. I've tried making a custom page, setting the view to the contents of the calendar view (without the widget tags). But just giving error after error

Filament

Calendar by Guava - Filament

Adds a fully customizable calendar to your filament panels.

Solution:

Build it as a widget, and just include the widget on the page.

Jump to solution

4 Replies

Jamie CeeOP•2w ago

Latest blade:

<x-filament-panels::page>
    <div wire:ignore x-ignore ax-load
        ax-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('calendar-widget', 'guava/calendar') }}"
        x-data="calendarWidget({
        view: @js($this->getCalendarView()),
        locale: @js($this->getLocale()),
        firstDay: @js($this->getFirstDay()),
        eventContent: @js($this->getEventContentJs()),
        resourceLabelContent: @js($this->getResourceLabelContentJs()),
        eventClickEnabled: @js($eventClickEnabled),
        eventDragEnabled: @js($eventDragEnabled),
        eventResizeEnabled: @js($eventResizeEnabled),
        noEventsClickEnabled: @js($noEventsClickEnabled),
        dateClickEnabled: @js($dateClickEnabled),
        dateSelectEnabled: @js($dateSelectEnabled),
        viewDidMountEnabled: @js($viewDidMountEnabled),
        eventAllUpdatedEnabled: @js($eventAllUpdatedEnabled),
        onEventResizeStart: @js($onEventResizeStart),
        onEventResizeStop: @js($onEventResizeStop),
        dayMaxEvents: @js($this->dayMaxEvents()),
        moreLinkContent: @js($this->getMoreLinkContentJs()),
        resources: @js($this->getResourcesJs()),
        hasDateClickContextMenu: @js($hasDateClickContextMenu),
        hasDateSelectContextMenu: @js($hasDateSelectContextMenu),
        hasEventClickContextMenu: @js($hasEventClickContextMenu),
        hasNoEventsClickContextMenu: @js($hasNoEventsClickContextMenu),
        options: @js($this->getOptions()),
        dayHeaderFormat: {{$dayHeaderFormatJs}},
        slotLabelFormat: {{$slotLabelFormatJs}},
    })">
        <div id="calendar"></div>
        <x-guava-calendar::context-menu />
    </div>
</x-filament-panels::page>

<x-filament-panels::page>
    <div wire:ignore x-ignore ax-load
        ax-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('calendar-widget', 'guava/calendar') }}"
        x-data="calendarWidget({
        view: @js($this->getCalendarView()),
        locale: @js($this->getLocale()),
        firstDay: @js($this->getFirstDay()),
        eventContent: @js($this->getEventContentJs()),
        resourceLabelContent: @js($this->getResourceLabelContentJs()),
        eventClickEnabled: @js($eventClickEnabled),
        eventDragEnabled: @js($eventDragEnabled),
        eventResizeEnabled: @js($eventResizeEnabled),
        noEventsClickEnabled: @js($noEventsClickEnabled),
        dateClickEnabled: @js($dateClickEnabled),
        dateSelectEnabled: @js($dateSelectEnabled),
        viewDidMountEnabled: @js($viewDidMountEnabled),
        eventAllUpdatedEnabled: @js($eventAllUpdatedEnabled),
        onEventResizeStart: @js($onEventResizeStart),
        onEventResizeStop: @js($onEventResizeStop),
        dayMaxEvents: @js($this->dayMaxEvents()),
        moreLinkContent: @js($this->getMoreLinkContentJs()),
        resources: @js($this->getResourcesJs()),
        hasDateClickContextMenu: @js($hasDateClickContextMenu),
        hasDateSelectContextMenu: @js($hasDateSelectContextMenu),
        hasEventClickContextMenu: @js($hasEventClickContextMenu),
        hasNoEventsClickContextMenu: @js($hasNoEventsClickContextMenu),
        options: @js($this->getOptions()),
        dayHeaderFormat: {{$dayHeaderFormatJs}},
        slotLabelFormat: {{$slotLabelFormatJs}},
    })">
        <div id="calendar"></div>
        <x-guava-calendar::context-menu />
    </div>
</x-filament-panels::page>

Error:

Method App\Filament\Pages\WorkSchedulePage::getCalendarView does not exist.

Solution

toeknee•2w ago

Build it as a widget, and just include the widget on the page.

Jamie CeeOP•2w ago

As within the view, like this example?

<div>
    @livewire(\App\Livewire\Dashboard\PostsChart::class)
</div>

<div>
    @livewire(\App\Livewire\Dashboard\PostsChart::class)
</div>

I do have a bad habit of asking questions before trying 🤦‍♀️ 🤣 So far its on the page, so thank you 🤣

toeknee•2w ago

Welcome! hehe

Gaming

Programming

Calendar plugin as a custom page rather than a widget

Did you find this page helpful?