Search code examples
jqueryfullcalendar

Fullcalender: event hides on drag


I have Fullcalendar 3 combined with the Scheduler plugin (and am running on jquery 1.11 en jqueryUI 1.12, although I think the jquery versions are not relevant, since these versions are not used in the jsFiddle below)

When I drag an event on the calendar, it becomes invisible.

I would like it to stay visible, as shown in the examples of Fullcalendar Scheduler itself https://fullcalendar.io/scheduler

I have made a jsfiddle to demonstrate

https://jsfiddle.net/q5t43ga1/

Scroll to Feb 24 2019, 12am to see the event.

HTML

<div id="calendar"></div>

Javascript

$('#calendar').fullCalendar({
    defaultView: 'timelineDay', //agendaWeek
    locale: 'nl',
    timezone: 'local',
    themeSystem: 'bootstrap3',
    height: 200,
    slotDuration: '00:10:00',
    nowIndicator: 'true',
    minTime: "20:00:00", // this makes the calendar start at 8PM
    maxTime: "44:00:00", // this makes the calender end 24 hours later at 8PM ( (8PM => 20) + 24 = 44)
    schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
    editable: true, // enable draggable events
    droppable: true, // this allows things to be dropped onto the calendar
    eventResize: function(event) { // called when an event (already on the calendar) is resized
    },
    events: {
        events: [
            {
            title  : 'event2',
            start  : '2019-02-25',
            end    : '2019-02-27'
            }
        ]
    }
})

See attached pictures below

Event is visible

When dragging, the event is invisible


Solution

  • The solution provided by @Louys-Patrice-Bessette works for me

    .fc-dragging {
        display: block !important;
    }
    

    Thanks!