How to implement jQuery fullcalendar in laravel 5.5

Image for post
Image for post
Image for post
Image for post

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.

Image for post
Image for post

Install Fullcalendar package

composer require maddhatter/laravel-fullcalendar

next register in app.php

Image for post
Image for post

Event table

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

<?phpuse 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

Image for post
Image for post

Event Model

php artisan make:model Event

next insert fillable

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

Event Controller

php artisan make:controlelr EventController

open file and copy code below and paste

<?phpnamespace 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

<!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

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store