(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.