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');
#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>
At last, our Laravel Full Calendar Tutorial is over.
good afternoon friend wanted to ask you the favor that you tell me how I do so that when I click on the calendar date he sends me an alert with the date of the day, I have tried some things but when I put some code the data that I have in the base of data does not show them to me, I would appreciate if you could tell me which part of the code should place that instruction thanks …
How can I edit the event in fullcalendar?