How to implement jQuery fullcalendar in laravel 5.5

In this post we are share with you how to implement full calendar (JavaScript Event Calendar) in laravel 5.5. for use full calendar we will represent our daily tasks, events and schedule one daily basis and also start date to end date.

in this post I’ve show how to install and implement basic example for full calendar with dummy data .

After completed this tutorials your output look like this.

Install Fullcalendar package

use composer command

composer require maddhatter/laravel-fullcalendar

next register in app.php

Event table

next create event table for store event data with migration

php artisan make:migration create_events_table

open file and fill in function up with

        Schema::create('events', function (Blueprint $table) {
$table->increments('id');
$table->string('title');
$table->date('start_date');
$table->date('end_date');
$table->timestamps();
});

save and run

php artisan migrate

insert seed data with seeder

php artisan make:seeder AddDummyEvent

open AddummyEvent.php

<?php
use Illuminate\Database\Seeder;
class AddDummyEvent extends Seeder
{
/**
* Run the database seeds.
*
* @return void
*/
public function run()
{

$data = [
['title'=>'Finacial forum', 'start_date'=>'2017-10-12', 'end_date'=>'2017-09-15'],
['title'=>'Devtalk', 'start_date'=>'2017-10-13', 'end_date'=>'2017-09-25'],
['title'=>'Super Event', 'start_date'=>'2017-09-23', 'end_date'=>'2017-09-24'],
['title'=>'wtf event', 'start_date'=>'2017-09-19', 'end_date'=>'2017-09-27'],
];
\DB::table('events')->insert($data);
}
}

save and run

php artisan db:seed --class=AddDummyEvent

now we have dummy data

Event Model

next create model with artisan

php artisan make:model Event

next insert fillable

<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Event extends Model
{
//
protected $fillable = ['title','start_date','end_date'];
}

Event Controller

next create event controller with artisan

php artisan make:controlelr EventController

open file and copy code below and paste

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Event;
use MaddHatter\LaravelFullcalendar\Facades\Calendar;
class EventController extends Controller
{
public function index()
{
$events = [];
$data = Event::all();
if($data->count()) {
foreach ($data as $key => $value) {
$events[] = Calendar::event(
$value->title,
true,
new \DateTime($value->start_date),
new \DateTime($value->end_date.' +1 day'),
null,
// Add color and link on event
[
'color' => '#ff0000',
'url' => 'pass here url and any route',
]
);
}
}
$calendar = Calendar::addEvents($events);
return view('fullcalender', compact('calendar'));
}
}

first we include Event model and Calendar class and fetch data with loop and make it compatible for fullcalendar and send complete object to fullcalendar view with compact

Event view

next create create layout view name layout.blad.php and copy code below and paste then save

<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
@yield('style')
<title>Laravel</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">
</style>
</head>
<body>
@yield('content')
</body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
@yield('script')
</html>

next create fullcalendar.blade.php and copy code and paste

 @extends('layout')
@section('style')
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.7/fullcalendar.min.css"/>
@endsection
@section('content')
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Full Calendar Example</div>
<div class="panel-body">
{!! $calendar->calendar() !!}
</div>
</div>
</div>
</div>
</div>
@endsection
@section('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>
{!! $calendar->script() !!}
@endsection

last we bridge controller and view with route

Route::get('events', 'EventController@index');

save and goto

yourdevdomain/events

hope you see result that work