Laravel FullCalendar CRUD with Ajax Tutorial

Tanvir Ahmed Hera

Published on Apr 05, 2022

Hello Artisans, today I'll talk about how you can run a CRUD operation on FullCalendar. FullCalendar is very efficient for bookmark your events. You can read more about FullCalendar by clicking here. So, no more talk and dive into topic.

Note: Tested on Laravel 9.0.

Create Model, Migration and Controller
Modify migration
Modify Model
Modify Controller
Create blade file
Modify Route File
Output

Create Model, Migration and Controller

First of all we need to create Controller where we put our logics, a model for storing data into our database and migration file for our table structure. Fire the below command to create all at a once.

php artisan make:model Event -mcr

Modify migration

Now we already create a event migration file in our step1. Now open it and put the below code in yours

database/migrations/2022_02_20_192332_create_events_table.php

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    public function up()
    {
        Schema::create('events', function (Blueprint $table) {
            $table->id();
            $table->string('title');
            $table->string('start');
            $table->string('end');
            $table->timestamps();
        });
    }

    public function down()
    {
        Schema::dropIfExists('events');
    }
};

Modify Model

Now open the Event.php file which we create in our step1 and the put the below code in yours file.

app/Models/Event.php

<?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',
    ];
}

Modify Controller

Now open the EventController.php file which we create in our step1 and the paste the below code.

app/Http/Controllers/EventController.php

<?php

namespace App\Http\Controllers;

use App\Models\Event;
use Illuminate\Http\Request;
use Illuminate\Support\Carbon;

class EventController extends Controller
{
    public function index(Request $request)
    {
        if ($request->ajax()) {
            $events = Event::all();

            return response()->json($events);
        }

        return view('calendar');
    }

    public function create()
    {
        //
    }

    public function store(Request $request)
    {
        $request->validate([
            'title' => 'required',
            'start' => 'required',
            'end' => 'required'
        ]);

        Event::create($request->all());


        return true;
    }

    public function show(Event $event)
    {
        //
    }

    public function edit(Request $request): \Illuminate\Http\JsonResponse
    {
        $data = [
            'event' => Event::find($request->id),
            'success' => true,
        ];
        return response()->json($data);
    }

    public function update(Request $request, Event $event): \Illuminate\Http\JsonResponse
    {
        $request->validate([
            'title' => 'required',
            'start' => 'required',
            'end' => 'required'
        ]);

        $data = [
            'event' => Event::where('id',$request->id)->update($request->all()),
            'success' => true,
        ];
        return response()->json($data);
    }

    public function destroy(Request $request): \Illuminate\Http\JsonResponse
    {
        $data = [
            'event' => Event::destroy($request->id),
            'success' => true,
        ];
        return response()->json($data);
    }
}

Create Blade File

Now we've to create a blade file for our calendar view, where we can run our CRUD operation in FullCalendar. Create a blade file called calendar.blade.php under resources/views and paste the below code

resources/views/calendar.blade.php

<html>
<head>
    <title>FullCalendar example</title>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.css"/>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/izitoast/1.4.0/css/iziToast.min.css"/>
</head>
<body>
<div class="container">
    <div class="row m-3">
        <h1>FullCalendar example</h1>
        <hr>
        <div class="col-12">
            <div id='calendar'></div>
        </div>
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/izitoast/1.4.0/js/iziToast.min.js"></script>

<script>
    $(document).ready(function() {

        // pass _token in all ajax
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        // initialize calendar in all events
        var calendar = $('#calendar').fullCalendar({
            editable: true,
            events: "{{ route('events.index') }}",
            displayEventTime: true,
            eventRender: function (event, element, view) {
                if (event.allDay === 'true') {
                    event.allDay = true;
                } else {
                    event.allDay = false;
                }
            },
            selectable: true,
            selectHelper: true,
            select: function (start, end, allDay) {
                var event_name = prompt('Event Name:');
                if (event_name) {
                    var start = $.fullCalendar.formatDate(start, "YYYY-MM-DD HH:mm:ss");
                    var end = $.fullCalendar.formatDate(end, "YYYY-MM-DD HH:mm:ss");
                    $.ajax({
                        url: "{{ route('events.store') }}",
                        data: {
                            title: event_name,
                            start: start,
                            end: end
                        },
                        type: 'post',
                        success: function (data) {
                            iziToast.success({
                                position: 'topRight',
                                message: 'Event created successfully.',
                            });

                            calendar.fullCalendar('renderEvent', {
                                id: data.id,
                                title: event_name,
                                start: start,
                                end: end,
                                allDay: allDay
                            }, true);
                            calendar.fullCalendar('unselect');
                        }
                    });
                }
            },
            eventDrop: function (event, delta) {
                var start = $.fullCalendar.formatDate(event.start, "YYYY-MM-DD HH:mm:ss");
                var end = $.fullCalendar.formatDate(event.end, "YYYY-MM-DD HH:mm:ss");

                $.ajax({
                    url: "{{ route('events.edit') }}",
                    data: {
                        title: event.event_name,
                        start: start,
                        end: end,
                        id: event.id,
                    },
                    type: "get",
                    success: function (response) {
                        iziToast.success({
                            position: 'topRight',
                            message: 'Event updated successfully.',
                        });
                    }
                });
            },
            eventClick: function (event) {
                var eventDelete = confirm('Are you sure to remove event?');
                if (eventDelete) {
                    $.ajax({
                        type: "get",
                        url: "{{ route('events.destroy') }}",
                        data: {
                            id: event.id,
                            _method: 'delete',
                        },
                        success: function (response) {
                            calendar.fullCalendar('removeEvents', event.id);
                            iziToast.success({
                                position: 'topRight',
                                message: 'Event removed successfully.',
                            });
                        }
                    });
                }
            }
        });
    });
</script>
</script>
</body>
</html>

Modify Route File

Now we' ve create route for our whole operation. Put the below routes in your web.php

routes/web.php

Route::get('events',[\App\Http\Controllers\EventController::class,'index'])->name('events.index');
Route::post('events/store',[\App\Http\Controllers\EventController::class,'store'])->name('events.store');
Route::get('events/edit',[\App\Http\Controllers\EventController::class,'edit'])->name('events.edit');
Route::get('events/update',[\App\Http\Controllers\EventController::class,'update'])->name('events.update');
Route::get('events/destroy',[\App\Http\Controllers\EventController::class,'destroy'])->name('events.destroy');

Output

We're about to finish our todays' tutorial. If everything goes well, you can visit http://localhost:8000/events and take a look of you own calendar. you can find a below output

That's it for today. Hope you'll enjoy this tutorial. You can also download this from GitHub. Thanks for reading. 🙂

Laravel

Markdown Basics

Below you will find some common used markdown syntax. For a deeper dive in Markdown check out this Cheat Sheet

Bold & Italic

Italics *asterisks*
Bold **double asterisks**

Code

Inline Code
`backtick`Code Block```
Three back ticks and then enter your code blocks here.
```

Headers

# This is a Heading 1
## This is a Heading 2
### This is a Heading 3

Quotes

> type a greater than sign and start typing your quote.

Links

You can add links by adding text inside of [] and the link inside of (), like so:

[link_text](https://google.com)

Lists

To add a numbered list you can simply start with a number and a ., like so:
1. The first item in my list

For an unordered list, you can add a dash -, like so:
- The start of my list

Images

You can add images by selecting the image icon, which will upload and add an image to the editor, or you can manually add the image by adding an exclamation !, followed by the alt text inside of [], and the image URL inside of (), like so:

![alt text for image](url_to_image.png)

Dividers

To add a divider you can add three dashes or three asterisks:
--- or ***

Laravel FullCalendar CRUD with Ajax Tutorial

Tanvir Ahmed Hera

Table of Contents

Create Model, Migration and Controller

Modify migration

Modify Model

Modify Controller

Create Blade File

Modify Route File

Output

Comments (0)

You May Read

Convert Image to Base64 String using jQuery

Understanding OOP Concepts: Polymorphism

Export and Import Database in CentOS/Ubuntu Server

Fix WordPress Memory Exhausted Error by Increasing PHP Memory

How to Fix Destination Folder Already Exists Error in WordPress

Laravel FullCalendar CRUD with Ajax Tutorial

Tanvir Ahmed Hera

Table of Contents

Create Model, Migration and Controller

Modify migration

Modify Model

Modify Controller

Create Blade File

Modify Route File

Output

Share on Social Media

Comments (0)

Comment

Markdown Basics

Bold & Italic

Code

Headers

Quotes

Links

Lists

Images

Dividers

You May Read

Convert Image to Base64 String using jQuery

Understanding OOP Concepts: Polymorphism

Export and Import Database in CentOS/Ubuntu Server

Fix WordPress Memory Exhausted Error by Increasing PHP Memory

How to Fix Destination Folder Already Exists Error in WordPress