Laravel full calendar tutorial example from scratch

In this example you will learn how to implement fullcalendar(JavaScript Event Calendar) in Laravel 5 application.

we would like to represent our events, schedule, tasks etc on calendar that way we can see when starting time and ending time. In this article we will use fullcalendar jquery plugin for display events in laravel application. It is very easy to implement. Example is from scratch so you have to also create table and make dummy data etc.

After done this tutorial, you will find bellow layout of full calender.

Layout:

Install New Laravel Project:

If you haven't installed laravel application yet then require to get fresh Laravel 5.4 application using bellow command, So open your terminal OR command prompt and run bellow command:

composer create-project --prefer-dist laravel/laravel blog

Install maddhatter/laravel-fullcalendar Package

In this step we have to maddhatter/laravel-fullcalendar package for full calender api so one your cmd or terminal and fire bellow command:

composer require maddhatter/laravel-fullcalendar

After successfully install package, open config/app.php file and add service provider and alias.

config/app.php

'providers' => [
	....
	MaddHatter\LaravelFullcalendar\ServiceProvider::class,
],
'aliases' => [
	....
	'Calendar' => MaddHatter\LaravelFullcalendar\Facades\Calendar::class,
]

Create events Table

now we have to create migration for events table using Laravel 5.4 php artisan command, so first fire bellow command:

php artisan make:migration create_events_table

After this command you will find one file in following path database/migrations and you have to put bellow code in your migration file for create events table.

<?php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
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 you are ready to run migration by following command:

php artisan migrate

Create events Model

After creating table we have to create model for "events" table so just run bellow command and create new model:

php artisan make:model Event

Ok, so after run bellow command you will find app/Event.php and put bellow content in Event.php file:

app/Event.php

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

Create events table seeder

Now we will create new seeder for dummy records that way we can display events on full calender. So let's create new seeder by following command:

php artisan make:seeder AddDummyEvent

After run bellow command, you will find new file on seeds folder and put bellow code on that file:

database/seeds/AddDummyEvent.php

<?php
use Illuminate\Database\Seeder;
use App\Event;
class AddDummyEvent extends Seeder
{
    /**
     * Run the database seeds.
     *
     * @return void
     */
    public function run()
    {
        $data = [
        	['title'=>'Rom Event', 'start_date'=>'2017-05-10', 'end_date'=>'2017-05-15'],
        	['title'=>'Coyala Event', 'start_date'=>'2017-05-11', 'end_date'=>'2017-05-16'],
        	['title'=>'Lara Event', 'start_date'=>'2017-05-16', 'end_date'=>'2017-05-22'],
        ];
        foreach ($data as $key => $value) {
        	Event::create($value);
        }
    }
}

You can run above seeder by following command:

php artisan db:seed --class=AddDummyEvent

Create Route:

Now we will add new route "events" for display full calender, So let's add new route on web.php file.

routes/web.php

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

Create EventController Controller:

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Calendar;
use App\Event;
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')
            );
          }
       }
      $calendar = Calendar::addEvents($events); 
      return view('mycalender', compact('calendar'));
    }
}

Create mycalender.blade.php file:

<!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" href="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">
            MY Calender    
        </div>
        <div class="panel-body" >
            {!! $calendar->calendar() !!}
            {!! $calendar->script() !!}
        </div>
    </div>
</div>
</body>
</html>

Now you can run and let's see example.