# 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:

```plaintext
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:

```plaintext

@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:

```plaintext
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:

```plaintext
use App\Http\Controllers\HomeController;

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

### Step 5: Run the Application

Save your changes and run the Laravel development server:

```plaintext
php artisan serve
```

Visit [`http://localhost:8000`](http://localhost:8000) in your browser to see the FullCalendar with the sample event.