如何使完整日历的活动掉落到该日期的那个时段 [英] How to make event of full calendar on drop go to that slot of that date

问题描述

你能帮我吗，如果事件具有标题:event1和start_at:10/10/2018，当我将事件拖放到日历上时，事件是否会自动降到该日期，尽管我只是将其放在ele某处，但是否有可能将其以日期10/10/2018拉到该插槽. 这是一个全日历拖放的示例

Hi there Can you help me please, is it possible on drop of event if event has title :event1 and start_at:10/10/2018 when I drop this event to the calendar the event to be dropped automaticly to that slot of date even though I just drop it somewhere ele is it possible somehow to be pulled to that slot with date 10/10/2018..? Here is an example of fullcalendar drag drop

https://codepen.io/subodhghulaxe/pen/qEXLLr?editors=0010

推荐答案

实际上，可以通过在注释中提到的@ADyson中添加自己的逻辑来实现.

Actually, this is possible by adding your own logic as @ADyson mentioned above in comments.

HTML

好吧，我已经将id和date作为属性添加到了外部事件中，如下所示:

Well, I have added id and date as an attribute to external events something like this:

<div class='fc-event' id='1' date='2018-10-13'>My Event 1</div>
<div class='fc-event' id='2' date='2018-10-09'>My Event 2</div>
<div class='fc-event' id='3' date='2018-10-14'>My Event 3</div>
<div class='fc-event' id='4' date='2018-10-04'>My Event 4</div>
<div class='fc-event' id='5' date='2018-10-27'>My Event 5</div>

jQuery

然后，每个外部事件id: $(this).attr('id')

$(this).data('event', {
    id: $(this).attr('id'),
    title: $.trim($(this).text()), // use the element's text as the event title
    stick: true // maintain when user navigates (see docs on the renderEvent method)
});

，最后，我将根据特定日期创建一个新事件，并使用$(this).attr('id')删除该事件之前的事件，如下所示:

and, at last I am creating a new event on the basis of particular date and removing the event before it by using $(this).attr('id') as you can see below:

drop: function(date) {              
    var newEvent = {
        title:$(this).text(),
        start: $(this).attr('date'),
        end: $(this).attr('date'),
        allDay: false
    };

    $('#calendar').fullCalendar('removeEvents', $(this).attr('id'));              
    $('#calendar').fullCalendar('renderEvent', newEvent, true);

    // is the "remove after drop" checkbox checked?
    if ($('#drop-remove').is(':checked')) {
        // if so, remove the element from the "Draggable Events" list
        $(this).remove();
    }
}

这只是一个主意，因此现在您可以根据需要进行更改.您还可以对内部日历事件使用相同的逻辑！

This is just an idea, so now you can change it as per your need. You can also use same logic on internal calendar events!

使用外部div/button

Return external events back to the list by using external div/button

这可能不是将外部事件从日历还原回列表的最佳方法，但是我在这里要做的是单击外部div #back-to-list，从FullCalendar内存中检索所有事件并创建一个div命名为 eventDiv ，然后将其附加到$('#external-events-listing')中，并且还将draggable添加到事件中.然后，从日历中删除所有事件.

Probably, this is not the best approach to revert external events back to the list from the calendar, but what I'm doing here is on clicking the external div #back-to-list, retrieving all events from FullCalendar memory and creating a div named eventDiv then appending it into $('#external-events-listing') and also adding draggable to events. Then, removing all events from the calendar.

$('#back-to-list').click(function() {
    $('#calendar').fullCalendar('clientEvents', function(event) {        
        var eventDiv = document.createElement('div');
        eventDiv.setAttribute("class", "fc-event");
        eventDiv.setAttribute("id", event.id);
        eventDiv.setAttribute("date", event.start.format('YYYY-MM-DD'));
        eventDiv.innerText = event.title;

        $('#external-events-listing').append(eventDiv);

        $(eventDiv).draggable({
            zIndex: 999,
            revert: true,
            revertDuration: 0
        });
    });

    $('#calendar').fullCalendar('removeEvents');
});

如果外部事件具有editable: false，则无法在日历中进行拖动.

If external event has editable: false then dragging is not possible with in the calendar.

撤消上一个事件到列表

全局设置tempArray，同时在将添加事件拖入tempArray的过程中添加新事件时，在#undo-last-item上单击从tempArray检索事件详细信息，并将最后一项附加到可拖动事件列表中.

Set tempArray globally, while adding a new event on drag in add event into tempArray, on #undo-last-item click retrieve event details from tempArray and append last item to the draggable events list.

$('#undo-last-item').click(function() {
    if (Object.entries(tempArray).length > 0) {
        var eventDiv = document.createElement('div');
        eventDiv.setAttribute("class", "fc-event");
        eventDiv.setAttribute("id", tempArray.id);
        eventDiv.setAttribute("date", tempArray.start);
        eventDiv.innerText = tempArray.title;

        $('#external-events-listing').append(eventDiv);

        $(eventDiv).draggable({
            zIndex: 999,
            revert: true,
            revertDuration: 0
        });

        $('#calendar').fullCalendar('removeEvents', tempArray.id);

        tempArray = [];
    }
});

完整代码:将外部事件拖到日历的特定日期

这篇关于如何使完整日历的活动掉落到该日期的那个时段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！