Create Events with Ajax in Laravel 9 with Fullcalendar Example

Hello Artisan,

In this Laravel fullcalendar tutorial, I will show you how we can create events in the calendar using ajax requests in Laravel 9. I will help you to give an example of laravel 9 fullcalendar crud example. In this article, we will implement a laravel 9 fullcalendar ajax crud step by step. You will be able to understand the concept of laravel 9 fullcalendar event click.

After completing this maddhatterlaravel fullcalendar laravel 9 tutorial, you will be able to create as many events as you want. So we can easily create events, edit events by drag and drop and delete events also. From this example, we will create an events table with a start, edit date, and title column. then you can add, edit and delete that event with the database.

So if you don't know laravel 9 fullcalendar, then this example is for you. Let's start this example of laravel fullcalendar:

Step 1: Install Laravel 9

Now time to install a fresh Laravel project to start our Laravel full calendar event tutorial. Install it via the command line.

composer create-project --prefer-dist laravel/laravel blog

Step 2: Create Model

In this second step we need to create migration for events table using Laravel 9 php artisan command, so first fire bellow command:

php artisan make:model Event -m

Recommended : Laravel 8.x API Permissions Using Passport Scope

After this command you will find one file in the following path "database/migrations" and you have to put the below code in your migration file for creating events table.

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
  
class CreateEventsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('events', function (Blueprint $table) {
            $table->id();
            $table->string('title');
            $table->date('start');
            $table->date('end');
            $table->timestamps();
        });
    }  
  
    /** 
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('events');
    }
}

And update the models like:

app/Models/Event.php

namespace App\Models;
  
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
  
class Event extends Model
{
    use HasFactory;
  
    protected $fillable = [
        'title', 'start', 'end'
    ];
}

Step 3: Create Routes

In this step, we will create routes and controller files so first add the below route in your routes.php file.

routes/web.php

use Illuminate\Support\Facades\Route;
  
use App\Http\Controllers\FullCalenderController;
  
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
  
Route::get('fullcalender', [FullCalenderController::class, 'index']);
Route::post('fullcalenderAjax', [FullCalenderController::class, 'ajax']);

After this, we have to create a FullCalenderController.php file in your app/Http/Controllers directory. open the FullCalenderController.php file and put below code in that file.

app/Http/Controllers/FullCalenderController.php

namespace App\Http\Controllers;
  
use Illuminate\Http\Request;
use App\Models\Event;
  
class FullCalenderController extends Controller
{
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function index(Request $request)
    {
  
        if($request->ajax()) {
       
             $data = Event::whereDate('start', '>=', $request->start)
                       ->whereDate('end',   '<=', $request->end)
                       ->get(['id', 'title', 'start', 'end']);
  
             return response()->json($data);
        }
  
        return view('fullcalender');
    }
 
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function ajax(Request $request)
    {
 
        switch ($request->type) {
           case 'add':
              $event = Event::create([
                  'title' => $request->title,
                  'start' => $request->start,
                  'end' => $request->end,
              ]);
 
              return response()->json($event);
             break;
  
           case 'update':
              $event = Event::find($request->id)->update([
                  'title' => $request->title,
                  'start' => $request->start,
                  'end' => $request->end,
              ]);
 
              return response()->json($event);
             break;
  
           case 'delete':
              $event = Event::find($request->id)->delete();
  
              return response()->json($event);
             break;
             
           default:
             # code...
             break;
        }
    }
}

Step 4: Create Blade File

Ok, now all are set to almost. just we have to create our blade view. So let's create.

resources/views/fullcalender.blade.php

Read also: Laravel 9 API Authentication using Laravel Passport

Now, this laravel 9 calendar tutorial will help you.