FullCalendar v4 - 如何在日历中动态添加非标准字段？

Question

I added a non-standard field in the modal / form (Bootstrap) to add it to the calendar event. I take the content of the textarea and save it in a variable (description) but I can't print it in the calendar. I was researching and testing with eventRender but it didn't work. What do you suggest?

      // FULLCALENDAR
      document.addEventListener('DOMContentLoaded', function () {
        // Submit formulario
        let enviar = document.querySelector("#guardar"); 
        let calendarEl = document.getElementById('calendar');

        let calendar = new FullCalendar.Calendar(calendarEl, {
          locale: "es",
          plugins: ["interaction", "dayGrid", "timeGrid"],
          selectable: true,
          defaultView: "timeGridWeek",
          header: {
            left: "prev,next today",
            center: "title",
            right: "timeGridDay,timeGridWeek,dayGridMonth",
          },

          // Selecciona con click en una fecha/hora determinada
          dateClick: function (info) {
            let infoDate = info.dateStr.substring(0,10)
            let infoTime = info.dateStr.substring(11,19)

            // Toma el valor donde clikea y lo agrega al value de HTML
            document.querySelector("#fecha").setAttribute("value", infoDate)
            document.querySelector("#hora").setAttribute("value", infoTime)

            // Acciona el modal
            $("#modalEventos").modal();
          },
        });

        calendar.render();

        // EVENT LISTENER
        enviar.addEventListener("submit", enviarEvento)

        // FUNCTIONS
        // Toma los datos del evento en el modal 
        function enviarEvento() {
          let titulo = document.querySelector("#titulo").value;
          let descripcion = document.querySelector("#descripcion").value;
          let fecha = document.querySelector("#fecha").value;
          let hora = document.querySelector("#hora").value;
          let color = document.querySelector("#color").value;

          // Imprime los datos en el calendario
          calendar.addEvent({    
            title: titulo, 
            description: descripcion,
            start: fecha + "T" + hora,
            color: color
          });

          //Cierra el modal
          $('#modalEventos').modal('toggle'); 
        }
      });

Answer 1

Full calendar < 4.x

According to docs , addEvent was removed in v1.3 .

The alternative syntax is:

calendar.fullCalendar('renderEvent', {    
  // event props here...
}, true);

If you need more help, please create a minimal reproducible example to allow testing potential solutions.

Here's a codepen where you can see the above syntax working (line 16 in JS).
To test: click any day, add details, "Save".

---

Full calendar 4.x and above:

According to documentation , every non-standard property passed to the event object and any property passed to event.extendedProps will all be merged inside the same object, called extendedProps which means both department and foo in this example will be found in event.extendedProps after parsing:

calendar.addEvent({
  title: 'BCH237',
  start: '2019-08-12T10:30:00',
  end: '2019-08-12T11:30:00',
  department: 'BioChemistry',
  extendedProps: {
    foo: 'bar'
  },
  description: 'Lecture'
})
... 
eventRender(info) {
  console.log(info.event.extendedProps.department) // 'BioChemistry'
  console.log(info.event.extendedProps.foo) // 'bar'
  console.log(info.event.description) // 'Lecture'
}

See it working here .

Answer 2

Thanks for the reply @tao. renderEvent is only available until version 3 and I'm using v 4. So I use calendar.addEvent which is available in version 4 and 5 (beta). (I think it is not the same as addEvent, to which you refer) I am a newbie to javascrip so I keep trying a solution and watch for suggestions, Seeks to fix it in JavaScript. avoiding jQuery.

FullCalendar gives me this reference but when I try to do it dynamically I can't

                    var calendar = new Calendar(calendarEl, {
          events: [
            {
              title: 'BCH237',
              start: '2019-08-12T10:30:00',
              end: '2019-08-12T11:30:00',
              extendedProps: {
                department: 'BioChemistry'
              },
              description: 'Lecture'
            }
            // more events ...
          ],
          eventRender: function (info) {
            console.log(info.event.extendedProps);
            // {description: "Lecture", department: "BioChemistry"}
          }

        });

Answer 3

For a version 5 try this.

           calendar.addEvent({
                title: $('#txtTituloEvento').val(),
                start: $('#txtInicio').val(),
                end: $('#txtFin').val(),
                extendedProps: {
                    descripcion: $('#txtDescripcion').val()
                },
                allDay: false,
            })