In this tutorial you will learn about the Laravel 8 Fullcalendar with Create|Edit|Delete Event Example and its application with practical example.
In this Laravel 8 Fullcalendar with Create, Edit and Delete Event Example tutorial I’ll show you how to display, create, edit and delete events on the calendar using fullcalendar components in laravel 8 application. In this tutorial you will learn to display events on the calendar using fullcalendar in laravel 8. In this example, we will simply create a event crud application with fullcalender so you can easily create event, edit event and delete event. in this example we will create events table with start, edit date and title column. then you can add, edit and delete that event with database.
Laravel 8 Fullcalendar with Create, Edit and Delete Event Example tutorial
In this step by step tutorial I will demonstrate you how to show dynamic event calendar using fullcalendar in laravel 8. Please follow instruction given below:
Step 1: Install Laravel 8
First of all we need to create a fresh laravel project, download and install Laravel 8 using the below command
|
1 |
composer create-project --prefer-dist laravel/laravel blog |
Step 2: Create Migration and Model
Now, in this step we will create migration file. Please run the following command:
|
1 |
php artisan make:migration create_events_table |
Open migration file and update the function up() method as following:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<?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->date('start'); $table->date('end'); $table->timestamps(); }); } /** * Reverse the migrations. * * @return void */ public function down() { Schema::dropIfExists('events'); } } |
Now, run the migration to create database table using following artisan command:
|
1 |
php artisan migrate |
Now, in this step we will create and open a model file:
app/Models/Event.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<?php namespace App\Models; use Illuminate\Database\Eloquent\Factories\HasFactory; use Illuminate\Database\Eloquent\Model; class Event extends Model { use HasFactory; protected $fillable = [ 'title', 'start', 'end' ]; } |
Step 3: Create Routes
Now we need to define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.
routes/web.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<?php use Illuminate\Support\Facades\Route; use App\Http\Controllers\FullCalenderController; /* |-------------------------------------------------------------------------- | 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::get('fullcalender', [FullCalenderController::class, 'index']); Route::post('fullcalenderAjax', [FullCalenderController::class, 'ajax']); |
Step 4: Create Controller File
Now, lets create a controller named FullCalenderController using command given below –
|
1 |
php artisan make:controller FullCalenderController |
Once the above command executed, it will create a controller file FullCalenderController.php in app/Http/Controllers/ directory. Open the FullCalenderController.php file and put the following code in it.
app/Http/Controllers/FullCalenderController.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 |
<?php namespace App\Http\Controllers; use Illuminate\Http\Request; use App\Models\Event; class FullCalenderController extends Controller { /** * Write code on Method * * @return response() */ public function index(Request $request) { if($request->ajax()) { $data = Event::whereDate('start', '>=', $request->start) ->whereDate('end', '<=', $request->end) ->get(['id', 'title', 'start', 'end']); return response()->json($data); } return view('fullcalender'); } /** * Write code on Method * * @return response() */ public function ajax(Request $request) { switch ($request->type) { case 'add': $event = Event::create([ 'title' => $request->title, 'start' => $request->start, 'end' => $request->end, ]); return response()->json($event); break; case 'update': $event = Event::find($request->id)->update([ 'title' => $request->title, 'start' => $request->start, 'end' => $request->end, ]); return response()->json($event); break; case 'delete': $event = Event::find($request->id)->delete(); return response()->json($event); break; default: # code... break; } } } |
Step 5: Create Blade File
In this step we will create a blade file. Go to app/resources/views and create one file name fullcalendar.blade.php
resources/views/fullcalender.blade.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 |
<!DOCTYPE html> <html> <head> <title>Laravel Fullcalender Tutorial Tutorial</title> <meta name="csrf-token" content="{{ csrf_token() }}"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" /> </head> <body> <div class="container"> <h1>Laravel FullCalender Tutorial Example</h1> <div id='calendar'></div> </div> <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 + "/fullcalender", displayEventTime: false, 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"); var end = $.fullCalendar.formatDate(end, "Y-MM-DD"); $.ajax({ url: SITEURL + "/fullcalenderAjax", data: { title: title, start: start, end: end, type: 'add' }, type: "POST", success: function (data) { displayMessage("Event Created Successfully"); calendar.fullCalendar('renderEvent', { id: data.id, 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"); var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD"); $.ajax({ url: SITEURL + '/fullcalenderAjax', data: { title: event.title, start: start, end: end, id: event.id, type: 'update' }, type: "POST", success: function (response) { displayMessage("Event Updated Successfully"); } }); }, eventClick: function (event) { var deleteMsg = confirm("Do you really want to delete?"); if (deleteMsg) { $.ajax({ type: "POST", url: SITEURL + '/fullcalenderAjax', data: { id: event.id, type: 'delete' }, success: function (response) { calendar.fullCalendar('removeEvents', event.id); displayMessage("Event Deleted Successfully"); } }); } } }); }); function displayMessage(message) { toastr.success(message, 'Event'); } </script> </body> </html> |
Step 6: Run Development Server
Now we are ready to run our example so lets start the development server using following artisan command –
|
1 |
php artisan serve |
Now, open the following URL in browser to see the output –
|
1 |
http://localhost:8000/fullcalendar |
