Learn Infinity

Learn Some Thing New

Event Calendar in Laravel 5 Using Laravel-fullcalendar

Event Calendar in Laravel 5 Using Laravel-fullcalendar

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.

1
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.

1
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,

1
2
3
4
5
6
7
8
9
10
11
'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:

1
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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<?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.

1
2
3
4
5
6
7
8
9
10
11
12
<?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.

1
2
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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<?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

1
2
3
4
5
6
7
8
9
<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() !!}

Event.blade.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
@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

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

Prev post Server Side Datatable Using Laravel 5
Next post Charts In Laravel 5 Using Charts Package

Learn Infinity

Learn Infinity is the most famous Programming & Web Development blog. Our principal is to provide the best online tutorial on web development. We execute the best tutorials for web experts this will help developers, programmers, freelancers and proving free resource you can download or preview the tutorials.

Related Posts

11 thoughts on “Event Calendar in Laravel 5 Using Laravel-fullcalendar”

  1. 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.

    Reply

  4. 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

    Reply

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

    Reply

  9. Adding data to database works, but It is not appearing on view page, I have added everything, please help

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top