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/
