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 2 3 |
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 2 3 |
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 12 13 |
'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 2 3 |
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 35 36 |
<?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 13 14 |
<?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 3 4 |
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 57 58 |
<?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 10 11 |
<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 72 73 |
@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"> <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.
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.
hay forma de que compartas el proyecto en git
How about source code for model?
Buen dia, y para poder guardar la hora como seria?
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
thats cool but how i delete and edit event
hello! how can I add drag and drop event?
Thanks for this!
After step 3 its gives error indicating
Class ‘MaddHatter\LaravelFullcalendar\ServiceProvider’ not found
when run php artisan ….
Hi,
Just update FullCalendar service provider using your composer
Adding data to database works, but It is not appearing on view page, I have added everything, please help