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
Contents
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.
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.
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
Angular 6 CRUD Operations Application Tutorials
Read :
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.
I am Jaydeep Gondaliya , a software engineer, the founder and the person running Pakainfo. I’m a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, JavaScript, jQuery, Laravel, CodeIgniter, VueJS, AngularJS and Bootstrap from the early stage.