drag-and-drop - como - hacer drag and drop javascript

Arrastre un evento en el componente de calendario completo con una duración específica

Question

He visto la solución para arrastrar y soltar eventos externos en fullcalendar . Pero, en esta demostración, todos los eventos externos tienen una duración de 2 horas (porque el parámetro defaultEventMinutes se establece en 120). Estoy intentando cambiar esta demostración para administrar eventos con diferentes duraciones. Diga: "Mi evento 1" dura 45 minutos, "Mi evento 2" tiene 165 minutos, etc.

Al principio pensé que podría haber un atributo para almacenar la duración en eventObject, pero de acuerdo con la documentación, no es el caso. Entonces, pensé que sería posible cambiar el valor de ''defaultEventMinutes'' cuando comience a arrastrar el evento. Pero aparentemente, no puedo hacerlo sin reconstruir todo el calendario.

Según usted, ¿cuál es el mejor medio para cumplir este requisito? Gracias de antemano por su consejo ...

Answer 1

Actualmente, la mejor solución que he encontrado es agregar un atributo de duración en mi evento Object, luego el código para crear mi fullCalendar se ve así:

    $(''#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

            // 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;
            // HERE I force the end date based on the start date + duration
            copiedEventObject.end = new Date(date.getTime() + copiedEventObject.duration * 60 * 1000);
            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();
            }

        }
    });

El único inconveniente es cuando estás arrastrando el evento, la duración del evento se ve como defaultEventMinutes y no la duración real, pero no sé cómo solucionarlo

Answer 2

También trabajé en esto y he resuelto la duración que se muestra en fullCalendar de esta manera:

1. Tener una función personalizada "setOptions" para fullCalendar.
2. Tener una propiedad para fullCalendar llamada "dragMinutes" que se puede establecer durante los elementos $ (this) .draggable ({start: ...}).

Aquí está el código para las setOptions personalizadas:

 ...
    function Calendar(element, options, eventSources) {
        var t = this;

        // hack for setting options that updates
        function setOptions(new_options, refresh) {
            $.extend(options, new_options);
            if (refresh) {
                var viewName = currentView.name;
                changeView(viewName, true);
            }
        }
    // exports ... 
    t.setOptions = setOptions;
    ...

Aquí está el código para manejar la opción "dragMinutes" en fullCalendar:

/* External Dragging
--------------------------------------------------------------------------------*/


function dragStart(_dragElement, ev, ui) {
    hoverListener.start(function (cell) {
        clearOverlays();
        if (cell) {
            if (cellIsAllDay(cell)) {
                renderCellOverlay(cell.row, cell.col, cell.row, cell.col);
            } else {
                var d1 = cellDate(cell);
                if (opt(''dragMinutes''))
                    var d2 = addMinutes(cloneDate(d1), opt(''dragMinutes''));
                else
                    var d2 = addMinutes(cloneDate(d1), opt(''defaultEventMinutes''));
                renderSlotOverlay(d1, d2);
            }
        }
    }, ev);
}

Y heres cómo hago que el evento sea arrastrable y actualizo el "dragMinutes":

    // make the event draggable using jQuery UI
    $(this).draggable({
        containment: ''document'',
        // return a custom styled elemnt being dragged
        helper: function (event) {
            return $(''<div class="uv-planning-dragging"></div>'').html($(this).html());
        },
        opacity: 0.70,
        zIndex: 10000,
        appendTo: ''body'',
        cursor: ''move'',
        revertDuration: 0,
        revert: true, 
        start: function (e, ui) {
            // set the "dragMinutes" option in fullCalendar so shown interval about to be added is correct.
            var data = $(this).data(''eventObject'');
            if (data) {
                var min = data.jsonProps.durationMsec / 1000 / 60;
                if (macroCalendar.calendar) {
                    macroCalendar.calendar.fullCalendar(''setOptions'', { dragMinutes: Math.round(min) }, false);
                }
            }
        },
        stop: function (e, ui) {
            // further process

        }
    });

Espero eso ayude.

Answer 3

Con el último fullcalendar v2.0.2 , si desea que la superposición tenga una duración específica, puede actualizar esta función de fullcalendar-arshaw.js

function dragStart(_dragElement, ev, ui) {
    hoverListener.start(function(cell) {
        clearOverlays();
        if (cell) {
            var seconds = duration_in_minutes * 1000 * 60 ;
           // we need to pass seconds into milli-seconds
            if (d1.hasTime()) {                 
                d2.add(seconds);
                renderSlotOverlay(d1, d2, cell.col);
            }
            else {
                d2.add(calendar.defaultAllDayEventDuration);
                renderDayOverlay(d1, d2, true, cell.col);
            }
        }
    }, ev);
}

Aquí, pase su duración en el objeto de eventos externo y ese objeto que puede obtener en _dragElement y luego _dragElement en _dragElement y páselo en d2.add(seconds) . Esto creará la sombra de esos milisegundos en ese calendario.

Answer 4

Para eventos no externos, puede usar la configuración de calendario completo:

defaultTimedEventDuration: (hours+'':00:00''),
forceEventDuration: true,
// defaultEventMinutes: hours*60, // not needed

y en el caso de que los datos no establezcan la propiedad final (o la anules):

eventData = {
    title: title,
    start: start,
    // end: end, // MUST HAVE no end for fixedduration
    color: ''#00AA00'',
    editable: true, // for dragging
};

Ref: http://fullcalendar.io/docs/event_data/defaultTimedEventDuration/

Consejo: En caso de que quiera evitar el cambio de tamaño de los eventos, que es posible debido a que se puede editable: true , puede usar CSS para ocultar el manejador: .fc-resizer.fc-end-resizer { display:none; } .fc-resizer.fc-end-resizer { display:none; }

Answer 5

Si alguien aún visita el hilo y no encuentra la solución, la solución sería establecer el parámetro de duración en el evento div ... y luego llamar al ejecutable en ese div.

$(this).data(''event'', {
    title: ''new event title'', // use the element''s text as the event title
    id: $(this).attr(''id''),
    stick: true, // maintain when user navigates (see docs on the renderEvent method)
    duration: ''03:00:00'' // will set the duration during drag of event
});

Answer 6

Estas propiedades especiales pueden especificarse en el objeto de evento proporcionado o pueden ser atributos de datos independientes:

<!-- DURATION OF 3 hours EVENT WILL PROPAGATE TO CALENDAR WHEN DROPPED -->
<div class=''draggable'' data-event=''1'' data-duration=''03:00'' />

https://fullcalendar.io/docs/dropping/eventReceive/