Laravel full calendar tutorial example using maddhatter/laravel-fullcalendar

In this post we are share with you how to implement full calendar (JavaScript Event Calendar) in laravel application. using full calendar we will represent our daily tasks, events and schedule one daly basis and also start date to end date. in this post we are create basic example for full calendar with dummy data but you can implement it with your dynamic data. we are also show this how to handle dynamic data in it.

After completed this tutorials your output look like this.

Layout

Step – 1 : Installation Package

We are use here maddhatter/laravel-fullcalendar laravel package for integrate full calendar in our laravel application. simple run following command and install this package.

composer require maddhatter/laravel-fullcalendar

Step – 2 : Configure Pacckage

After install successfully maddhatter/laravel-fullcalendar package in our application we need to set their Service Provider. so, open your config/app.php file and add following provider in it.

'providers' => [
	.....
	.....
	MaddHatterLaravelFullcalendarServiceProvider::class,
],
'aliases' => [
	.....
	.....
	'Calendar' => MaddHatterLaravelFullcalendarFacadesCalendar::class,
]

Step – 3 : Create Event Table Migration

Now create event table migration run by following command.

 
php artisan make:migration create_events_table

After run this command you can see one migration file automatic create in database/migrations folder. open it and copy past following in it.

use IlluminateSupportFacadesSchema;
use IlluminateDatabaseSchemaBlueprint;
use IlluminateDatabaseMigrationsMigration;
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->date('start_date');
            $table->date('end_date');
            $table->timestamps();
        });
    }
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::drop("events");
    }
}

Now run your migration using following command.

php artisan migrate

Step – 4 : Create Event Model

Now create events table model run by this command.

php artisan make:model Event

After run this command open app/Event.php file and put following in it

namespace App;
use IlluminateDatabaseEloquentModel;

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

Step – 5 : Create Events Table Seeder

Now we are need some dummy data in events table. so, we are insert dummy data created by seeder. run following command create seed file.

php artisan make:seeder AddDummyEvent

After run this command open database/seeds/AddDummyEvent.php file and put following in it.

use IlluminateDatabaseSeeder;
use AppEvent;

class AddDummyEvent extends Seeder
{
    public function run()
    {
        $data = [
        	['title'=>'Demo Event-1', 'start_date'=>'2017-09-11', 'end_date'=>'2017-09-12'],
        	['title'=>'Demo Event-2', 'start_date'=>'2017-09-11', 'end_date'=>'2017-09-13'],
        	['title'=>'Demo Event-3', 'start_date'=>'2017-09-14', 'end_date'=>'2017-09-14'],
        	['title'=>'Demo Event-3', 'start_date'=>'2017-09-17', 'end_date'=>'2017-09-17'],
        ];
        foreach ($data as $key => $value) {
        	Event::create($value);
        }
    }
}
	

Now run this seed by following command.

php artisan db:seed --class=AddDummyEvent
	

Step – 6 : Create Route

Nex, create following route by display all events in full caleendar. open your routes/web.php file and create following route.

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

Step – 7 : Create Controller

Now create EventController.php file in app/Http/Controllers/ folder.

namespace AppHttpControllers;

use IlluminateHttpRequest;
use Calendar;
use AppEvent;

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' => '#f05050',
	                    'url' => 'pass here url and any route',
	                ]
                );
            }
        }
        $calendar = Calendar::addEvents($events);
        return view('fullcalender', compact('calendar'));
    }
}

Step – 8 : Create Blade File

Next, create fullcalender.blade.php file in resources/views folders and put into it folloawing content.

@extends('layouts.app')

@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 >
    <div >
        <div >
            <div >
                <div >Full Calendar Example</div>

                <div >
                    {!! $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
	

Now we are ready to run our example so run bellow command ro quick run:

php artisan serve

Now you can open bellow URL on your browser:

http://localhost:8000/events

If you face any problem then please write a comment or give some suggestions for improvement. Thanks…