GuavaCZ / calendar

MIT License
137 stars 10 forks source link

[Bug]: Event click context menu position issues #44

Closed carpad88 closed 2 hours ago

carpad88 commented 3 hours ago

What happened?

When using this function

public function getEventClickContextMenuActions(): array
    {
        return [
            $this->editAction(),
            $this->deleteAction(),
        ];
    }

The context menu appears far away from the event that was clicked.

If the event is close to the right side of the screen a horizontal scroll is generated

How to reproduce the bug

Everthing is set up as required in the documentation, I'm using a custom filemnt theme and my widget is this:

<?php

namespace App\Filament\Widgets;

/// imports here ...

class Appointments extends CalendarWidget
{
    protected static ?int $sort = 1;

    protected int|string|array $columnSpan = 6;

    protected string $calendarView = 'timeGridWeek';

    protected bool $eventClickEnabled = true;

    protected ?string $defaultEventClickAction = 'edit';

    public function getOptions(): array
    {
        return [
            'hiddenDays' => [0],
            'slotMinTime' => '09:00:00',
            'slotMaxTime' => '19:00:00',
            'slotEventOverlap' => false,
            'slotHeight' => 48,
            'allDaySlot' => false,
            'headerToolbar' => [
                'start' => 'title',
                'center' => 'today resourceTimeGridDay,timeGridWeek,dayGridMonth',
                'end' => 'prev,next',
            ],
            'buttonText' => [
                'today' => 'Hoy',
                'timeGridWeek' => 'Semana',
                'dayGridMonth' => 'Mes',
                'resourceTimeGridDay' => 'Día',
            ],
        ];
    }

    public function getEventClickContextMenuActions(): array
    {
        return [
            $this->editAction(),
            $this->deleteAction(),
        ];
    }

    public function getSchema(?string $model = null): ?array
    {
        return [
            // here goes the schema
        ];
    }

    public function getEvents(array $fetchInfo = []): Collection|array
    {
        return Appointment::query()
            ->whereBetween('start_date', [$fetchInfo['startStr'], $fetchInfo['endStr']])
            ->with('car.owner')
            ->get();
    }

    public function getResources(): array|Collection
    {
        return User::role('technician')
            ->where('status', true)
            ->get();
    }
}

You can check the following video to see the unexpected behaviour

https://github.com/user-attachments/assets/a2763946-4aad-4547-848a-3f6a25a03140

Package Version

1.8

PHP Version

8.2.

Laravel Version

11.27.2

Which operating systems does with happen with?

macOS

Notes

No response

lukas-frey commented 2 hours ago

Hi, please double check you did everything here.

You must have missed a step, the CSS is not correctly built by Tailwind and therefore the menu is misplaced.

carpad88 commented 2 hours ago

My bad, the issue was the CSS not been imported by the theme because a typo.

I copied the line in the reference you gave me and everthing works as expected.

Thanks 👍