Laravel 10 Livewire Fullcalendar Integration Example


Laravel 10 livewire fullcalendar integration example; In this tutorial, you will learn how to integrate fullcalendar with livewire in laravel 10 apps.

Laravel 10 Livewire Fullcalendar Integration Example

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

  • Step 1: Install Laravel App
  • Step 2: Add Database Detail
  • 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 App

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

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

Step 2: Add Database Detail

In this step, Add database credentials in the .env file. So open 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 database name here 
DB_USERNAME=here database username here 
DB_PASSWORD=here database password here

Now open terminal and execute the following command to create 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 command prompt and run the following command to create the table into database:

php artisan migrate

Step 3: Install Livewire Package

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

composer require livewire/livewire

Step 4: Create FullCalendar Component using Artisan

In this step, create the livewire components for creating a livewire fullcalendar component using the following command. So Open cmd and run the following command:

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/[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 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

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;
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

In this step, navigate to resources/views/ folder and open view files that name home.blade.php file. Then add the following code into home.blade.php file:

<html>
<head>
       <title>Laravel 10 Livewire Fullcalendar Example - Tutsmake.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

Finally, we need to run the PHP artisan serve command to start laravel livewire upload file 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 select2 app. So open browser and hit the following URL into browser:

localhost:8000/

Recommended Laravel Tutorials

jassweb logo

Jassweb always keeps its services up-to-date with the latest trends in the market, providing its customers all over the world with high-end and easily extensible internet, intranet, and extranet products.

Contact
Jassweb, Rai Chak, Punjab, India. 143518