Laravel 8 Calendar Event CRUD Example using Ajax

Hey devs, in this Laravel example tutorial i will discuss about Laravel 8 Fullcalendar event. From this Laravel 8 Fullcalendar tutorial you will learn how we can set our event. For setting the event in Laravel callendar i will use jQuery.

So this Laravel calendar event example will help you laravel 8 fullcalendar tutorial. Here you also learn how to use fullcalendar in Laravel 8. In this Laravel calendar tutorial we will simply create crud of calendar event.

So you can easily create event, edit event by drag and drop and delete event also. From this example we will create events table with start, edit date and title column. then you can add, edit and delete that event with database.

Step 1: Install Laravel 8

Now time to install a fresh Laravel project to start our Laravel full calendar event tutorial. Install it via 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 8 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 following path "database/migrations" and you have to put bellow code in your migration file for create 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');
    }
}

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 file so first add bellow 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 FullCalenderController.php file in your app/Http/Controllers directory. open FullCalenderController.php file and put bellow 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 6 | Create API Authentication using Laravel Passport

Now you can run it and check it.