maddhatter/laravel-fullcalendar laravel 8; in this tutorial, you will learn from scratch on how to integrate fullcalendar in laravel 8 using “maddhatter/laravel-fullcalendar” package for this example.
Basically, you can use fullcalendear in your laravel app for appointment booking, event scheduling, task management.
maddhatter/laravel-fullcalendar Laravel 8
- Step 1 – Install Laravel App
- Step 2 – Connecting App to Database
- Step 3 – Build Migration & Model
- Step 4 – Install maddhatter/laravel-fullcalendar and Build Routes
- Step 5 – Create Controller Using Artisan Command
- Step 6 – Create Blade View
- Step 7 – Run Development Server
- Step 8 – Test This App
Step 1 – Install Laravel App
First of all, open terminal and execute the following command on terminal to install or download Laravel 8 app:
composer create-project --prefer-dist laravel/laravel blog
Step 2 – Connecting App to Database
In this step, open .env and configure database details for connecting app to database:
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=here your database name here
DB_USERNAME=here database username here
DB_PASSWORD=here database password here
Step 3 – Build Migration & Model
In this step, execute the following command on terminal to create book model and migration file:
php artisan make:model Book -m
This command will create one model name Book and also create one migration file for the Events table.
After successfully run the command, Navigate to database/migrations folder and open create_books_table.php file. Then update the following code into create_books_table.php file, as follow:
<?php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateBookingsTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('bookings', function (Blueprint $table) {
$table->bigIncrements('id');
$table->string('title');
$table->date('start');
$table->date('end');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('bookings');
}
}
?>
The visit app/models and open Book.php file and add the following code into it:
<?php
namespace App/Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Booking extends Model
{
use HasFactory;
protected $fillable = ['title','start','end'];
}
?>
Now, execute the following command on terminal to create the tables into database:
php artisan migrate
Step 4 – Install maddhatter/laravel-fullcalendar and Build Routes
Open your terminal and execute the following command on it:
composer require maddhatter/laravel-fullcalendar
Then visit “config/app.php” file and register this package, as shown below:
'providers' => [
....
MaddHatter\LaravelFullcalendar\ServiceProvider::class,
],
'aliases' => [
....
'Calendar' => MaddHatter\LaravelFullcalendar\Facades\Calendar::class,
]
In this step, Create two routes and add in web.php file. So, visit /routes directory and open web.php file. Then add the following routes into it:
use App\Http\Controllers\FullCalendarController;
Route::get('/booking',[FullCalendarController::class, 'index']);
Step 5 – Create Controller Using Artisan Command
In this step, execute the following command on terminal to create a controller name FullCalendarController.php file:
php artisan make:controller FullCalendarController
After successfully create controller, visit app/http/controllers directory and open FullCalendarController.php file.
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Booking;
use Redirect,Response;
class FullCalendarController extends Controller
{
public function index()
{
$events = [];
$data = Booking::all();
if($data->count()){
foreach ($data as $key => $value) {
$events[] = Calendar::event(
$value->title,
true,
new \DateTime($value->start),
new \DateTime($value->end.' +1 day')
);
}
}
$calendar = Calendar::addEvents($events);
return view('fullcalendar', compact('calendar'));
}
}
?>
Step 6 – Create Blade view
In this step, Visit the resources/views directory and create a blade view file named calendar.blade.php. And add the following code into it:
<!doctype html>
<html lang="en">
<head>
<script src="https://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>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/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">
<div class="panel panel-primary">
<div class="panel-heading">
MY Calender - Tutsmake.com
</div>
<div class="panel-body" >
{!! $calendar->calendar() !!}
{!! $calendar->script() !!}
</div>
</div>
</div>
</body>
</html>
Step 7 – Run Development Server
In this step, execute the following command on terminal to start development server:
php artisan serve
If you want to run the project diffrent port so use this below command
php artisan serve --port=8080
Step 8 – Test This App
Now, open browser and hit the following url on it:
http://localhost:8000/booking
If you want to remove public or public/index.php from URL In laravel, Click Me
Conclusion
Laravel 8 fullcalendar tutorial, You have successfully learned how to integrate the fullcalendar in laravel 8 app. As well as how to show, add, update, and delete events on fullcalendar in laravel 8 app.
Recommended Laravel Posts
If you have any questions or thoughts to share, use the comment form below to reach us.
