Filament: Student/Employee Attendance Management Form

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.

FilamentExamples ThumbBase - 2025-01-29T102227.299

Get the Source Code:

How it works

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:

  • Store our selected date in a public property with the #[Url] attribute to make it available in the URL.
  • On mount, we will set the selected date to the current date.
  • Create a method for the previous, current, and next month.
  • Create methods to navigate to the previous and next month.

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:

  • Month switching
  • Custom Table with Checkboxes
  • Custom data saving
The FULL tutorial is available after the purchase: in the Readme file of the official repository you would get invited to.
Get the Source Code: All 72 Premium Examples for $99