Quantcast
Channel: Active questions tagged javascript - Stack Overflow
Viewing all articles
Browse latest Browse all 138163

How can I use dragula library to drag and fit external events on fullcalendar?

$
0
0

I'm trying to code a task manager where I'll have events on a external container. That's working for now, but I need that when droping an event between tho existing events on the calendar dynamicaly re-ubicate the existing ones.

I'm trying to use dragula for that, but I can't figure out how. I've tried with

dragula([document.getElementById('external-container'), document.getElementById('calendar')]);

but that is not working.

Here's my html:

<div id='external-events'>
               <p>
                    <div class='fc-event'>Formato 1</div>
                    <div class='fc-event'>Formato 2</div>
                    <div class='fc-event'>Formato 3</div>
                    <div class='fc-event'>Formato 4</div>
                    <div class='fc-event'>Formato 5</div>
                </p>    
                <p>
                    <input type='checkbox' id='drop-remove' />
                    <label for='drop-remove'>eliminar</label>
                </p>
            </div>

And the js:

<script>

document.addEventListener('DOMContentLoaded', function () {

      var containerEl = document.getElementById('external-events');
      var checkbox = document.getElementById('drop-remove');
      var calendarEl = document.getElementById('calendar');


      var Calendar = FullCalendar.Calendar;
      var Draggable = FullCalendarInteraction.Draggable;

      var drake = dragula({
            containers: [ containerEl ],

            copy: true
          }
      );

        dragula([document.getElementById('external-events'), document.getElementById('calendar')]);

      new FullCalendarInteraction.ThirdPartyDraggable(containerEl, {
        itemSelector: '.fc-event',
        mirrorSelector: '.gu-mirror', // the dragging element that dragula renders
        eventData: function(eventEl) {
          return {
            title: eventEl.innerText
          };
        }
      });

        var calendar = new FullCalendar.Calendar(calendarEl, {
            schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',

            plugins: ['interaction', 'dayGrid', 'timeGrid', 'resourceTimeGrid'],
            header: {
              left: 'prev,next today',
              center: 'title',
              right: 'dayGridMonth,resourceTimeGridSemana,resourceTimeGridDay'
            },
            timeZone: 'UTC',
            defaultView: 'resourceTimeGridDay',
            datesAboveResources: true,
            weekends: true,
            resources: [
              { id: 'a', title: 'Prensa 1' },
              { id: 'b', title: 'Prensa 2'},
              { id: 'c', title: 'Prensa 3' },
              { id: 'd', title: 'Prensa 4' }
            ],
            views: {
              resourceTimeGridSemana: {
                type: 'resourceTimeGrid',
                duration: { days: 7 },
                buttonText: 'Semana'
              }
            },
            events: /*'https://fullcalendar.io/demo-events.json?with-resources=4&single-day',*/ [ 
                {
                    title: 'All Day Event',
                    start: '2019-12-11',
                    resourceId: 'a'

                },
                {
                    title: 'Long Event',
                    start: '2019-12-10',
                    end: '2019-12-13',
                    resourceId: 'b'
                },
                {
                    id: 999,
                    title: 'Repeating Event',
                    start: '2019-12-11T16:00:00',
                    end: '2019-12-11T21:00:00',
                    resourceId: 'c',
                    backgroundColor: '#FF5C47'
                }
            ],
            eventOverlap: function (stillEvent, movingEvent) {



                return stillEvent.allDay && movingEvent.allDay;
            },
            editable: true,
            droppable: true, // this allows things to be dropped onto the calendar
            drop: function(info) {
                // is the "remove after drop" checkbox checked?
                if (checkbox.checked) {
                // if so, remove the element from the "Draggable Events" list
                info.draggedEl.parentNode.removeChild(info.draggedEl);
                }
            },
            eventClick: function(info) {
                info.jsEvent.preventDefault(); // don't let the browser navigate
                console.log(info.event.getResources().map(function(resource) { return resource.id }));
                alert(info.event.getResources());
                if (info.event.id) {
                    var event = calendar.getEventById(info.event.id);
                    event.remove();
                }
            }
        });

      calendar.render();
    });

Thank you!


Viewing all articles
Browse latest Browse all 138163

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>