We can create all sorts of custom pages with Filament view components, including complex forms. In this example, we use Table, Button, and Checkbox components to create a custom View and match Filament Style.
First, we need a new Filament Page:
php artisan make:filament-page Attendance
This will create a Livewire component and a Blade view for us.
Now, let's start by adding our Month selector. For this, we will:
#[Url]
attribute to make it available in the URL.app/Filament/Pages/Attendance.php
use Carbon\Carbon;use Filament\Pages\Page;use Livewire\Attributes\Url; class Attendance extends Page{ protected static ?string $navigationIcon = 'heroicon-o-document-text'; protected ?string $maxContentWidth = 'full'; protected static string $view = 'filament.pages.attendance'; #[Url] public ?string $selectedDate = null; public function mount() { if (!$this->selectedDate) { $this->selectedDate = now(); } } protected function getViewData(): array { return [ 'dates' => $this->getDates(), ]; } public function getDates(): array { $currentDate = Carbon::parse($this->selectedDate); return [ 'previous' => $currentDate->copy()->subMonthNoOverflow()->format('F Y'), 'current' => $currentDate->format('F Y'), 'next' => $currentDate->copy()->addMonthNoOverflow()->format('F Y'), ]; } // ...
Next, we will build: