Event Calendar in Laravel 5 Using Laravel-fullcalendar ~ Learn Infinity

In this post, we are going to know how to make event calendar in Laravel 5 application. Nowadays most of the website will like to show our plan, holidays, schedule, events, tasks etc on a calendar that means we can see when starting date and ending date for every event. This post, we are using Laravel-fullcalendar package for display all events details in our laravel application. It is very simple to make event calendar in our laravel applicatgion with a help of fullcalendar package. Displaying events on our website with easy-to-use event calendar script. Event Calendar is an excellent event control plug-in for every website. This calendar script package helps to users who are strange with Laravel.

Step 1: Install Laravel

Here, we need new Laravel application for API passport implementation and demonstration. the following command helps to create a new application.


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

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

Step 2: Install Composer Package

In this step, we have to download and install Laravel-fullcalendar package for use to generate Event Calendar. So just run following command to download and install package.


composer require laravel-fullcalendar

composer require laravel-fullcalendar

Step 3: Application configuration

After successfully installed the package then we should update the application config details to use the package in our application. Here we need to add providers & aliases array details with following details,


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

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

'providers' => [

....

MaddHatter\LaravelFullcalendar\ServiceProvider::class,

'aliases' => [

....

'Calendar' => MaddHatter\LaravelFullcalendar\Facades\Calendar::class,

]

Step 4: Create Model, Controller, and Migration

Here, we need to create a Model, Controller, and Migration for Events using Laravel 5 composer artisan command, so first fire bellow command:


php artisan make:model Event -mc

php artisan make:model Event -mc

Above command, help us to create Model, Controller, and Migration for Event master. In migration table file, we need to add the required no of columns details for event table like event_name, start_date, and end_date etc.


<?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->timestamps();
            $table->string('event_name');
            $table->date('start_date');
            $table->date('end_date');
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('events');
    }
}

<?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->timestamps();

$table->string('event_name');

$table->date('start_date');

$table->date('end_date');

});

}

/**

* Reverse the migrations.

* @return void

public function down()

{

Schema::dropIfExists('events');

}

Then we need to go and update the Event model file in our application like fillable, primary key, product, etc. Event model files present at app/Event.php path and just update with following details in it.


<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

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

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Event extends Model

{

protected $fillable = [

'event_name', 'start_date', 'end_date'

];

}

Step 5: Routes Definition

In the fifth step, we want to add new routes for showing Event Calendar with new event form controls. so just goto routes/web.php file and update the following routes to access data table operation in our application.


Route::get('events', 'EventController@index')->name('events.index');
Route::post('events', 'EventController@addEvent')->name('events.add');

Route::get('events', 'EventController@index')->name('events.index');

Route::post('events', 'EventController@addEvent')->name('events.add');

Step 6: Create Controller with Methods

On this step, we want to make a new controller for Event Calendar operations in laravel application. After creating a controller file we need to define a methods and handling function in it.


<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Redirect;
use App\Http\Controllers\Controller;
use Auth;
use Validator;
use App\Event;

use Calendar;

class EventController extends Controller
{
    public function index(){
    	$events = Event::get();
    	$event_list = [];
    	foreach ($events as $key => $event) {
    		$event_list[] = Calendar::event(
                $event->event_name,
                true,
                new \DateTime($event->start_date),
                new \DateTime($event->end_date.' +1 day')
            );
    	}
    	$calendar_details = Calendar::addEvents($event_list); 

        return view('events', compact('calendar_details') );
    }

    public function addEvent(Request $request)
    {
        $validator = Validator::make($request->all(), [
            'event_name' => 'required',
            'start_date' => 'required',
            'end_date' => 'required'
        ]);

        if ($validator->fails()) {
        	\Session::flash('warnning','Please enter the valid details');
            return Redirect::to('/events')->withInput()->withErrors($validator);
        }

        $event = new Event;
        $event->event_name = $request['event_name'];
        $event->start_date = $request['start_date'];
        $event->end_date = $request['end_date'];
        $event->save();

        \Session::flash('success','Event added successfully.');
        return Redirect::to('/events');
    }


}

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use Illuminate\Support\Facades\Redirect;

use App\Http\Controllers\Controller;

use Auth;

use Validator;

use App\Event;

use Calendar;

class EventController extends Controller

{

public function index(){

$events = Event::get();

$event_list = [];

foreach ($events as $key => $event) {

$event_list[] = Calendar::event(

$event->event_name,

true,

new \DateTime($event->start_date),

new \DateTime($event->end_date.' +1 day')

);

}

$calendar_details = Calendar::addEvents($event_list);

return view('events', compact('calendar_details') );

}

public function addEvent(Request $request)

{

$validator = Validator::make($request->all(), [

'event_name' => 'required',

'start_date' => 'required',

'end_date' => 'required'

]);

if ($validator->fails()) {

\Session::flash('warnning','Please enter the valid details');

return Redirect::to('/events')->withInput()->withErrors($validator);

}

$event = new Event;

$event->event_name = $request['event_name'];

$event->start_date = $request['start_date'];

$event->end_date = $request['end_date'];

$event->save();

\Session::flash('success','Event added successfully.');

return Redirect::to('/events');

}

Step 7: Blade File Defining

In the final step, we make a one blade file with Event Calendar with new event form controls and with required CSS and JS library. Following code help us to show the Event Calendar in laravel application using laravel-fullcalendar package.

Page CSS and jQuery details


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.7/fullcalendar.min.css"/>


<!-- Scripts -->
<script src="http://code.jquery.com/jquery.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>

{!! $calendar_details->script() !!}

{!! $calendar_details->script() !!}

Event.blade.php


@extends('layouts.app')

@section('content')
        <div class="container">

            <div class="panel panel-primary">

             <div class="panel-heading">Event Calendar in Laravel 5 Using Laravel-fullcalendar</div>

              <div class="panel-body">    

                   {!! Form::open(array('route' => 'events.add','method'=>'POST','files'=>'true')) !!}
                    <div class="row">
                       <div class="col-xs-12 col-sm-12 col-md-12">
                          @if (Session::has('success'))
                             <div class="alert alert-success">{{ Session::get('success') }}</div>
                          @elseif (Session::has('warnning'))
                              <div class="alert alert-danger">{{ Session::get('warnning') }}</div>
                          @endif

                      </div>

                      <div class="col-xs-4 col-sm-4 col-md-4">
                        <div class="form-group">
                            {!! Form::label('event_name','Event Name:') !!}
                            <div class="">
                            {!! Form::text('event_name', null, ['class' => 'form-control']) !!}
                            {!! $errors->first('event_name', '<p class="alert alert-danger">:message</p>') !!}
                            </div>
                        </div>
                      </div>

                      <div class="col-xs-3 col-sm-3 col-md-3">
                        <div class="form-group">
                          {!! Form::label('start_date','Start Date:') !!}
                          <div class="">
                          {!! Form::date('start_date', null, ['class' => 'form-control']) !!}
                          {!! $errors->first('start_date', '<p class="alert alert-danger">:message</p>') !!}
                          </div>
                        </div>
                      </div>

                      <div class="col-xs-3 col-sm-3 col-md-3">
                        <div class="form-group">
                          {!! Form::label('end_date','End Date:') !!}
                          <div class="">
                          {!! Form::date('end_date', null, ['class' => 'form-control']) !!}
                          {!! $errors->first('end_date', '<p class="alert alert-danger">:message</p>') !!}
                          </div>
                        </div>
                      </div>

                      <div class="col-xs-1 col-sm-1 col-md-1 text-center"> &nbsp;<br/>
                      {!! Form::submit('Add Event',['class'=>'btn btn-primary']) !!}
                      </div>
                    </div>
                   {!! Form::close() !!}

             </div>

            </div>

            <div class="panel panel-primary">
              <div class="panel-heading">MY Event Details</div>
              <div class="panel-body" >
                  {!! $calendar_details->calendar() !!}
              </div>
            </div>

            </div>
@endsection

@extends('layouts.app')

@section('content')

<div class="panel-heading">Event Calendar in Laravel 5 Using Laravel-fullcalendar</div>

{!! Form::open(array('route' => 'events.add','method'=>'POST','files'=>'true')) !!}

@if (Session::has('success'))

<div class="alert alert-success">{{ Session::get('success') }}</div>

@elseif (Session::has('warnning'))

<div class="alert alert-danger">{{ Session::get('warnning') }}</div>

@endif

</div>

{!! Form::label('event_name','Event Name:') !!}

{!! Form::text('event_name', null, ['class' => 'form-control']) !!}

{!! $errors->first('event_name', '<p class="alert alert-danger">:message</p>') !!}

</div>

{!! Form::label('start_date','Start Date:') !!}

{!! Form::date('start_date', null, ['class' => 'form-control']) !!}

{!! $errors->first('start_date', '<p class="alert alert-danger">:message</p>') !!}

</div>

{!! Form::label('end_date','End Date:') !!}

{!! Form::date('end_date', null, ['class' => 'form-control']) !!}

{!! $errors->first('end_date', '<p class="alert alert-danger">:message</p>') !!}

</div>

{!! Form::submit('Add Event',['class'=>'btn btn-primary']) !!}

</div>

{!! Form::close() !!}

</div>

<div class="panel-heading">MY Event Details</div>

{!! $calendar_details->calendar() !!}

</div>

@endsection

Now you are ready to see the demonstration of Server Side Datatable using laravel.

10 Replies to “Event Calendar in Laravel 5 Using Laravel-fullcalendar”

Nad says:

January 23, 2018 at 10:04 AM

Hi,

Is it possible we can click on the calendar to fill the form?

I used to develop a mobile app using laravel full calendar. But the problem is I dont know either laravel full calendar can click on the calendar and the form popup.

1. danier says:
  
  March 8, 2018 at 1:19 AM
  
  hay forma de que compartas el proyecto en git
  
Bugame says:

March 9, 2018 at 9:17 PM

How about source code for model?

Christian says:

March 13, 2018 at 7:31 AM

Buen dia, y para poder guardar la hora como seria?

mouna says:

April 4, 2018 at 8:48 PM

hi,
I m working on a project with laravel and i’m using voyager api and i want to create a calendar and create events .. what shell i do ? can i use the API passport and use the code on voyager is it possible ? please write me back

hamada nasser says:

April 15, 2018 at 6:32 PM

thats cool but how i delete and edit event

oulqaid zakariae says:

May 29, 2018 at 9:34 AM

hello! how can I add drag and drop event?

Mike says:

July 9, 2018 at 11:38 PM

Thanks for this!

shaminda says:

September 13, 2018 at 9:41 AM

After step 3 its gives error indicating
Class ‘MaddHatter\LaravelFullcalendar\ServiceProvider’ not found
when run php artisan ….

1. Learn Infinity says:
  
  September 16, 2018 at 11:09 AM
  
  Hi,
  
  Just update FullCalendar service provider using your composer