Laravel Livewire Fullcalendar Integration Example Tutorial

Using Laravel 9 Livewire Fullcalendar Integration Example Tutorial, we will learn step by step on how to integration full calendar and show events in the Laravel application Livewire package.

Laravel livewire is a user-friendly package for developing full-stack web applications; it lowers the pain of building dynamic user interface components. You are going to understand how to use this package to create a dynamic fullcalendar with laravel livewire.

This tutorial will guide you from scratch about how to add full calendar not only but also show events in date wise with the help of the livewire package in the laravel application.

Laravel 9 Livewire Fullcalendar Integration Example

This quick and simple tutorial offers you a facile example of a fullcalendar using bootstrap UI design in laravel app with livewire library.

Use the following steps to integrate fullcalendar in laravel 9 app with livewire library:

  • Step 1: Install Laravel 9 App
  • Step 2: Add Database Detail
  • Step 3: Create Model & Run Migration
  • Step 4: Install Livewire Package
  • Step 5: Create FullCalendar Component using Command
  • Step 6: Configure Routes
  • Step 7: Render Livewire Component in View
  • Step 8: Run Development Server

Step 1: Install Laravel App

First of all, Open terminal OR command prompt and run following command to install laravel fresh app for laravel livewire fullcalendar integration:

composer create-project --prefer-dist laravel/laravel laravel-livewire

Now Go into the app:

laravel-livewire

Step 2: Configure Database Detail

Open the .env file and add your database credentials such as database name, username equally important password:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=db name
DB_USERNAME=db user name
DB_PASSWORD=db password

Step 3: Create Model & Migration File

Next step, we need to execute the following command on terminal to generate model, migration file using the following command:

php artisan make:model Event -m

Add code in database/migrations/create_events_table.php:

<?php
 
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
 
class CreateEventsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('events', function (Blueprint $table) {
            $table->id();
            $table->string('title');
            $table->string('start');
            $table->timestamps();
        });
    }
 
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('events');
    }
}

Next, open command prompt and execute the following command to create the table into database:

php artisan migrate

Place the below code in app/Models/Event.php file:

<?php
  
namespace App\Models;
  
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
  
class Product extends Model
{
    use HasFactory;
 
    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    protected $fillable = [
        'title', 'start'
    ];
}

Step 4: Install Livewire Package

Use the composer command to install livewire library in laravel app:

In this step, we need to install livewire package to laravel project using the following command:

composer require livewire/livewire

Step 5: Create FullCalendar Component

Go to console run the artisan command to create the livewire components:

php artisan make:livewire calendar

This command will create the following components on the following path:

app/Http/Livewire/Calendar.php
resources/views/livewire/calendar.blade.php

Now, Navigate to app/Http/Livewire folder and open Calendar.php file. Then add the following code into Calendar.php file:

<?php
namespace App\Http\Livewire;
use Livewire\Component;
use App\Models\Event;
 
class Calendar extends Component
{
    public $events = '';
 
    public function getevent()
    {       
        $events = Event::select('id','title','start')->get();
 
        return  json_encode($events);
    }
 
    /**
    * Write code on Method
    *
    * @return response()
    */
    public function addevent($event)
    {
        $input['title'] = $event['title'];
        $input['start'] = $event['start'];
        Event::create($input);
    }
 
    /**
    * Write code on Method
    *
    * @return response()
    */
    public function eventDrop($event, $oldEvent)
    {
      $eventdata = Event::find($event['id']);
      $eventdata->start = $event['start'];
      $eventdata->save();
    }
 
    /**
    * Write code on Method
    *
    * @return response()
    */
    public function render()
    {       
        $events = Event::select('id','title','start')->get();
 
        $this->events = json_encode($events);
 
        return view('livewire.calendar');
    }
}

After that, Navigate to resources/views/livewire folder and open calendar.blade.php file. Then add the following code into calendar.blade.php file:

<div>
  <div id='calendar-container' wire:ignore>
    <div id='calendar'></div>
  </div>
</div>
 
@push('scripts')
    <script src='https://cdn.jsdelivr.net/npm/fullcalendar@5.3.1/main.min.js'></script>
     
    <script>
        document.addEventListener('livewire:load', function() {
            var Calendar = FullCalendar.Calendar;
            var Draggable = FullCalendar.Draggable;
            var calendarEl = document.getElementById('calendar');
            var checkbox = document.getElementById('drop-remove');
            var data =   @this.events;
            var calendar = new Calendar(calendarEl, {
            events: JSON.parse(data),
            dateClick(info)  {
               var title = prompt('Enter Event Title');
               var date = new Date(info.dateStr + 'T00:00:00');
               if(title != null && title != ''){
                 calendar.addEvent({
                    title: title,
                    start: date,
                    allDay: true
                  });
                 var eventAdd = {title: title,start: date};
                 @this.addevent(eventAdd);
                 alert('Great. Now, update database...');
               }else{
                alert('Event Title Is Required');
               }
            },
            editable: true,
            selectable: true,
            displayEventTime: false,
            droppable: true, // this allows things to be dropped onto the calendar
            drop: function(info) {
                // is the "remove after drop" checkbox checked?
                if (checkbox.checked) {
                // if so, remove the element from the "Draggable Events" list
                info.draggedEl.parentNode.removeChild(info.draggedEl);
                }
            },
            eventDrop: info => @this.eventDrop(info.event, info.oldEvent),
            loading: function(isLoading) {
                    if (!isLoading) {
                        // Reset custom events
                        this.getEvents().forEach(function(e){
                            if (e.source === null) {
                                e.remove();
                            }
                        });
                    }
                }
            });
            calendar.render();
            @this.on(`refreshCalendar`, () => {
                calendar.refetchEvents()
            });
        });
    </script>
    <link href='https://cdn.jsdelivr.net/npm/fullcalendar@5.3.1/main.min.css' rel='stylesheet' />
@endpush

Step 5: Make Route For Livewire Fullcalendar

In this step, Navigate to routes folder and open web.php. Then add the following routes into web.php file:

<?php
use Illuminate\Support\Facades\Route;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
*/
Route::get('calendar', function () {
    return view('welcome');
});

Step 7: Render Calender Form in Blade View

Add below code in resources/views/welcome.blade.php file:

<!DOCTYPE html>
<html>
<head>
    <title>Laravel Livewire Example - codingdriver.com</title>
    @livewireStyles
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
  
    <link href="{{ asset('wizard.css') }}" rel="stylesheet" id="bootstrap-css">
</head>
<body>
    
<div class="container">
    
    <div class="card">
      <div class="card-header">
        Laravel Livewire Wizard Form Example - codingdriver.com
      </div>
      <div class="card-body">
        <livewire:calendar />
      </div>
    </div>
        
</div>
    
</body>
 
@livewireScripts
  
</html>

Step 8: Run Development Server

Finally, we need to run the following PHP artisan serve command to start laravel livewire form wizard or multi step form app:

php artisan serve
If we want to run the project diffrent port so use this below command 
php artisan serve --port=8080  

Now, we are ready to run laravel livewire form wizard app. So open browser and hit the following URL into browser:

http://localhost:8000/calendar

The Laravel Livewire Fullcalendar Integration Example Tutorial is over; in this tutorial, we learned the easiest way to integrate on full calendar and show events in laravel application using the livewire library.