FullCalendar Integration with Laravel

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:


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

        <script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.js"></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),


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.