Дата окончания FullCalendar равна нулю, когда событие не изменяется, даже если весь день false

Кто-нибудь знает, почему дата окончания для этих событий «allday = false» равна нулю?

Пример скрипки: https://jsfiddle.net/L1g0z3jd/

Я создаю его экземпляр иначе, чем дата начала, он отлично отображается в представлении календаря, но по какой-то причине я не могу понять, когда я получаю clientEvents, даже если я не изменил его, я получил нуль в дате окончания события!

PS: Просто для "совести" должен добавить... Я использую и старую версию google chrome (v 57.0.2987.133 64-bit) и старую версию ubuntu (Linux Mint 18.1 Serena)

Это сводит меня с ума! Спасибо!

HTML-код:

<button onclick="javascript:getEvents()">Get Events</button>
<div id='calendar'></div>

Javascript-код:

$(function() {
$('#calendar').fullCalendar({
    header: false,
    allDaySlot: false,
    visibleRange: {start: moment('2000-01-02'), end: moment('2000-01-09')},
    editable: true,
    selectable: true,
    views: {
        settimana: {
            type: 'agenda',
            columnFormat: 'ddd',
            hiddenDays: []
        }
    },
    defaultView: 'settimana',
    defaultDate: $.fullCalendar.moment().startOf('week'),
    slotMinutes: 30,
    events: [
                $.fn.getAgendaWorktime(1, "08:00:00", 60),
                $.fn.getAgendaWorktime(2, "08:30:00", 120),
            ],
    select: function(startDate, endDate) {
        $('#calendar').fullCalendar('renderEvent', {
            title: 'free time',
            start: startDate.format(),
            end: endDate.format(),
            allDay: false
        });
    },
    eventClick: function(calEvent, jsEvent, view) {
        console.log(calEvent, jsEvent, view);
        if(doubleClick==calEvent._id){
            if (confirm('Delete it?')) {
                $('#calendar').fullCalendar('removeEvents',calEvent._id);
            }
            doubleClick = null;
        }else{
            doubleClick=calEvent._id;
        }
    },
});
});
function getEvents() {
    var e=0,err=false,$data = []
    $('#calendar').fullCalendar('clientEvents').forEach(periodo => {
        if (periodo.end==null || periodo.start.format().substr(0,10)!=periodo.end.format().substr(0,10)) {
            if (e==0) {
                err = true;
                e++;
                alert('Event startint at '+periodo.start.format()+' cant spread to multiple days');
            }
        } else {
            $data.push({'ini': periodo.start.format(), 'fim': periodo.end.format()});
        }
    });
    alert($data);
}

jQuery.fn.getAgendaWorktime = function ($dow, $start, $elapsed) {
    var r = {
        allDay: false,
        title: 'free time',
        start: new Date('2000-01-02 '+$start),
        end: new Date('2000-01-02 '+$start)
    };
    r.start.setDate(r.start.getDate()+$dow);
    r.end.setDate(r.end.getDate()+$dow);
    r.end.setHours(r.end.setHours()+($elapsed*60));
    return(r);
}

person RicardoPHP    schedule 28.09.2019    source источник
comment
PS: при нажатии кнопки «Получить события» во втором предупреждении должно отображаться что-то еще, кроме пустой строки! Вместо этого он должен отображать массив с двумя элементами внутри, и он не делает этого для атрибута periodo.end, который всегда равен нулю!   -  person RicardoPHP    schedule 28.09.2019
comment
Потому что ваша формула для установки даты окончания дает недопустимое значение. См. jsfiddle.net/96278dgu.   -  person ADyson    schedule 29.09.2019
comment
Да, я нашел это и объяснил это лучше в ответе ниже. Спасибо за вашу помощь @ADyson   -  person RicardoPHP    schedule 30.09.2019


Ответы (2)


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

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

  1. Проверьте, правильно ли создано время окончания (похоже, это моя настоящая ошибка, я использовал setHours вместо getHours в функции getAgendaWorktime, которая превратила окончательное значение в нулевое. Я исправил это в примере ниже, но пусть неправильно в скрипке показывать использование атрибута forceEventDuration);
  2. Установите для параметра «forceEventDuration» значение «true» (это заставляет атрибут «end» всегда быть заполненным, облегчая мне работу в моем коде, поскольку я всегда могу ожидать строку из метода «.format ()» атрибута);

по многим причинам fullcalendar.io иногда не устанавливает дату окончания события, и это доставляло мне проблемы всякий раз, когда я оценивал время окончания события (хорошо, я мог бы обойти это, но я был заинтригован тем, почему он дает мне такие результаты, когда он не думал, и ответ был ошибочным кодом). С «forceEventDuration: true» полный календарь давал мне время окончания каждый раз, когда я мог узнать, что метод ввода, который я использовал, неправильно устанавливал дату окончания, и давал мне возможность исправить это.

Ссылки связанные:

Я надеюсь, что этот ответ может быть полезен для новичков на fullcalendar.io, таких как я.

Пример исправленной части Fiddle Javascript:

$(function() {
$('#calendar').fullCalendar({
    header: false,
    allDaySlot: false,
    forceEventDuration: true,
    visibleRange: {start: moment('2000-01-02'), end: moment('2000-01-09')},
    editable: true,
    selectable: true,
    views: {
        settimana: {
            type: 'agenda',
            columnFormat: 'ddd',
            hiddenDays: []
        }
    },
    defaultView: 'settimana',
    defaultDate: $.fullCalendar.moment().startOf('week'),
    slotMinutes: 30,
    events: [
                $.fn.getAgendaWorktime(1, "08:00:00", 60),
                $.fn.getAgendaWorktime(2, "08:30:00", 120),
            ],
    select: function(startDate, endDate) {
        $('#calendar').fullCalendar('renderEvent', {
            title: 'free time',
            start: startDate.format(),
            end: endDate.format(),
            allDay: false
        });
    },
    eventClick: function(calEvent, jsEvent, view) {
        console.log(calEvent, jsEvent, view);
        if(doubleClick==calEvent._id){
            if (confirm('Delete it?')) {
                $('#calendar').fullCalendar('removeEvents',calEvent._id);
            }
            doubleClick = null;
        }else{
            doubleClick=calEvent._id;
        }
    },
});
});
function getEvents() {
    var e=0,err=false,$data = []
    $('#calendar').fullCalendar('clientEvents').forEach(periodo => {
        if (periodo.end==null || periodo.start.format().substr(0,10)!=periodo.end.format().substr(0,10)) {
            if (e==0) {
                err = true;
                e++;
                alert('Event startint at '+periodo.start.format()+' cant spread to multiple days');
            }
        } else {
            $data.push({'ini': periodo.start.format(), 'fim': periodo.end.format()});
        }
    });
    alert($data[0].fim);
}

jQuery.fn.getAgendaWorktime = function ($dow, $start, $elapsed) {
    var r = {
        allDay: false,
        title: 'free time',
        start: new Date('2000-01-02 '+$start),
        end: new Date('2000-01-02 '+$start)
    };
    r.start.setDate(r.start.getDate()+$dow);
    r.end.setDate(r.end.getDate()+$dow);
    r.end.setHours(r.end.getHours()+($elapsed*60));
    return(r);
}
person RicardoPHP    schedule 30.09.2019

По умолчанию дата окончания FullCalendar равна нулю, если событие end_date = start_date.

Я просто передаю другого дьявола с той же датой из базы данных (Django View).

   event_sub_arr['end'] = end_date
    event_sub_arr['end_same_date'] = end_date

И проверьте JavaScript

  eventClick: function(info) {
    var modal = document.getElementById('DeleteEventModal')
    getEventDeleteUrl(info.event.id)
    getEventUpdateUrl(info.event.id)
    modal.style.display = 'block'
    calendar.unselect()

    var start = info.event.start
    var end_same_date = info.event.end_same_date
    var end = info.event.end || end_same_date


    $("#event_id_name").text(info.event.title)
    $("#event_id_start").text(moment(start).format('h:mm:ss a, MMMM Do YYYY'))
    $("#event_id_end").text(moment(end).format('h:mm:ss a, MMMM Do YYYY'))
    console.log(info.event.start)
    console.log(info.event.end)
    console.log({{ event_data|safe }})

  },

ЭТО РАБОТА ДЛЯ МЕНЯ

person Dipto K Kundu    schedule 05.07.2021