Laravel 8 integrate fullcalendar using ajax tutorial. In this tutorial, you will learn how to integrate a fullcalendar in your laravel 8 app. And as well as how to create, edit, update and delete events on fullcalendar in laravel 8 app.
This tutorial will completely guide you step by step on how to integrate fullcalendar in laravel 8 pp.
Laravel 8 Integrate Fullcalendar Example Tutorial
- Step 1 – Install Laravel App
- Step 2 – Connecting App to Database
- Step 3 – Build Migration & Model
- Step 4 – Add Routes
- Step 5 – Create Controller Using Artisan Command
- Step 6 – Create Blade View
- Step 7 – Run Development Server
- Step 8 – Test This App
Step 1 – Install Laravel App
First of all, open terminal and execute the following command on terminal to install or download Laravel 8 app:
composer create-project --prefer-dist laravel/laravel blog
Step 2 – Connecting App to Database
In this step, open .env and configure database details for connecting app to database:
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
Step 3 – Build Migration & Model
In this step, execute the following command on terminal to create event model and migration file:
php artisan make:model Event -m
This command will create one model name Event and also create one migration file for the Events table.
After successfully run the command, Navigate to database/migrations folder and open create_events_table.php file. Then update the following code into create_users_table.php file, as follow:
<?php use Illuminate\Support\Facades\Schema; use Illuminate\Database\Schema\Blueprint; use Illuminate\Database\Migrations\Migration; class CreateEventsTable extends Migration { /** * Run the migrations. * * @return void */ public function up() { Schema::create('events', function (Blueprint $table) { $table->increments('id'); $table->string('title'); $table->dateTime('start'); $table->dateTime('end'); $table->timestamps(); }); } /** * Reverse the migrations. * * @return void */ public function down() { Schema::dropIfExists('events'); } }
Now, execute the following command on terminal to create the tables into database:
php artisan migrate
Step 4 – Add Routes
In this step, Create two routes and add in web.php file. So, visit /routes directory and open web.php file. Then add the following routes into it:
use App\Http\Controllers\FullCalendarController; Route::get('ckeditor', [FullCalendarController::class, 'index']); Route::post('fullcalendar/create', [FullCalendarController::class, 'create']); Route::post('fullcalendar/update', [FullCalendarController::class, 'update']); Route::post('fullcalendar/delete', [FullCalendarController::class, 'destroy']);
Step 5 – Create Controller Using Artisan Command
In this step, execute the following command on terminal to create a controller name FullCalendarController.php file:
php artisan make:controller FullCalendarController
After successfully create controller, visit app/http/controllers directory and open FullCalendarController.php file.
<?php namespace App\Http\Controllers; use App\Models\Event; use Illuminate\Http\Request; use Redirect,Response; class FullCalenderController extends Controller { public function index() { if(request()->ajax()) { $start = (!empty($_GET["start"])) ? ($_GET["start"]) : (''); $end = (!empty($_GET["end"])) ? ($_GET["end"]) : (''); $data = Event::whereDate('start', '>=', $start)->whereDate('end', '<=', $end)->get(['id','title','start', 'end']); return Response::json($data); } return view('fullcalendar'); } public function create(Request $request) { $insertArr = [ 'title' => $request->title, 'start' => $request->start, 'end' => $request->end ]; $event = Event::insert($insertArr); return Response::json($event); } public function update(Request $request) { $where = array('id' => $request->id); $updateArr = ['title' => $request->title,'start' => $request->start, 'end' => $request->end]; $event = Event::where($where)->update($updateArr); return Response::json($event); } public function destroy(Request $request) { $event = Event::where('id',$request->id)->delete(); return Response::json($event); } }
Step 6 – Create Blade view
In this step, Visit the resources/views directory and create a blade view file named fullcalendar.blade.php. And add the following code into it:
<!DOCTYPE html> <html> <head> <title>Laravel Fullcalender Add/Update/Delete Event Example Tutorial - Tutsmake.com</title> <meta name="csrf-token" content="{{ csrf_token() }}"> </head> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" /> <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/fullcalendar.min.css" /> <script src="https://cdn.jsdelivr.net/npm/[email protected]/moment.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/fullcalendar.min.js"></script> <body> <div class="container"> <div class="response"></div> <div id='calendar'></div> </div> </body> </html>
Put the script on fullcalendar.blade.php, after the closing of the body tag
<script> $(document).ready(function () { var SITEURL = "{{url('/')}}"; $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } }); var calendar = $('#calendar').fullCalendar({ editable: true, events: SITEURL + "fullcalendar", displayEventTime: true, editable: true, eventRender: function (event, element, view) { if (event.allDay === 'true') { event.allDay = true; } else { event.allDay = false; } }, selectable: true, selectHelper: true, select: function (start, end, allDay) { var title = prompt('Event Title:'); if (title) { var start = $.fullCalendar.formatDate(start, "Y-MM-DD HH:mm:ss"); var end = $.fullCalendar.formatDate(end, "Y-MM-DD HH:mm:ss"); $.ajax({ url: SITEURL + "fullcalendar/create", data: 'title=' + title + '&start=' + start + '&end=' + end, type: "POST", success: function (data) { displayMessage("Added Successfully"); } }); calendar.fullCalendar('renderEvent', { title: title, start: start, end: end, allDay: allDay }, true ); } calendar.fullCalendar('unselect'); }, eventDrop: function (event, delta) { var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss"); var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD HH:mm:ss"); $.ajax({ url: SITEURL + 'fullcalendar/update', data: 'title=' + event.title + '&start=' + start + '&end=' + end + '&id=' + event.id, type: "POST", success: function (response) { displayMessage("Updated Successfully"); } }); }, eventClick: function (event) { var deleteMsg = confirm("Do you really want to delete?"); if (deleteMsg) { $.ajax({ type: "POST", url: SITEURL + 'fullcalendar/delete', data: "&id=" + event.id, success: function (response) { if(parseInt(response) > 0) { $('#calendar').fullCalendar('removeEvents', event.id); displayMessage("Deleted Successfully"); } } }); } } }); }); function displayMessage(message) { $(".response").html("<div class='success'>"+message+"</div>"); setInterval(function() { $(".success").fadeOut(); }, 1000); } </script>
Step 7 – Run Development Server
In this step, execute the following command on terminal to start development server:
php artisan serve
If you want to run the project diffrent port so use this below command
php artisan serve --port=8080
Step 8 – Test This App
Now, open browser and hit the following url on it:
http://localhost:8000/fullcalendar
If you want to remove public or public/index.php from URL In laravel, Click Me
Conclusion
Laravel 8 fullcalendar tutorial, You have successfully learned how to integrate the fullcalendar in laravel 8 app. As well as how to show, add, update, and delete events on fullcalendar in laravel 8 app.
Recommended Laravel Posts
If you have any questions or thoughts to share, use the comment form below to reach us.