FullCalendar is a JavaScript library which uses for displays calendar on the website with the scheduled event. It is used for managing events. We can add, modify and delete the event very easily. Here user can only give the title for a particular date. It is easier to manage than form based event management. In form based event management the user has to enter a title, from-date and to-date.
This is very easy to integrate into our application. This library allows us to create,edit,read and delete event.
In this post we will learn how we can integrate the FullCalendar JavaScript library in Laravel. Here we have develop simple Create,Read and Delete functionality in Laravel.
So just follow the below steps to implement FullCalendar In Laravel.
Install Laravel.
composer create-project --prefer-dist laravel/laravel eventexampleSetup Database.
After successfully install laravel Application, Open your project .env file and change the database credential.
Create Migration & Model.
Create a table named as events and it’s migration file.Use the below command.
php artisan make:model Event -mThe above 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.
<?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->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, Migrate the table using below command.
php artisan migrate
Open app/Event.php file and write the below code.
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Event extends Model
{
protected $fillable = ['title','start_date','end_date'];
}
Create Route.
Route::get('/getevent', 'FullCalendarController@getEvent');
Route::post('/createevent','FullCalendarController@createEvent');
Route::post('/deleteevent','FullCalendarController@deleteEvent');
Create Events Table Seeder
php artisan make:seeder CreateDummyEvent
After run above command open database/seeds/CreateDummyEvent.php file and write the following code in 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->increments('id');
$table->string('title');
$table->dateTime('start');
$table->dateTime('end');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('events');
}
}
Create Controller.
php artisan make:controller FullCalendarControllerAfter successfully create controller go to app/controllers/FullCalendarController.php and write the below code.
<?php
namespace App\Http\Controllers;
use App\Event;
use Illuminate\Http\Request;
use Log;
class FullCalendarController extends Controller
{
public function getEvent(){
if(request()->ajax()){
$start = (!empty($_GET["start"])) ? ($_GET["start"]) : ('');
$end = (!empty($_GET["end"])) ? ($_GET["end"]) : ('');
$events = Event::whereDate('start', '>=', $start)->whereDate('end', '<=', $end)
->get(['id','title','start', 'end']);
return response()->json($events);
}
return view('fullcalendar');
}
public function createEvent(Request $request){
$data = array_except($request->all(), ['_token']);
$events = Event::insert($data);
return response()->json($events);
}
public function deleteEvent(Request $request){
$event = Event::find($request->id);
return $event->delete();
}
}
Create View.
Go to app/resources/views and create one file name fullcalendar.blade.php and write the below code.
<!doctype html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.7/fullcalendar.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" ref="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.7/fullcalendar.min.css"/>
</head>
<body>
<div class="container">
<div class="panel panel-primary">
<div class="panel-heading">
FullCalendar Example In Laravel.(phpforever.com).
</div>
<div class="panel-body" >
<div id='calendar'></div>
</div>
</div>
</div>
</body>
<script>
$(document).ready(function () {
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
navLinks: true,
editable: true,
events: "getevent",
displayEventTime: false,
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 = moment(start, 'DD.MM.YYYY').format('YYYY-MM-DD');
var end = moment(end, 'DD.MM.YYYY').format('YYYY-MM-DD');
$.ajax({
url: 'createevent',
data: 'title=' + title + '&start=' + start + '&end=' + end +'&_token=' +"{{ csrf_token() }}",
type: "post",
success: function (data) {
alert("Added Successfully");
}
});
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
allDay: allDay
},
true
);
}
calendar.fullCalendar('unselect');
},
eventClick: function (event) {
var deleteMsg = confirm("Do you really want to delete?");
if (deleteMsg) {
$.ajax({
type: "POST",
url: "delete",
data: "&id=" + event.id+'&_token=' +"{{ csrf_token() }}",
success: function (response) {
if(parseInt(response) > 0) {
$('#calendar').fullCalendar('removeEvents', event.id);
alert("Deleted Successfully");
}
}
});
}
}
});
});
</script>
</html>
Laravel Multiple File Upload with Progress Bar. Server Side Data Table Implementation In Laravel.