Estoy haciendo un calendario para turnos (elementos) que son arrastrados desde un panel lateral (se selecciona un cliente) hacia el full calendar
.
Una vez que el evento se encuentra en el full calendar, se pueden realizar con él tres acciones:
- Mover: Podes arrastrarlo a otra fecha o a otro horario
- Modificar duracion: si seleccionas la parte de abajo del evento, te deja agrandar o achicar, para darle otro horario de finalizacion
- Ver datos: Al hacer click le configuré un modal que meuestra datos
El elemento turno
se crea mediante la siguiente funcion
$('#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)
}
Una vez creado el elemento (Que contiene el nombre de un cliente y una descripcion), yo puedo selccionarlo y arrastrarlo hacia el calendario, que tiene la siguiente configuracion
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);
}
});
Como pueden ver, la propiedad events
tiene un evento estático que le cargue a modo de ejemplo.
events: [{
title: 'Agustin Guerra',
start: '2020-03-12T10:30:00',
end: '2020-03-12T11:30:00',
description: 'hola'
}]
Lo que sucede es lo siguiente: Al clickear sobre un evento que ya se encuentra en el calendario, se abre un modal donde se pueden ver los siguientes datos: Nombre del cliente, Fecha del turno, Hora de inicio, Hora de fin, y Descripcion. Pero tengo un error en esta parte.
Si yo arrastro el evento desde el panel lateral al calendario, y luego le doy click al mismo (ya en el calendario) el modal se abre pero no tiene la Fecha
ni la Hora de finalizacion
, pero sí tiene el Cliente
, la Hora de inicio
y la descripcion
.
Si al evento lo arrastro y lo cambio de fecha o de hora de inicio, el problema continua.
Si al evento le modifico la duracion, ahora se configura bien y el modal muestra los datos correctamente.
Yo quisiera que al arrastrar el evento por primera vez se carguen correctamente la fecha y la hora de finalizacion.