Laravel Full Calendar Tutorial With Example

Hello coders, In this example, I will show you how to do Laravel Full Calendar Tutorial. We use Laravel 5.6 with maddhatter/laravel-fullcalendar Package in our application.  The full calendar(JavaScript Event Calendar) will represent our daily tasks, events, and schedule one regular base and also start date to end date. If you want to more information, then go to Github.

Laravel Full Calendar Tutorial

We are going to Configure Laravel Project.

#1: Download Laravel Project

Install new Laravel project by the writing following command.

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

#2: Install full calendar Package

Now we will install maddhatter/laravel-fullcalendar Package in our project.

composer require maddhatter/laravel-fullcalendar

Laravel 5.4 (and earlier)

Register the service provider in your app.php config file:

MaddHatter\LaravelFullcalendar\ServiceProvider::class,

And optionally create an alias:

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

Laravel 5.5+

The provider and Calendar alias will be registered automatically.

#3: Configure SQL Database

Now we can setup database credentials.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=calendar
DB_USERNAME=root
DB_PASSWORD=

#4: Build Model and Migration File

php artisan make:model Event -m

It will create an Event.php file and also create create_events_table.php  migration file.

//create_events_table 

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();
        });
    }

save and run

php artisan migrate

#5: Create a View File

Create a file in resources  >>  views  >>   createevent.blade.php and put this following code in it.

<!-- createevent.blade.php -->

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Laravel Full Calendar Example</title>
    <link rel="stylesheet" href="{{asset('css/app.css')}}">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">  
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker.css" rel="stylesheet">  
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>  
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.js"></script>  
  </head>
  <body>
    <div class="container">
      <br/>
      <form method="post" action="{{url('event/add')}}">
        @csrf
        <div class="row">
          <div class="col-md-4"></div>
          <div class="form-group col-md-4">
            <label for="Title">Title:</label>
            <input type="text" class="form-control" name="title">
          </div>
        </div>
        <div class="row">
          <div class="col-md-4"></div>
          <div class="form-group col-md-4">
            <strong> Start Date : </strong>  
            <input class="date form-control"  type="text" id="startdate" name="startdate">   
         </div>
        </div>
        <div class="row">
          <div class="col-md-4"></div>
          <div class="form-group col-md-4">
            <strong> End Date : </strong>  
            <input class="date form-control"  type="text" id="enddate" name="enddate">   
         </div>
        </div>
        <div class="row">
          <div class="col-md-4"></div>
          <div class="form-group col-md-4">
            <button type="submit" class="btn btn-success">Add Event</button>
          </div>
        </div>
      </form>
    </div>
    <script type="text/javascript">  
        $('#startdate').datepicker({ 
            autoclose: true,   
            format: 'yyyy-mm-dd'  
         });
         $('#enddate').datepicker({ 
            autoclose: true,   
            format: 'yyyy-mm-dd'
         }); 
    </script>
  </body>
</html>

#6: Create one controller

 php artisan make:controller EventController

It will create a controller file called EventController.php.

public function createEvent()
    {
        return view('createevent');
    }

#7: Define Route

We register all route in a web.php file.

Route::get('event/add','EventController@createEvent');
Route::post('event/add','EventController@store');
Route::get('event','EventController@calender');

How to implement jQuery fullcalendar in laravel

#8: Store Event in Database

Now we can add the event to the database using store() function in EventController.

use App\Event;

public function store(Request $request)
    {
        $event= new Event();
        $event->title=$request->get('title');
        $event->start_date=$request->get('startdate');
        $event->end_date=$request->get('enddate');
        $event->save();
        return redirect('event')->with('success', 'Event has been added');
    }

#9: Retrieve Event From Database

Here we retrieve an event from database and display in Calendar. So open a file and copy the code below and paste in EventController().

use MaddHatter\LaravelFullcalendar\Facades\Calendar;

public function calender()
            {
                $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
                         [
                             'color' => '#000000',
                             'textColor' => '#008000',
                         ]
                        );
                    }
                }
                $calendar = Calendar::addEvents($events);
                return view('calender', compact('calendar'));
            }

First, we include Event model and Calendar class and get data with loop and make it compatible with calendar and send the complete object to fullcalendar view with the compact.

#10: Display Event in Calendar

Create a file in resources  >>  views  >>   calendar.blade.php and put this following code in it.

<!-- calendar.blade.php -->
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/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">
@if (\Session::has('success'))
      <div class="alert alert-success">
        <p>{{ \Session::get('success') }}</p>
      </div><br />
     @endif
   <div class="panel panel-default">
         <div class="panel-heading">
             <h2>Laravel Full Calendar Tutorial</h2>
         </div>
         <div class="panel-body" >
            {!! $calendar->calendar() !!}
        </div>
    </div>
</div>
<script src="//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>
{!! $calendar->script() !!}
</body>
</html>

 

laravel calendar tutorial

At last, our Laravel Full Calendar Tutorial is over.

Post Your Thoughts

This site uses Akismet to reduce spam. Learn how your comment data is processed.

2 Comments