从可排序列表拖动到fullcalendar

时间:2013-02-16 22:35:42

标签: jquery jquery-ui fullcalendar jquery-ui-sortable

我尝试将项目从可排序的事件列表拖到fullcalendar。

我没有在Adam Shaw的完整日历的文档中看到这一点,但也许某人已经做过一次。

这是jsfiddle:http://jsfiddle.net/gtbm/VjNFn/2/

这里的代码是:

/* initialize the external events
    -----------------------------------------------------------------*/
$('ol#external-events').sortable({
    opacity: .6,
    placeholder: 'placeholder',
    revert: "invalid",//  250, //          
    helper:   'clone'
});
$('#external-events li.external-event').each(function() {

    // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
    // it doesn't need to have a start or end
    var eventObject = {
        title: $.trim($(this).text()) // use the element's text as the event title
    };

    // store the Event Object in the DOM element so we can get to it later
    $(this).data('eventObject', eventObject);

});


    /* initialize the calendar
    -----------------------------------------------------------------*/

$('#calendar').fullCalendar({
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    editable: true,
    droppable: true, // this allows things to be dropped onto the calendar !!!
    drop: function(date, allDay) { // this function is called when something is dropped
        alert('I got it');

        // retrieve the dropped element's stored Event Object
        var originalEventObject = $(this).data('eventObject');

        // we need to copy it, so that multiple events don't have a reference to the same object
        var copiedEventObject = $.extend({}, originalEventObject);

        // assign it the date that was reported
        copiedEventObject.start = date;
        copiedEventObject.allDay = allDay;

        // render the event on the calendar
        // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
        $('#calendar').fullCalendar('renderEvent', copiedEventObject, true);                
    }
});

我希望你能提供帮助, 提前谢谢,C

6 个答案:

答案 0 :(得分:2)

所以我设法在月视图中为dragabble和sortable列表找到解决方案。

你可以在这里找到jsfiddle:http://jsfiddle.net/VjNFn/16/ 代码:

    function getDateFromCell(td, calInstance){
        var cellPos = {
            row: td.parents('tbody').children().index(td.parent()),
            col: td.parent().children().index(td)
        };

        return calInstance.fullCalendar('getView').cellDate(cellPos);
        }

    /* initialize the external events
    -----------------------------------------------------------------*/
    $('#external-events div.external-event').each(function() {

        // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
        // it doesn't need to have a start or end
        var eventObject = {
            title: $.trim($(this).text()) // use the element's text as the event title
        };

        // store the Event Object in the DOM element so we can get to it later
        $(this).data('eventObject', eventObject);

        // make the event draggable using jQuery UI
        $(this).draggable({
            zIndex: 999,
            revert: true,      // will cause the event to go back to its
            revertDuration: 0  //  original position after the drag
        });

    });     
    $('ol#sortable-events').sortable({
        helper: 'clone',        
        placeholder: 'placeholder',
        start: function(ev, ui) {
            // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
            var eventObject = {
                id:                 $.trim($(ui.item).attr('id')),  // use the element's id as the event id
                title:              $.trim($(ui.item).text()),      // use the element's text as the event title
                start:              new Date("2013-02-18T18:00:00"),//"2013-02-18T18:00:00", //day,
                end:                new Date("2013-02-18T18:00:00"),//"2013-02-18T18:00:00",//day,
                backgroundColor:    $(ui.item).css('background-color'),
                borderColor:        $(ui.item).css('background-color'),
                textColor:          $(ui.item).css('color'),
                allDay: true 
                };

            // store the Event Object in the DOM element so we can get to it later
            $(ui.item).data('eventObject', eventObject);
            $(ui.item).data('dropped', false);

            return  true;      
            },
        stop: function(ev, ui) {
            // Restore place of Event Object if dropped
            if ( $(ui.draggable).data('dropped') == true ) {
                $('ol#sortable-events').nestedSortable('cancel'); 
                $(ui.draggable).data('dropped') = false ;
                }
            }
        }).disableSelection();


    /* initialize the calendar
    -----------------------------------------------------------------*/
    $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
            },
        defaultView: 'agendaWeek',
        editable: true,
        droppable: true, // this allows things to be dropped onto the calendar !!!
        dropAccept: '#external-events div.external-event',
        drop: function(date, allDay) { // this function is called when something is dropped

            // retrieve the dropped element's stored Event Object
            var originalEventObject = $(this).data('eventObject');

            // we need to copy it, so that multiple events don't have a reference to the same object
            var copiedEventObject = $.extend({}, originalEventObject);

            // assign it the date that was reported
            copiedEventObject.start = date;
            copiedEventObject.allDay = allDay;

            // render the event on the calendar
            // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
            $('#calendar').fullCalendar('renderEvent', copiedEventObject, 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();
            }
        }
    }).find('td').each(function() {
        $(this).droppable({
            // greedy: false,
            accept: "ol#sortable-events li.sortable-event",
            // activeClass: "active",
            // tolerance: 'pointer',
            hoverClass: "fc-cell-overlay",
            drop: function( event, ui ) {
                // alert('coucou');
                if ( $(ui.draggable).data('dropped') == false ) {
                    // Get the event and init with the date
                    var eventObject = $(ui.draggable).data('eventObject');
                    var ddrop       = getDateFromCell( $(this), $('#calendar') );
                    eventObject.start = ddrop ;
                    eventObject.end = ddrop ;

                    // Delete the event if already dropped
                    $('#calendar').fullCalendar( "removeEvents", eventObject.id );

                    // render the event on the calendar
                    // the last `true` argument determines if the event "sticks" 
                    $('#calendar').fullCalendar('renderEvent', eventObject, true);

                    // Dropped flag is true state now
                    $(ui.draggable).data('dropped') == true
                    }

                return true;                      
                }
            })
        });;

我不认为,这是一个很好的解决方案,因为它不适用于一周一天????

请任何想法!

答案 1 :(得分:1)

将这段代码添加到您的每个方法中:

$(this).draggable({
    zIndex: 999,
    revert: true,      // will cause the event to go back to its
    revertDuration: 0  //  original position after the drag
});

您可以在更新的jsfiddle http://jsfiddle.net/EKTWJ/

中查看此内容

文档提到列表here中的一些拖累。

有一个完整的工作示例here,因此您可以查看页面来源。

答案 2 :(得分:1)

@Brousse Ouilisse,你是如此接近正确答案:( 在您的评论https://stackoverflow.com/a/15251724/1198292中,您应该更改

$(document)
// To add in calendar function ***********************************
  .bind("sortstart", function(ev, ui) { 
      //_dragElement = ev.target;  <---------- REMOVE THIS
      _dragElement = ui.helper;  <---------- ADD THIS
      currentView.dragStart(_dragElement, ev, ui);    
  })
  .bind("sortstop", function(ev, ui) {
      if (_dragElement) {
          currentView.dragStop(_dragElement, ev, ui);
          _dragElement = null;
      }                       
  })

答案 3 :(得分:0)

我试图展示解决方案,但我没有设法让它工作...... http://jsfiddle.net/gtbm/VjNFn/20/

你在这个jsfiddle中找不到的是在fullcalendar.js中添加 代码在这里:

/* External Dragging
------------------------------------------------------------------------*/
if (options.droppable) {
$(document)
// To add in calendar function ***********************************
    .bind("sortstart", function(ev, ui) { 
        _dragElement = ev.target;
        currentView.dragStart(_dragElement, ev, ui);    
    })
    .bind("sortstop", function(ev, ui) {
        if (_dragElement) {
            currentView.dragStop(_dragElement, ev, ui);
            _dragElement = null;
        }                       
    })      
    // **********************************************       
    ...

我希望它有所帮助,C

答案 4 :(得分:0)

设置可排序元素的.addSubview(button)属性似乎对我有用。它在fullcalendar eventReceive doc

中有所描述
data-event

也可以使用jquery设置data属性。

<ul id="sortable-list">
  <li data-event='{"title":"my event"}'>Task</li>
</ul>

答案 5 :(得分:0)

这是一个解决方案。

create: function(event, ui) {
    $(this).children().each( (index, item) => {
        $(item).data('event', { // DATA TO PASS TO CALENDAR
            title: this.data.title,
            type: this.data.type, 
            cells: this.data.cells,
            event_id: this.data.id
        });
    });
},