Filament v3 FullCalendar插件添加输入过滤器实现事件过滤咨询

当然可以实现，以下是具体步骤：

1. 创建自定义Calendar组件 #

先继承插件原组件创建自定义类，以此扩展功能：

<?php

namespace App\Filament\Components;

use Saade\FilamentFullCalendar\Components\FullCalendar;
use Filament\Forms\Components\TextInput;

class CustomFullCalendar extends FullCalendar
{
    public ?string $filterValue = '';

    // 添加过滤器表单
    protected function setUp(): void
    {
        parent::setUp();

        $this->form([
            TextInput::make('filterValue')
                ->label('过滤事件')
                ->placeholder('输入关键词过滤')
                ->live() // 实时响应输入内容
        ]);
    }

    // 重写事件获取方法，加入过滤逻辑
    public function getEvents(): array
    {
        $events = parent::getEvents();

        // 有过滤值时，对事件进行筛选
        if (!empty($this->filterValue)) {
            $events = array_filter($events, function ($event) {
                // 这里按标题过滤，可根据需求改成描述、分类等字段
                return str_contains(strtolower($event['title']), strtolower($this->filterValue));
            });
        }

        return $events;
    }
}

2. 针对Eloquent模型事件的过滤逻辑 #

如果事件来自数据库模型，把getEvents方法改成查询过滤：

public function getEvents(): array
{
    $query = YourEventModel::query();

    if (!empty($this->filterValue)) {
        $query->where('title', 'like', "%{$this->filterValue}%")
            // 可添加更多需要过滤的字段
            ->orWhere('description', 'like', "%{$this->filterValue}%");
    }

    return $query->get()->map(function ($event) {
        return [
            'id' => $event->id,
            'title' => $event->title,
            'start' => $event->start_date,
            'end' => $event->end_date,
            // 其他需要返回的事件字段
        ];
    })->toArray();
}

3. 在Filament页面中使用自定义组件 #

把原来的FullCalendar::make()替换成自定义组件：

use App\Filament\Components\CustomFullCalendar;

// ...

public function getWidgets(): array
{
    return [
        CustomFullCalendar::make()
            ->events(function () {
                // 可保留原有事件逻辑，也可直接在自定义组件内处理
            }),
    ];
}

完成后，日历顶部会出现一个输入框，输入关键词后会实时过滤匹配的事件。你还可以根据需求调整过滤字段，或者添加下拉选择器、日期范围等其他过滤类型，只需在setUp方法里添加对应的表单组件即可。

内容的提问来源于stack exchange，提问作者carlos