Laravel 9/8 интеграция FullCalendar Ajax с примером

11/08/2022 23:02

В этом руководстве вы узнаете, как интегрировать FullCalendar в ваше приложение на laravel 8. А также как создавать, редактировать, обновлять и удалять события в FullCalendar в приложении laravel.

FullCalendar - это легкая, но мощная и удобная для разработчиков библиотека jаvascript для создания гибких, перетаскиваемых календарей событий в современном веб-приложении. Обратите внимание, что FullCalendar теперь работает как ванильный (ES6) jаvascript, начиная с версии 4, что устраняет jQuery и moment как зависимости.

Кроме того, в руководстве вы шаг за шагом узнаете, как интегрировать fullcalendar в laravel 8/9.

Создание динамических событий в Laravel 9, 8 с помощью Fullcalendar и jQuery AJAX

Чтобы создать динамические события в полном календаре с помощью ajax в приложениях laravel 9, 8, выполните следующие шаги:

Шаг 1 - Установка приложения Laravel

Прежде всего, откройте терминал и выполните в нем следующую команду для установки или загрузки приложения Laravel:

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

Шаг 2 - Подключение приложения к базе данных

На этом шаге откройте файл .env и настройте детали базы данных для подключения приложения к базе данных:

DB_CONNECTION=mysql 
DB_HOST=127.0.0.1 
DB_PORT=3306 
DB_DATABASE=здесь название вашей базы данных
DB_USERNAME=здесь имя пользователя базы данных
DB_PASSWORD=здесь пароль базы данных

Шаг 3 - Построение миграции и модели

На этом шаге выполните следующую команду в терминале, чтобы создать модель события и файл миграции:

php artisan make:model Event -m

Эта команда создаст одну модель с именем Event, а также создаст один файл миграции для таблицы Events.

После успешного выполнения команды перейдите в папку database/migrations и откройте файл create_events_table.php. Затем обновите следующий код в файле create_events_table.php, как показано ниже:

<?php

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

class CreateEventsTable extends Migration
{
    /**
     * Запуск миграций.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('events', function (Blueprint $table) {
            $table->increments('id');
            $table->string('title');
            $table->dateTime('start');
            $table->dateTime('end');
            $table->timestamps();
        });
    }

    /**
     * Возвращение миграций.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('events');
    }
}

Теперь выполните следующую команду в терминале, чтобы создать таблицы в базе данных:

php artisan migrate

Шаг 4 - Добавление маршрутов

В этом шаге создайте два маршрута и добавьте их в файл web.php. Итак, зайдите в каталог /routes и откройте файл web.php. Затем добавьте в него следующие маршруты:

use App\Http\Controllers\FullCalendarController;

Route::get('ckeditor', [FullCalendarController::class, 'index']);
Route::post('fullcalendar/create', [FullCalendarController::class, 'create']);
Route::post('fullcalendar/update', [FullCalendarController::class, 'update']);
Route::post('fullcalendar/delete', [FullCalendarController::class, 'destroy']);

Шаг 5 - Создание контроллера с помощью команды Artisan

На этом шаге выполните следующую команду в терминале, чтобы создать имя контроллера FullCalendarController.php:

php artisan make:controller FullCalendarController

После успешного создания контроллера перейдите в каталог app/http/controllers и откройте файл FullCalendarController.php и добавьте в него следующий код:

<?php

namespace App\Http\Controllers;

use App\Models\Event;
use Illuminate\Http\Request;
use Redirect,Response;

class FullCalenderController extends Controller
{

    public function index()
    {
        if(request()->ajax()) 
        {

         $start = (!empty($_GET["start"])) ? ($_GET["start"]) : ('');
         $end = (!empty($_GET["end"])) ? ($_GET["end"]) : ('');

         $data = Event::whereDate('start', '>=', $start)->whereDate('end',   '<=', $end)->get(['id','title','start', 'end']);
         return Response::json($data);
        }
        return view('fullcalendar');
    }


    public function create(Request $request)
    {  
        $insertArr = [ 'title' => $request->title,
                       'start' => $request->start,
                       'end' => $request->end
                    ];
        $event = Event::insert($insertArr);   
        return Response::json($event);
    }


    public function update(Request $request)
    {   
        $where = array('id' => $request->id);
        $updateArr = ['title' => $request->title,'start' => $request->start, 'end' => $request->end];
        $event  = Event::where($where)->update($updateArr);

        return Response::json($event);
    } 


    public function destroy(Request $request)
    {
        $event = Event::where('id',$request->id)->delete();

        return Response::json($event);
    }    


}

Шаг 6 - Создание представления блейда (.blade)

На этом шаге зайдите в директорию resources/views и создайте файл представления blade с именем fullcalendar.blade.php. И добавьте в него следующий код:

<!DOCTYPE html>
<html>

<head>
    <title>Laravel Fullcalender Add/Update/Delete Event</title>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@3.9.0/dist/fullcalendar.min.css" />
</head>

<body>

    <div class="container">
        <div class="response"></div>
        <div id='calendar'></div>
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/moment@2.27.0/moment.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/fullcalendar@3.9.0/dist/fullcalendar.min.js"></script>

</body>

</html>

Поместите скрипт в fullcalendar.blade.php, перед закрытым тегом </body>

<script>
    $(document).ready(function() {
        var SITEURL = "{{url('/')}}";
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        var calendar = $('#calendar').fullCalendar({
            editable: true,
            events: SITEURL + "fullcalendar",
            displayEventTime: true,
            editable: 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 title = prompt('Event Title:');
                if (title) {
                    var start = $.fullCalendar.formatDate(start, "Y-MM-DD HH:mm:ss");
                    var end = $.fullCalendar.formatDate(end, "Y-MM-DD HH:mm:ss");
                    $.ajax({
                        url: SITEURL + "fullcalendar/create",
                        dаta: 'title=' + title + '&start=' + start + '&end=' + end,
                        type: "POST",
                        success: function(data) {
                            displayMessage("Added Successfully");
                        }
                    });
                    calendar.fullCalendar('renderEvent', {
                            title: title,
                            start: start,
                            end: end,
                            allDay: allDay
                        },
                        true
                    );
                }
                calendar.fullCalendar('unselect');
            },
            eventDrop: function(event, delta) {
                var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss");
                var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD HH:mm:ss");
                $.ajax({
                    url: SITEURL + 'fullcalendar/update',
                    dаta: 'title=' + event.title + '&start=' + start + '&end=' + end + '&id=' + event.id,
                    type: "POST",
                    success: function(response) {
                        displayMessage("Updated Successfully");
                    }
                });
            },
            eventClick: function(event) {
                var deleteMsg = confirm("Do you really want to delete?");
                if (deleteMsg) {
                    $.ajax({
                        type: "POST",
                        url: SITEURL + 'fullcalendar/delete',
                        dаta: "&id=" + event.id,
                        success: function(response) {
                            if (parseInt(response) > 0) {
                                $('#calendar').fullCalendar('removeEvents', event.id);
                                displayMessage("Deleted Successfully");
                            }
                        }
                    });
                }
            }
        });
    });

    function displayMessage(message) {
        $(".response").html("<div class='success'>" + message + "</div>");
        setInterval(function() {
            $(".success").fadeOut();
        }, 1000);
    }
</script>

Шаг 7 - Запуск сервера разработки

На этом шаге выполните следующую команду в терминале, чтобы запустить сервер разработки:

 php artisan serve

 //Если вы хотите запустить проект на другом порту, используйте следующую команду 
 php artisan serve --port=8080

Шаг 8 - Тестирование приложения

Теперь откройте браузер и введите следующий url:

http://localhost:8000/fullcalendar

Вывод

Вы успешно узнали, как интегрировать FullCalendar в приложение laravel 9/8. А также как показывать, добавлять, обновлять и удалять события в FullCalendar в приложении laravel.

Laravel

1 + 1 -

MakeCodes
0
873