jquery - FullCalendar 上的默认值（拖放事件）

问题描述

（对不起，我的英语，我来自阿根廷）我正在为从侧面板（选择客户）拖到整个日历的班次（项目）制作日历。一旦事件在中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，然后单击它（已经在日历上），模式会打开，但它没有结束日期或时间，但它确实有客户端、开始时间和描述。

如果我将事件或开始时间拖放到事件中，问题仍然存在。

如果我修改了事件的持续时间，现在它配置得很好并且模式正确显示了数据。

我想第一次拖动事件以正确加载结束日期和时间。

标签： jqueryfullcalendar

jquery - FullCalendar 上的默认值（拖放事件）

问题描述

解决方案

推荐阅读