0

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.

1
  • Nada? =( me tendré que ir a SO en ingles a ver que pasa
    – Agustin G.
    Commented el 12 mar. 2020 a las 22:36

1 respuesta 1

0

El problema se solucionó estableciendo la siguiente propiedad en la declaración del calendario:

forceEventDuration: true

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.