Laravel Fullcalendar Integration Tutorial Example From Scratch

Today, We want to share with you Laravel Fullcalendar Integration Tutorial Example From Scratch.In this post we will show you Laravel full calendar tutorial example from scratch, hear for we will give you demo and example for implement.In this post, we will learn about How to implement jQuery fullcalendar in laravel 5.6 with an example.

Laravel Fullcalendar Integration Tutorial Example From Scratch

There are the Following The simple About Laravel Fullcalendar Integration Tutorial Example From Scratch Full Information With Example and source code.

As I will cover this Post with live Working example to develop Laravel Full Calendar Tutorial With Example, so the some major files and Directory structures for this example is following below.

Laravel Fullcalendar Integration Tutorial Example

  • Laravel Full Calendar Tutorial
  • Install Laravel Project setup
  • Laravel Include full calendar Package
  • Settings SQL Database
  • Install Laravel Model and Migration File
  • Make a Laravel View File
  • Make Laravel controller
  • Laravel Route
  • Save Event in Database
  • Get Event From Database
  • Listing Event in Calendar

Step #1: Install Laravel Project

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

Step 2: Install Laravel Package full calendar

maddhatter/laravel-fullcalendar Package

composer require maddhatter/laravel-fullcalendar

//Laravel 5.4 (and earlier)
//app.php config file:
MaddHatter\LaravelFullcalendar\ServiceProvider::class,

//create an alias
'Calendar' => MaddHatter\LaravelFullcalendar\Facades\Calendar::class,

Laravel 5.5+

The Laravel 5.5+ version provider as well as Laravel 5.5 Full Calendar Tutorial With Example main alias will be generated automatically.

Read Also:  How to Change User Password in Laravel 6

Step #3: Settings SQL Database

And then I can setup simple database settings.

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

Step #4: Create Laravel Model and Migration File

php artisan make:model Event -m

Make Event.php

//create_schedulevents_table 

public function up()
    {
        Schema::create('schedulevents', function (Blueprint $table) {
            $table->increments('id');
            $table->string('title');
            $table->date('event_start_date');
            $table->date('event_end_date');
            $table->timestamps();
        });
    }

Laravel Project save as well as run

php artisan migrate

Step #5: Make a View File

resources >> views >> createschedulevents.blade.php

<!-- createschedulevents.blade.php -->

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Laravel Fullcalendar Integration Tutorial Example From Scratch</title>
    <link rel="stylesheet" href="{{asset('css/app.css')}}">
    <link href="3.3.6/css/bootstrap.min.css" rel="stylesheet">  
    <link href="1.5.0/css/bootstrap-datepicker.css" rel="stylesheet">  
    <script src="jquery/1.9.1/jquery.js"></script>  
    <script src="/3.3.6/js/bootstrap.min.js"></script>  
    <script src="bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.js"></script>  
  </head>
  <body>
    <div class="container">
      <br/>
      <form method="post" action="{{url('schedulevent/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="evenetstartdt" name="evenetstartdt">   
         </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="evenetendtdt" name="evenetendtdt">   
         </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">  
        $('#evenetstartdt').datepicker({ 
            autoclose: true,   
            format: 'yyyy-mm-dd'  
         });
         $('#evenetendtdt').datepicker({ 
            autoclose: true,   
            format: 'yyyy-mm-dd'
         }); 
    </script>
  </body>
</html>

Step #6: Make Laravel controller

 php artisan make:controller SchedulEventController

SchedulEventController.php

public function CreateSchedulEvent()
    {
        return view('createschedulevents');
    }

Step 7: Define Laravel Route

here simple I all the Laravel Rotuing register all route in a main web.php file.

Read Also:  javascript length of string

Route::get('schedulevent/add','[email protected]');
Route::post('schedulevent/add','[email protected]');
Route::get('schedulevent','[email protected]');

Step #8: Save Event in Database

use App\Event;

public function store(Request $request)
    {
        $schedulevent= new Event();
        $schedulevent->title=$request->get('title');
        $schedulevent->event_start_date=$request->get('evenetstartdt');
        $schedulevent->event_end_date=$request->get('evenetendtdt');
        $schedulevent->save();
        return redirect('schedulevent')->with('success', 'Event has been added');
    }

Step #9: Get ALL Event From Database

Laravel SchedulEventController().

use MaddHatter\LaravelFullcalendar\Facades\Calendar;

public function calender()
            {
                $schedulevents = [];
                $data = Event::all();
                if($data->count())
                 {
                    foreach ($data as $key => $value) 
                    {
                        $schedulevents[] = Calendar::schedulevent(
                            $value->title,
                            true,
                            new \DateTime($value->event_start_date),
                            new \DateTime($value->event_end_date.'+1 day'),
                            null,
                            // Add color
                         [
                             'color' => '#3d3d3d',
                             'textColor' => '#008000',
                         ]
                        );
                    }
                }
                $calendar = Calendar::addEvents($schedulevents);
                return view('calender', compact('calendar'));
            }

Step #10: LAravel Listing Event in Calendar

resources >> views >> calendar.blade.php

<!-- 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="pakainfo 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 Fullcalendar Integration Tutorial Example From Scratch</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 Fullcalendar Integration Tutorial Example – Output

Laravel Fullcalendar Integration Tutorial Example
Laravel Fullcalendar Integration Tutorial Example
Angular 6 CRUD Operations Application Tutorials

Read :

Read Also:  Vue js Toggle switch Update DB field using Ajax

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about Laravel Fullcalendar Integration Tutorial Example From Scratch.
I would like to have feedback on my Pakainfo.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.