Filament•13mo ago

Render modals inside custom page

I've created a custom "Calendar" page and a custom CreateReservation livewire component. This is my create-reservation blade

<div>
    <form wire:submit="create">
        {{ $this->form }}

        <button type="submit">
            Submit
        </button>
    </form>

    <x-filament-actions::modals/>
</div>

<div>
    <form wire:submit="create">
        {{ $this->form }}

        <button type="submit">
            Submit
        </button>
    </form>

    <x-filament-actions::modals/>
</div>

and I don't understand how can I open the form as a modal when click on a FullCalendar cell

4 Replies

toeknee•13mo ago

I would suggest you just use the action with: https://filamentphp.com/docs/3.x/actions/modals#modal-forms and include the form in the action?

Modals - Actions - Filament

DianaMujoiuOP•13mo ago

Thank you. I will try this I have one more stupid question. Where should I put the action modal? I've put it in Resource but it's not working

toeknee•13mo ago

Where are you trying to render it exactly?

DianaMujoiuOP•13mo ago

      select: function (info) {
            const startDate = info.startStr;
            const endDate = info.endStr;
            window.location.href = '/admin/reservations/create?start_date=' + startDate + '&end_date=' + endDate + '&listing=' + listingId;
        },

      select: function (info) {
            const startDate = info.startStr;
            const endDate = info.endStr;
            window.location.href = '/admin/reservations/create?start_date=' + startDate + '&end_date=' + endDate + '&listing=' + listingId;
        },

Here, I open the "create" form from Filament and instead of opening the entire form for reservation creation, I want to display the modal.

Gaming

Programming

Render modals inside custom page