FullCalendar Integration with Laravel

Step 1: Install Laravel

Assuming you have Composer installed, open a terminal and run the following commands to create a new Laravel project:

composer create-project --prefer-dist laravel/laravel your-project-name
cd your-project-name

Step 2: Set Up FullCalendar

In your Blade view file (e.g., resources/views/welcome.blade.php), add the following code:

@section('content')

    <div id="calendar"></div>

    @push('scripts')
        <script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.js"></script>
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                var calendarEl = document.getElementById('calendar');
                var calendar = new FullCalendar.Calendar(calendarEl, {
                    initialView: 'timeGridWeek',
                    slotMinTime: '8:00:00',
                    slotMaxTime: '19:00:00',
                    events: @json($events),
                });
                calendar.render();
            });
        </script>
    @endpush

@endsection

Step 3: Pass Events to the Calendar

In your controller (e.g., app/Http/Controllers/HomeController.php), modify the index method:

use Carbon\Carbon;

class HomeController extends Controller
{
    public function index()
    {
        $events = [];

        $events[] = [
            'title' => 'Sample Event',
            'start' => Carbon::now()->subHours(3)->toDateTimeString(),
            'end' => Carbon::now()->subHours(2)->toDateTimeString(),
        ];

        return view('welcome', compact('events'));
    }
}

Step 4: Route Setup

In your routes/web.php, add the following route:

use App\Http\Controllers\HomeController;

Route::get('/', [HomeController::class, 'index']);

Step 5: Run the Application

Save your changes and run the Laravel development server:

php artisan serve

Visit http://localhost:8000 in your browser to see the FullCalendar with the sample event.