➧Event Calendar Example In Laravel. • Softbranchdevelopers

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.

Contents

Install Laravel.

composer create-project –prefer-dist laravel/laravel eventexample

Setup 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 -m

The 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 IlluminateDatabaseMigrationsMigration;
use IlluminateDatabaseSchemaBlueprint;
use IlluminateSupportFacadesSchema;

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

class Event extends Model
{
protected $fillable = [‘title’,’start_date’,’end_date’];

}

Create Route.

Route::get(‘/getevent’, ‘[email protected]’);
Route::post(‘/createevent’,’[email protected]’);
Route::post(‘/deleteevent’,’[email protected]’);

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 IlluminateDatabaseMigrationsMigration;
use IlluminateDatabaseSchemaBlueprint;
use IlluminateSupportFacadesSchema;

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 FullCalendarController

After successfully create controller go to app/controllers/FullCalendarController.php and write the below code.

<?php

namespace AppHttpControllers;
use AppEvent;
use IlluminateHttpRequest;
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) {