Значения по умолчанию в FullCalendar (события перетаскивания)

Question

(извините, мой английский sh, я из Аргентины) Я делаю календарь для смен (элементов), которые перетаскиваются из боковой панели (клиент выбран) во весь календарь. Когда событие находится в fullCalendar, вы можете выполнить с ним три действия:

• Переместить (изменить час / дату): вы можете перетащить его на другую дату или в другое время
• Изменить длительность: если вы выберете нижнюю часть события, вы сможете увеличить или уменьшить ее, чтобы дать вам другое время окончания
• Просмотр данных: Нажав, я настроил модал, который показывает данные

Элемент сдвига создается с помощью следующей функции

$('#add-new-event').click(function(e) {
    e.preventDefault()
        //Get value and make sure it is not null
    var val = $('#new-event').val()
    if (val.length == 0) {
        return
    }

    var desc = $('#new-desc-event').val()
    console.log(desc);
    //Create events
    var event = $('<div />')

    event.css({
        'font-weight': 300,
        'background-color': currColor,
        'border-color': currColor,
        'color': '#fff'
    }).addClass('external-event')
    if (desc == "") {

        event.html(val)
    } else {

        event.html(val + ' - ' + desc)
    }

После создания элемента (который содержит имя клиента и описание), я могу выбрать его и перетащить в календарь. , которая имеет следующую конфигурацию

new FullCalendarInteraction.Draggable(containerEl, {
    itemSelector: '.external-event',
    eventData: function(eventEl) {

        return {
            title: eventEl.innerText,
            backgroundColor: window.getComputedStyle(eventEl, null).getPropertyValue('background-color'),
            borderColor: window.getComputedStyle(eventEl, null).getPropertyValue('background-color'),
            textColor: window.getComputedStyle(eventEl, null).getPropertyValue('color'),
        };
    }
});

view = 'timeGridDay';
header = {
    left: 'prev,next timeGridDay,timeGridWeek,dayGridMonth',
    center: '',
    right: ''
};


var calendar = new FullCalendar.Calendar(calendarEl, {
    timeZone: 'local',
    plugins: ['interaction', 'dayGrid', 'timeGrid'],
    defaultView: 'timeGridDay',
    defaultDate: hoy,
    header: header,
    businessHours: [ // specify an array instead
        {
            daysOfWeek: [1, 2, 3, 4, 5, 6],
            startTime: '09:00', // 8am
            endTime: '21:00' // 6pm
        }
    ],
    minTime: "09:00",
    maxTime: "21:00",
    events: [{
        title: 'Agustin Guerra',
        start: '2020-03-12T10:30:00',
        end: '2020-03-12T11:30:00',
        description: 'hola'
    }],
    eventClick: function(calEvent, jsEvent, view) {

        e = JSON.stringify(calEvent.event.end)
        s = JSON.stringify(calEvent.event.start)

        //  Configurando StartDate
        var startObj = (calEvent.event.start);
        var local = startObj, // Local timestamp
            m = new moment(local), // Moment representing local time
            a = moment.utc(local), // Specify that 'local' is UTC
            b = m.utc(+3); // Generate UTC time from local
        start = m.format();


        //  Configurando EndDate
        var startObj = (calEvent.event.end);
        var local = startObj, // Local timestamp
            m = new moment(local), // Moment representing local time
            a = moment.utc(local), // Specify that 'local' is UTC
            b = m.utc(+3); // Generate UTC time from local
        end = m.format();

        dia = (end).substr(8, 2);
        mes = (end).substr(5, 2);
        ano = (end).substr(0, 4);
        fecha = dia + '-' + mes + '-' + ano;


        $("#title").val(calEvent.event.title);
        $("#date").val('El dia ' + fecha);
        $("#start").val('Desde las ' + (start).substr(11, 5));
        $("#end").val('Hasta las ' + (end).substr(11, 5));
        $("#description").val(calEvent.event.description);


        $("#exampleModal").modal();

    },
    editable: true,
    droppable: true, // this allows things to be dropped onto the calendar !!!
    drop: function(info) {

        info.draggedEl.parentNode.removeChild(info.draggedEl);

    }
});

Что происходит следующим образом: При нажатии на событие, которое уже перетащено в календарь, открывается модальное окно, где вы можете увидеть следующие данные: Имя клиента , Дата смены, Время начала, Время окончания и Описание. Но у меня есть ошибка в этом разделе.

Если я перетаскиваю событие с боковой панели на fullCalendar, а затем нажимаю на него (уже в календаре), модал открывается, но он не имеет даты или времени окончания, но у него есть клиент, время начала и описание.

Если я перетаскиваю событие или время начала к событию, проблема продолжается.

Если я изменил длительность события, теперь он настроен правильно, и модал правильно показывает данные.

Я хотел бы перетащить событие в первый раз, чтобы правильно загрузить дату и время окончания .

Answer 1

Проблема была решена. В решении было установлено свойство forceEventDuration как true

  forceEventDuration: true