Fullcalendar 4: обновить информационное событие из модального Bootstrap

Question

Я пытаюсь обновить информацию о дате события из модального Bootstrap в полной версии календаря 4. Мой тест:

1. Чтение события json
2. Нажмите на календарь событий, открыть модал, показать информационное событие и установить значение поля с информацией для обновления
3. Когда я нажимаю зеленую кнопку «Salva» (Сохранить), вызывается функция doSubmitEdit . Он должен:
   • закрыть модально;
   • получить отредактированное текстовое поле;
   • обновить с помощью ajax my db;
   • обновить событие календаря при необходимости

Но при нажатии этой кнопки у меня появляется эта ошибка:

q TypeError: calendar.fullCalendar не является функцией в этой строке: var event_obj_arr = calendar.fullCalendar ('clientEvents', calendario_id);

(function ($) {

    'use strict';
    var calendarEl = document.getElementById('calendar');

    var calendar = new FullCalendar.Calendar(calendarEl, {
        locale: 'it',
        plugins: ['dayGrid', 'timeGrid', 'list', 'interaction', 'bootstrap'],
        themeSystem: 'bootstrap',
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
        },
        navLinks: true, // can click day/week names to navigate views
        selectable: true,
        selectMirror: true,
        editable: true,
        eventLimit: true, // allow "more" link when too many events
        events: {
            url: '/_admin/vendor/fullcalendar/php/get-events.php',
            failure: function () {
                document.getElementById('script-warning').style.display = 'block';
            }
        },
        eventClick: function (info) {
            $('.card-body h4').html(info.event.start.toDateString());
            $('.card-body p').html(info.event.title + '<br>' + info.event.extendedProps.autista + ' / Info: ' + info.event.extendedProps.autista_description);
            $('#calendario_id').val(info.event.id);
            $('#btnModal').trigger('click');
        },
        loading: function (bool) {
            document.getElementById('loading').style.display =
                bool ? 'block' : 'none';
        }//,
    });

    calendar.render();

    $('#submitButtonEdit').on('click', function (e) {
        // We don't want this to act as a link so cancel the link action
        e.preventDefault();
        doSubmitEdit();
    });

    function doSubmitEdit() {

        // get event object
        var event_obj_arr = calendar.fullCalendar('clientEvents', calendario_id);
        var event_obj = event_obj_arr[0];

        // edit
        $("#createEventModalEdit").modal('hide');
        console.log($('#autista_description').val());
        console.log($('#calendario_id').val());

        // update event object properties
        event_obj.extendedProps.autista_description = $('#autista_description').val();

        // post to server
        $.ajax({
            url: '/_admin/vendor/fullcalendar/php/planning-aggiorna.asp',
            data: 'type=changetitle&title=' + title + '&calendario_id=' + calendario_id,
            type: 'POST',
            dataType: 'json',
            success: function (response) {
                if (response.status == 'success') {
                    // nothing to do here

                    // update calendar, you may put this line into success method
                    calendar.fullCalendar('updateEvent', event_obj);
                }
            },
            error: function (e) {
                alert('Error processing your request: ' + e.responseText);
            }
        });
    }
}).apply(this, [jQuery]);

Можно ли получить доступ к классу fullcalendar вне его? Спасибо.

Answer 1

Вот решение, спасибо @Adison. У нас есть элементы, извлеченные из модальной формы, обновление живого календаря (где я добавил «измененный» текст к заголовку события) и обновление базы данных.

    function doSubmitEdit() {
        // get values from modal form
        var calendario_id = $('#calendario_id').val();
        var calendario_descrizione = $('#calendario_descrizione').val();

        // get event object by id
        var event = calendar.getEventById(calendario_id);
        var title = event.title;

        // post to server and update db
        $.ajax({
            url: '/_admin/planning-aggiorna.asp',
            data: 'calendario_descrizione=' + encodeURIComponent(calendario_descrizione) + '&calendario_id=' + calendario_id,
            type: 'POST',
            dataType: 'text',
            success: function (response) {
                if (response == 'success') {
                    // update calendar
                    event.setProp('title', title + ' changed');
                    event.setExtendedProp('autista_description', calendario_descrizione);
                }
            },
            error: function (e) {
                alert('Error processing your request: ' + e.responseText);
            }
        });
    }

Answer 2

Есть много способов сделать календарь доступным снаружи. Простейшим способом является изменение строки 4-й,

var calendar = new FullCalendar.Calendar(calendarEl, {

на

$.calendar = new FullCalendar.Calendar(calendarEl, {

Это означает, что переменная календаря должна иметь свойство JQuery.

, надеюсь, это поможет.