README

A Filament package that automatically detects the user's browser timezone and makes it available to Filament resources, forms, and widgets via session storage.

Features

🕐 Automatic Detection: Detects browser timezone on page load
🔒 Session Storage: Stores timezone in Laravel session for backend access
🎯 Filament Integration: Seamlessly integrates with Filament via render hooks
🚀 Zero Configuration: Works out of the box with default settings
🛡️ Error Handling: Graceful fallbacks for unsupported browsers
⚡ Performance Optimized: Minimal impact on page load performance

Installation

composer require webteractive/filament-browser-timezone

The package will be automatically discovered by Laravel. If you're using Laravel 11, you may need to manually register the service provider in your config/app.php:

'providers' => [
    // ...
    Webteractive\FilamentBrowserTimezone\FilamentBrowserTimezoneServiceProvider::class,
],

Usage

Automatic Integration

The package automatically integrates with Filament and starts detecting timezone on every page load. No additional configuration required.

Accessing Browser Timezone

In Filament Resources, Forms, and Widgets

use Webteractive\FilamentBrowserTimezone\BrowserTimezone;

// Get the detected timezone
$timezone = BrowserTimezone::get();

// Check if timezone is available
if (BrowserTimezone::has()) {
    $timezone = BrowserTimezone::get();
}

// Get with fallback
$timezone = BrowserTimezone::get('UTC');

In Filament Tables

use Webteractive\FilamentBrowserTimezone\BrowserTimezone;

class UserResource extends Resource
{
    public function table(Table $table): Table
    {
        return $table
            ->columns([
                TextColumn::make('created_at')
                    ->dateTime()
                    ->timezone(BrowserTimezone::get())
                    ->label('Created At'),
            ]);
    }
}

In Filament Forms

use Webteractive\FilamentBrowserTimezone\BrowserTimezone;

class UserForm extends Form
{
    public function form(Form $form): Form
    {
        return $form
            ->schema([
                DateTimePicker::make('meeting_time')
                    ->timezone(BrowserTimezone::get())
                    ->label('Meeting Time'),
            ]);
    }
}

In Filament Widgets

use Webteractive\FilamentBrowserTimezone\BrowserTimezone;

class StatsWidget extends Widget
{
    public function getColumns(): int
    {
        return 2;
    }

    protected function getTableQuery(): Builder
    {
        return User::query()
            ->where('created_at', '>=', now()->setTimezone(BrowserTimezone::get()));
    }
}

Configuration

Publish the configuration file:

php artisan vendor:publish --tag="filament-browser-timezone-config"

Configuration Options

// config/filament-browser-timezone.php

return [
    // Session key for storing timezone
    'session_key' => env('BROWSER_TIMEZONE_SESSION_KEY', 'browser_timezone'),
    

    
    // Fallback timezone if detection fails
    'fallback_timezone' => env('BROWSER_TIMEZONE_FALLBACK', 'UTC'),
    
    // Debug mode
    'debug' => env('BROWSER_TIMEZONE_DEBUG', false),
];

Environment Variables

BROWSER_TIMEZONE_SESSION_KEY=browser_timezone
BROWSER_TIMEZONE_FALLBACK=UTC
BROWSER_TIMEZONE_DEBUG=false

How It Works

Automatic Integration: The package automatically integrates with Filament panels using render hooks
Page Load: When a Filament page loads, the package automatically includes a hidden Livewire component
JavaScript Detection: The component uses JavaScript to detect the browser's timezone using Intl.DateTimeFormat().resolvedOptions().timeZone
Session Storage: The detected timezone is sent to the server via Livewire and stored in the Laravel session
Filament Integration: Your Filament resources, forms, and widgets can now access the timezone using the BrowserTimezone helper class

Filament Features

Automatic Detection: Works out of the box with all Filament panels
Render Hook Integration: Uses Filament's render hook system for seamless integration
Livewire Component: Built with Livewire for optimal performance
Session Management: Integrates with Laravel's session system

Browser Compatibility

The package uses the modern Intl.DateTimeFormat API which is supported by:

Chrome 24+
Firefox 29+
Safari 10+
Edge 12+

For unsupported browsers, the package will use the configured fallback timezone.

Testing

composer test

Contributing

Fork the repository
Create a feature branch
Make your changes
Add tests
Submit a pull request

License

The MIT License (MIT). Please see License File for more information.

webteractive / filament-browser-timezone

Maintainers

Details