Laravel 10 maddhatter/laravel-fullcalendar Tutorial with Example

[ad_1]

maddhatter/laravel-fullcalendar Laravel 10; in this tutorial, you will learn from scratch on how to integrate fullcalendar in Laravel 10 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 10

  • 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, start your terminal to download or install Laravel 10 new setup. Run the following commands in it to install the new Laravel 10 app on your system:

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 10 fullcalendar tutorial, You have successfully learned how to integrate the fullcalendar in Laravel 10 app. As well as how to show, add, update, and delete events on fullcalendar in Laravel 10 app.

Recommended Laravel Posts

If you have any questions or thoughts to share, use the comment form below to reach us.

[ad_2]

Jaspreet Singh Ghuman

Jaspreet Singh Ghuman

Jassweb.com/

Passionate Professional Blogger, Freelancer, WordPress Enthusiast, Digital Marketer, Web Developer, Server Operator, Networking Expert. Empowering online presence with diverse skills.

jassweb logo

Jassweb always keeps its services up-to-date with the latest trends in the market, providing its customers all over the world with high-end and easily extensible internet, intranet, and extranet products.

Contact
Jassweb, Rai Chak, Punjab, India. 143518