Laravel 9 Livewire Fullcalendar Integration Example

Laravel 9 livewire fullcalendar example; Through this tutorial, i am going to show you how to integrate fullcalendar with livewire in laravel 9 apps.

Laravel 9 Livewire Fullcalendar Integration Example

Follow the below given steps and integrate fullcalendar in laravel 9 app with livewire:

  • Step 1: Install Laravel 9 App
  • Step 2: Configure Database with App
  • Step 3: Install Livewire Package
  • Step 4: Create FullCalendar Component using Artisan
  • Step 5: Add Route For Livewire FullCalendar
  • Step 6: Add Code On View File
  • Step 7: Run Development Server

Step 1: Install Laravel 9 App

Run following command on command prompt to install laravel fresh app for laravel app:

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

Step 2: Configure Database with App

Configure database credentials in the .env file. So open your project root directory and find .env file. Then add database detail in .env file:

DB_CONNECTION=mysql  
DB_HOST=127.0.0.1  
DB_PORT=3306  
DB_DATABASE=here your database name here 
DB_USERNAME=here database username here 
DB_PASSWORD=here database password here

Run the following command on command prompt to make event model and migration file in laravel app:

php artisan make:model Event -m

Then visit  /database/migrations directory and open event.php file and add the following code into it:

<?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');
    }
}

And after that, open your command prompt and run the following command to create the table into your database:

php artisan migrate

Step 3: Install Livewire Package

Run the following command on command prompt to install livewire package to your laravel app:

composer require livewire/livewire

Step 4: Create FullCalendar Component using Artisan

Run the following command on command prompt to create the livewire components for creating a livewire fullcalendar component:

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

Go to app/Http/Livewire folder and open Calendar.php file. Then add the following code into your 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');
    }
}

Go to resources/views/livewire folder and open calendar.blade.php file. Then add the following code into your 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/[email protected]/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 your 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/[email protected]/main.min.css' rel='stylesheet' />
@endpush

Step 5: Add Route For Livewire Fullcalendar

Go to routes folder and open web.php. Then add the following routes into your web.php file:

<?php
use Illuminate\Support\Facades\Route;
use App\Http\Livewire\Calendar;
use App\Models\Event;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::view('/', 'home');
Livewire::component('calendar', Calendar::class);

Step 6: Add Code On View File

Go to resources/views/ folder and open view files that name home.blade.php file. Then add the following code into your home.blade.php file:

<html>
<head>
       <title>Laravel 9 Livewire Fullcalendar Example - Laratutorials.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="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
</head>
<body>
    <livewire:calendar />
    @livewireScripts
    @stack('scripts')
</body>
</html>
Note that, if you want to add HTML(blade views), CSS, and script code into your livewire files. So, you can use @livewireStyles, @livewireScripts, and @livewire(‘ blade views’).

Step 7: Run Development Server

Run the PHP artisan serve command on command prompt to start your laravel app:

php artisan serve

If you want to run the project diffrent port so use this below command

php artisan serve --port=8080

Now, you are ready to run laravel livewire fullcalendar app. So open your browser and hit the following URL into your browser:

http://localhost:8000/

Recommended Laravel Tutorials

Be First to Comment

Leave a Reply

Your email address will not be published.