Получить новый параметр события fullcalendar из базы данных

Question

Как я могу отобразить несколько столбцов из базы данных? По умолчанию есть столбцы идентификаторов, заголовок, начало и конец, и я хотел бы добавить еще несколько столбцов, как мне это сделать?

Я читал о функции extraParam, я пытался реализовать ее, но я Я не уверен, если это необходимо для моей проблемы

Js код

document.addEventListener('DOMContentLoaded', function() {
    moment.locale('ro');
    var calendarEl = document.getElementById('calendar');

    var calendar = new FullCalendar.Calendar(calendarEl, {
        plugins: ['dayGrid', 'timeGrid', 'list', 'interaction'],
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
        },
        defaultView: 'timeGridWeek',
        editable: true,
        allDay: true,
        locale: 'ro',
        selectable: true,
        resizable: true,
        selectHelper: true,
        minTime: "07:00:00",
        maxTime: "22:00:00",
        validRange: {
            start: <?php echo "'".date('Y-m-d')."'"; ?>
        },
        defaultDate: <?php echo "'".date('Y-m-d')."'"; ?> ,
        slotDuration : '00:15:00',
        navLinks: true, // can click day/week names to navigate views
        eventLimit: true, // allow "more" link when too many events
        events: {
            url: "calendar-afisare",
            failure: function(error) {
                console.log(error);
                alert("Error", "Unable to fetch events", "red");
            }
        },

        //Actiune pentru afisarea event-urilor
        eventClick: function(info) {
            alert(info.event.descriere);
            var inceput = moment(info.event.start).format('dddd, Do MMMM YYYY, h:mm');
            var sfarsit = moment(info.event.end).format('h:mm');
            var interval = inceput + ' - ' + sfarsit;
            $('#modalTitle').html(info.event.title);
            $('#modalWhen').text(interval);
            $('#descriere').html(info.event.descriere);
            $('#eventUrl').attr('href', info.event.url);
            $('#info-event').modal();
        },
        //Actiune pt a adauga un event
        select: function(info) {
            var inceput = moment(info.startStr).format('dddd, Do MMMM YYYY, h:mm');
            var sfarsit = moment(info.endStr).format('dddd, Do MMMM YYYY, h:mm');
            var interval2 = inceput + ' - ' + sfarsit;

            $('#adauga-event #startTime').val(info.startStr);
            $('#adauga-event #endTime').val(info.endStr);
            $('#adauga-event #when').text(interval2);
            $('#adauga-event').modal('toggle');
        },

        //Actiunea pentru dragging
        eventDrop: function(info) {
            $.ajax({
                url: 'calendar-actiune',
                data: 'actiune=actualizare&title=' + info.event.title + '&start=' + info.event.start.toISOString() + '&end=' + info.event.end.toISOString() + '&id=' + info.event.id,
                type: "POST",
                error: function(xhr, status, error) {
                    alert(status);
                    alert(xhr.responseText);
                },
                success: function(json) {
                    // alert(json);
                }
            });
            // alert(info.event.title + " was dropped on " + info.event.start.toISOString());
        }

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

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

    function doDelete() {
        $("#calendarModal").modal('hide');
        var eventID = $('#eventID').val();
        $.ajax({
            url: 'index.php',
            data: 'action=delete&id=' + eventID,
            type: "POST",
            success: function(json) {
                if (json == 1)
                    $("#calendar").fullCalendar('removeEvents', eventID);
                else
                    return false;
            }
        });
    }

    function doSubmit() {
        $("#creare-event").modal('hide');
        var title = $('#titlu-adaugare').val();
        var startTime = $('#startTime').val();
        var endTime = $('#endTime').val();

        $.ajax({
            url: 'calendar-actiune',
            data: 'actiune=adaugare&title=' + title + '&start=' + startTime + '&end=' + endTime,
            type: "POST",
            error: function(xhr, status, error) {
                alert(status);
                alert(xhr.responseText);
            },
            success: function(json) {
                //Reimprospatam calendarul
                calendar.refetchEvents();
            }
        });
        calendar.render();
    }

    calendar.render();
});

php получить данные

<?php
$data = array();

$query = "SELECT * FROM `filme` ORDER BY `id`";

$result = mysqli_query($con, $query);

foreach($result as $row)
{
 $data[] = array(
  'id'   => $row["id"],
  'title'   => $row["titlu"],
  /*
  The new data that I would like to display
  'regia'   => $row["regia"],
  'gen'   => $row["gen"],
  'premiera'   => $row["premiera"],
  'descriere'   => $row["descriere"],
  */
  'start'   => $row["inceput"],
  'end'   => $row["sfarsit"]
 );
}

echo json_encode($data);

?>

Answer 1

Я использовал extendedProps, чтобы добавить новый параметр

eventClick: function(info) {
     var inceput = moment(info.event.start).format('dddd, Do MMMM YYYY, h:mm');
     sfarsit = moment(info.event.end).format('h:mm');
     interval = inceput + ' - ' + sfarsit;
     $('#modalTitle').html(info.event.title);
     $('#regia').html(info.event.extendedProps.regia);
     $('#gen').html(info.event.extendedProps.gen);
     $('#descriere').html(info.event.extendedProps.descriere);
     $('#modalWhen').text(interval);
     $('#eventUrl').attr('href', info.event.url);
     $('#info-event').modal();
}