Installation

Let's start by copying the necessary files to their respective directories in your Laravel project.

  • Copy the Calendar.php file to your app/Livewire directory.
  • Copy the calendar.blade.php view file to your resources/views/livewire directory.

Ensure each file is in the correct location, then proceed to integrate the component into your Laravel project.

Integration

To use the calendar component in your Laravel project, simply include it in your blade file using:

@livewire('calendar')

This will render a fully functional calendar with event management capabilities. The calendar includes a monthly view, event creation/editing, and a list of upcoming meetings.

Features

  • Monthly calendar view with navigation
  • Add, edit, and cancel events
  • Automatic filtering of past events
  • Real-time form validation
  • Responsive design that works on all screen sizes

Configuration

The Calendar component comes with several configurable options:

Event Storage

By default, the component uses an array to store events. To persist events to your database, modify the saveEvent() method in Calendar.php. Here's an example using an Event model:

public function saveEvent()
{
    $this->validate();

    if ($this->editingEventId) {
        Event::find($this->editingEventId)->update([
            'title' => $this->eventTitle,
            'date' => $this->eventDate . ' ' . $this->eventTime,
            'location' => $this->eventLocation
        ]);
    } else {
        Event::create([
            'title' => $this->eventTitle,
            'date' => $this->eventDate . ' ' . $this->eventTime,
            'location' => $this->eventLocation
        ]);
    }

    $this->closeEventModal();
}

Validation Rules

You can customize the validation rules by modifying the $rules array in the component:

protected $rules = [
    'eventTitle' => 'required|string|min:3|max:255',
    'eventDate' => 'required|date',
    'eventTime' => 'required',
    'eventLocation' => 'required|string|min:3|max:255',
];

Styling

The calendar is styled using Tailwind CSS with the 'tw-' prefix to avoid conflicts. You can customize the appearance by modifying the classes in calendar.blade.php. The component uses Tailwind's color palette, making it easy to match your application's theme.

Advanced Usage

Adding Custom Event Types

You can extend the event form to include additional fields by:

  1. Adding new properties to the Livewire component
  2. Updating the validation rules
  3. Adding the fields to the form in the blade template
  4. Modifying the saveEvent method to handle the new fields

Event Notifications

To add notifications for upcoming events, you can create a notification class and dispatch it when saving events:

use App\Notifications\EventCreated;

public function saveEvent()
{
    $this->validate();
    
    // Save the event
    $event = Event::create([...]);
    
    // Send notification
    auth()->user()->notify(new EventCreated($event));
    
    $this->closeEventModal();
}

This documentation covers the basic setup and advanced customization options for the Calendar component. For more specific customizations or features, you can modify the component files directly.