Laravel Fullcalendar Example

In this tutorial we will see Laravel Fullcalendar Example.

A calendar UI component for web applications is offered by the JavaScript package called FullCalendar. A PHP web framework called Laravel makes it simple and quick for programmers to create web apps. In this tutorial, we will create a simple Laravel FullCalendar example that displays a calendar with events retrieved from a database.

Laravel Fullcalendar Example

Follow the below steps -

Step 1 - Setup Laravel first, Make sure Laravel is first installed on your PC. To install Laravel, follow the official documentation to install Laravel.

Step 2 - Using the following command, produce a new Laravel project

laravel new laravel-fullcalendar-example

Step 3 - install FullCalendar using npm

npm install @fullcalendar/core @fullcalendar/daygrid @fullcalendar/timegrid

Step 4 - Create a new migration Create a new migration to create a table for storing events using the following command

php artisan make:migration create_events_table --create=events

Then add the following code to the up method of the migration

public function up()
{
    Schema::create('events', function (Blueprint $table) {
        $table->id();
        $table->string('title');
        $table->dateTime('start');
        $table->dateTime('end')->nullable();
        $table->timestamps();
    });
}

Step 5 - Migrate the database using the following command

php artisan migrate

Step 6 - Create a new model for the events table using below command:

php artisan make:model Event

Then add the following code to the model

class Event extends Model
{
    protected $fillable = ['title', 'start', 'end'];
}

Step 7 - Create a new controller for the FullCalendar example using the below command

php artisan make:controller FullCalendarController

Then add the following code to the controller

use App\Models\Event;

class FullCalendarController extends Controller
{
    public function index()
    {
        $events = Event::all();

        $formattedEvents = $events->map(function ($event) {
            return [
                'title' => $event->title,
                'start' => $event->start,
                'end' => $event->end,
            ];
        });

        return view('fullcalendar', compact('formattedEvents'));
    }
}

Step 8 - Create a new route Create a new route for the FullCalendar example in the web.php file

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

Step 9 - Create a new view Create a new view for the FullCalendar example using the following command

php artisan make:view fullcalendar

Then add the following code to the view

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <meta name='viewport' content='width=device-width, initial-scale=1' />
    <title>FullCalendar Example</title>
    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.css' />
</head>
<body>
    <div id='calendar'></div>

    <script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.js'></script>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');

    var calendar = new FullCalendar.Calendar(calendarEl, {
        plugins: [ 'dayGrid', 'timeGrid' ],
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay'
        },
        events: <?php echo json_encode($formattedEvents) ?>,
        eventClick: function(info) {
            console.log(info.event);
        }
    });

    calendar.render();
});
    </script>

</body>
</html>

This code creates a new FullCalendar instance and sets the plugin options, header options, and event data. It also sets up an event listener for when an event is clicked.

Step 10 - Now run the application

php artisan serve

Open http://localhost:8000/fullcalendar in your browser.

Now , You have successfully created a simple Laravel FullCalendar example that displays events retrieved from a database.

Laravel Fullcalendar Example

Laravel Fullcalendar Example

Enter your details before comment