Laravel fullcalendar crud events tutorial; In this tutorial, we'll show you how to use the FullCalendar JavaScript event calendar plugin to create and cancel events in your Laravel app.

FullCalendar is a fantastic, robust, and lightweight JavaScript calendar plugin for creating dynamic, draggable event calendars in modern web applications.

The FullCalendar package supports jQuery AJAX and efficiently organises your events, plus it's visually appealing thanks to its easy modification.

This step-by-step tutorial shows you how to incorporate and integrate FullCalendar in Laravel, as well as how to use FullCalendar in the Laravel app.

How to Make Fullcalendar CRUD Events in Laravel 9

Table of Content

  • Step 1: Create Laravel App
  • Step 2: Connect to Database
  • Step 3: Set Up Migration and Model
  • Step 4: Generate and Configure Controller
  • Step 5: Create and Add Routes
  • Step 6: Create Blade View
  • Step 7: Run Development Server

Step 1 - Create Laravel App

It's great if you have composer installed on your machine because it will allow you to install the new laravel application. If the app has already been created, you can skip this step.

composer create-project --prefer-dist laravel/laravel full-calendar-demo

Make that you're in the app folder:

cd full-calendar-demo

Step 2 - Connect to Database

The first thing we do after entering the inside app is open the .env file and add the database details to the ENV configuration file in order to link the laravel project to the database.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=db
DB_USERNAME=root
DB_PASSWORD=

Step 3 - Set Up Migration and Model

To build the migration and model file, run the following command to create the events table in the database and add some values related to events.

php artisan make:model CrudEvents -m

After that, enter the app/Models/CrudEvents.php file and declare the crud events values in a $fillable array.

<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class CrudEvents extends Model
{
    use HasFactory;
    
    protected $fillable = [
        'event_name', 
        'event_start', 
        'event_end'
    ];    
}

In the database/migrations/create_crud_events_table.php file, add values for event name, event start, and event end.

<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateCrudEventsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('crud_events', function (Blueprint $table) {
            $table->id();
            $table->string('event_name');
            $table->date('event_start');
            $table->date('event_end');            
            $table->timestamps();
        });
    }
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('crud_events');
    }
}

Run the following command to push the migration into the database:

php artisan migrate

Step 4 - Generate and Configure Controller

To construct a new calendar that can handle creating, reading, updating, and deleting events, use the command below to generate a new controller file.

php artisan make:controller CalenderController

Then, inside the app\Http\Controllers\CalenderController.php file, build two functions that will set up the view and conduct CRUD activities for fullcalendar events.

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\CrudEvents;
class CalenderController extends Controller
{
    public function index(Request $request)
    {
        if($request->ajax()) {  
            $data = CrudEvents::whereDate('event_start', '>=', $request->start)
                ->whereDate('event_end',   '<=', $request->end)
                ->get(['id', 'event_name', 'event_start', 'event_end']);
            return response()->json($data);
        }
        return view('welcome');
    }
 
    public function calendarEvents(Request $request)
    {
 
        switch ($request->type) {
           case 'create':
              $event = CrudEvents::create([
                  'event_name' => $request->event_name,
                  'event_start' => $request->event_start,
                  'event_end' => $request->event_end,
              ]);
 
              return response()->json($event);
             break;
  
           case 'edit':
              $event = CrudEvents::find($request->id)->update([
                  'event_name' => $request->event_name,
                  'event_start' => $request->event_start,
                  'event_end' => $request->event_end,
              ]);
 
              return response()->json($event);
             break;
  
           case 'delete':
              $event = CrudEvents::find($request->id)->delete();
  
              return response()->json($event);
             break;
             
           default:
             # ...
             break;
        }
    }
}

Step 5 - Create and Add Routes

Now that the controller has been set up, we can continue on to the routes/web.php file, where we will establish the routes using the CalenderController.

<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\CalenderController;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
*/
Route::get('calendar-event', [CalenderController::class, 'index']);
Route::post('calendar-crud-ajax', [CalenderController::class, 'calendarEvents']);

Step 6 - Create Blade View

Finally, in the laravel blade view code, we must display the entire calendar and make a jQuery AJAX request to create, read, update, and delete events. We use our entire calendar APIs, which we developed in the previous phase, to accomplish this.

Replace the entire code in the file resources/views/welcome.blade.php with the following:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Create Fullcalender CRUD Events in Laravel</title>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" />
</head>
<body>
    <div class="container mt-5" style="max-width: 700px">
        <h2 class="h2 text-center mb-5 border-bottom pb-3">Laravel FullCalender CRUD Events Example</h2>
        <div id='full_calendar_events'></div>
    </div>
    {{-- Scripts --}}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.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://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
    <script>
        $(document).ready(function () {
            var SITEURL = "{{ url('/') }}";
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            var calendar = $('#full_calendar_events').fullCalendar({
                editable: true,
                editable: true,
                events: SITEURL + "/calendar-event",
                displayEventTime: true,
                eventRender: function (event, element, view) {
                    if (event.allDay === 'true') {
                        event.allDay = true;
                    } else {
                        event.allDay = false;
                    }
                },
                selectable: true,
                selectHelper: true,
                select: function (event_start, event_end, allDay) {
                    var event_name = prompt('Event Name:');
                    if (event_name) {
                        var event_start = $.fullCalendar.formatDate(event_start, "Y-MM-DD HH:mm:ss");
                        var event_end = $.fullCalendar.formatDate(event_end, "Y-MM-DD HH:mm:ss");
                        $.ajax({
                            url: SITEURL + "/calendar-crud-ajax",
                            data: {
                                event_name: event_name,
                                event_start: event_start,
                                event_end: event_end,
                                type: 'create'
                            },
                            type: "POST",
                            success: function (data) {
                                displayMessage("Event created.");
                                calendar.fullCalendar('renderEvent', {
                                    id: data.id,
                                    title: event_name,
                                    start: event_start,
                                    end: event_end,
                                    allDay: allDay
                                }, true);
                                calendar.fullCalendar('unselect');
                            }
                        });
                    }
                },
                eventDrop: function (event, delta) {
                    var event_start = $.fullCalendar.formatDate(event.start, "Y-MM-DD");
                    var event_end = $.fullCalendar.formatDate(event.end, "Y-MM-DD");
                    $.ajax({
                        url: SITEURL + '/calendar-crud-ajax',
                        data: {
                            title: event.event_name,
                            start: event_start,
                            end: event_end,
                            id: event.id,
                            type: 'edit'
                        },
                        type: "POST",
                        success: function (response) {
                            displayMessage("Event updated");
                        }
                    });
                },
                eventClick: function (event) {
                    var eventDelete = confirm("Are you sure?");
                    if (eventDelete) {
                        $.ajax({
                            type: "POST",
                            url: SITEURL + '/calendar-crud-ajax',
                            data: {
                                id: event.id,
                                type: 'delete'
                            },
                            success: function (response) {
                                calendar.fullCalendar('removeEvents', event.id);
                                displayMessage("Event removed");
                            }
                        });
                    }
                }
            });
        });
        function displayMessage(message) {
            toastr.success(message, 'Event');            
        }
    </script>
</body>
</html>

Step 7 - Run Development Server

To start the laravel development server, go to the terminal, open a terminal window, and type the php artisan command with the serve tag.

php artisan serve

To try the fullcalendar crud events app, open any browser and type the specified url into the address bar.

http://127.0.0.1:8000/calendar-event

Conclusion

The laravel fullcalendar crud event tutorial is now complete; this example demonstrated how to use the FullCalendar plugin to create an event crud app.

We used the MySQL database to store and manage our events by creating a simple table in the database containing the event name, start date, and finish date.

We hope you enjoyed this tutorial and will tell others about it.

I hope you will like the content and it will help you to learn Laravel 9 FullCalendar Ajax Tutorial with Example
If you like this content, do share.


Recommended Posts

View All

Laravel 8 Clear Cache of Route, View, Config Command Example


laravel 8 clear cache, laravel 8 clear cache config, laravel 8 cache clear view, laravel 8 cache clear config, laravel 8 cache clear command

Laravel One to One Eloquent Relationship Tutorial


Laravel One To One Eloquent Relationships Tutorial Example, Laravel Eloquent ORM is the best possible database solution, ORM Mapping is very easy, lar...

Laravel Many to Many Eloquent Relationship


laravel belongs to many tutorials, many to many sync, many to many attach, save many to many relationship, create many to many relationship Laravel

Unlocking the Power of Data Visualizing Laravel App Data with Chartello


Discover the potential of data visualization with Chartello, a Laravel app that helps you unlock insights from your data. Try it now and see the resul...

Laravel 9 Highcharts Example Tutorial


In this tutorial, I'll give you an example of how to use highchart js to construct a highchart in a laravel 9 application.