Default Values on a FullCalendar (drag&drop events)

Viewed 463

(excuse my english, im from Argentina) I am making a calendar for shifts (items) that are dragged from a side panel (a client is selected) to the entire calendar. Once the event is in the fullCalendar, you can perform three actions with it:

  • Move(change hour/date): You can drag it to another date or to another time
  • Modify duration: if you select the bottom of the event, it lets you enlarge or shrink, to give you another end time
  • View data: By clicking I configured a modal that shows data

The shift element is created using the following function

$('#add-new-event').click(function(e) {
    e.preventDefault()
        //Get value and make sure it is not null
    var val = $('#new-event').val()
    if (val.length == 0) {
        return
    }

    var desc = $('#new-desc-event').val()
    console.log(desc);
    //Create events
    var event = $('<div />')

    event.css({
        'font-weight': 300,
        'background-color': currColor,
        'border-color': currColor,
        'color': '#fff'
    }).addClass('external-event')
    if (desc == "") {

        event.html(val)
    } else {

        event.html(val + ' - ' + desc)
    }

Once the item is created (which contains the name of a customer and a description), I can select it and drag it to the calendar, which has the following configuration

new FullCalendarInteraction.Draggable(containerEl, {
    itemSelector: '.external-event',
    eventData: function(eventEl) {

        return {
            title: eventEl.innerText,
            backgroundColor: window.getComputedStyle(eventEl, null).getPropertyValue('background-color'),
            borderColor: window.getComputedStyle(eventEl, null).getPropertyValue('background-color'),
            textColor: window.getComputedStyle(eventEl, null).getPropertyValue('color'),
        };
    }
});

view = 'timeGridDay';
header = {
    left: 'prev,next timeGridDay,timeGridWeek,dayGridMonth',
    center: '',
    right: ''
};


var calendar = new FullCalendar.Calendar(calendarEl, {
    timeZone: 'local',
    plugins: ['interaction', 'dayGrid', 'timeGrid'],
    defaultView: 'timeGridDay',
    defaultDate: hoy,
    header: header,
    businessHours: [ // specify an array instead
        {
            daysOfWeek: [1, 2, 3, 4, 5, 6],
            startTime: '09:00', // 8am
            endTime: '21:00' // 6pm
        }
    ],
    minTime: "09:00",
    maxTime: "21:00",
    events: [{
        title: 'Agustin Guerra',
        start: '2020-03-12T10:30:00',
        end: '2020-03-12T11:30:00',
        description: 'hola'
    }],
    eventClick: function(calEvent, jsEvent, view) {

        e = JSON.stringify(calEvent.event.end)
        s = JSON.stringify(calEvent.event.start)

        //  Configurando StartDate
        var startObj = (calEvent.event.start);
        var local = startObj, // Local timestamp
            m = new moment(local), // Moment representing local time
            a = moment.utc(local), // Specify that 'local' is UTC
            b = m.utc(+3); // Generate UTC time from local
        start = m.format();


        //  Configurando EndDate
        var startObj = (calEvent.event.end);
        var local = startObj, // Local timestamp
            m = new moment(local), // Moment representing local time
            a = moment.utc(local), // Specify that 'local' is UTC
            b = m.utc(+3); // Generate UTC time from local
        end = m.format();

        dia = (end).substr(8, 2);
        mes = (end).substr(5, 2);
        ano = (end).substr(0, 4);
        fecha = dia + '-' + mes + '-' + ano;


        $("#title").val(calEvent.event.title);
        $("#date").val('El dia ' + fecha);
        $("#start").val('Desde las ' + (start).substr(11, 5));
        $("#end").val('Hasta las ' + (end).substr(11, 5));
        $("#description").val(calEvent.event.description);


        $("#exampleModal").modal();

    },
    editable: true,
    droppable: true, // this allows things to be dropped onto the calendar !!!
    drop: function(info) {

        info.draggedEl.parentNode.removeChild(info.draggedEl);

    }
});

What happens is the following: When clicking on an event that is already dragged on the calendar, a modal opens where you can see the following data: Client name, Shift date, Start time, End time, and Description . But I have an error in this section.

If I drag the event from the side panel to the fullCalendar, and then I click on it (already on the calendar) the modal opens but it does not have the End Date or Time, but it does have the Client, the Start Time and the description.

If I drag and drop the event or start time to the event, the problem continues.

If I modified the duration of the event, now it is configured well and the modal shows the data correctly.

I would like to drag the event for the first time to load the end date and time correctly.

1 Answers

The problem was solved. The solution was set the property forceEventDuration as true

  forceEventDuration: true
Related