es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Añadir nuevo objeto a fullcalendar desde Ajax

22 Jul, 2023 Programación

Estoy tratando de añadir nuevos eventos desde un ajax a los eventos del fullcalendar
Aquí está lo que he intentado:

$.ajax({
type: 'GET',
url: 'enlace del ajax',
headers: {
    dateType: "json",
    "Authorization":"algo"
},
dataType: "json",
success: function (res){
  var wow = res;
}
})

var EventsField = {
  id: 1,
  events: [
    {
      id: '1',
      start: curYear+'-'+curMonth+'-08T08:30:00',
      end: curYear+'-'+curMonth+'-08T13:00:00',
      title: 'Algun Título',
      backgroundColor: '#bff2f2',
      borderColor: '#00cccc',
      description: 'Algun texto'
    },
  ]
};

Entonces, desde el ajax obtengo variables como las presentes en el objeto de eventos, y quiero obtener esas variables desde el ajax y ponerlas en los objetos de eventos.

¡Gracias!

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para agregar nuevos eventos a FullCalendar desde una llamada AJAX, puedes modificar el objeto EventsField empujando nuevos eventos al arreglo events obtenido de la llamada AJAX. Aquí tienes un ejemplo de cómo puedes lograr esto:

    $.ajax({
  type: 'GET',
  url: 'enlace de ajax',
  headers: {
    dataType: "json",
    "Authorization":"algo"
  },
  dataType: "json",
  success: function (res) {
    var eventsData = res; // asumiendo que la respuesta de la llamada AJAX contiene datos de eventos
    var newEvents = [];

    for (var i = 0; i < eventsData.length; i++) {
      // crear un nuevo objeto de evento
      var eventObj = {
        id: eventsData[i].id,
        start: eventsData[i].start, // asumiendo que la hora de inicio y fin se proporcionan en el formato correcto
        end: eventsData[i].end,
        title: eventsData[i].title,
        backgroundColor: eventsData[i].backgroundColor,
        borderColor: eventsData[i].borderColor,
        description: eventsData[i].description
      };

      newEvents.push(eventObj); // agregar el nuevo evento al arreglo
    }

    // actualizar el objeto EventsField con los nuevos eventos
    EventsField.events = EventsField.events.concat(newEvents);

    // volver a renderizar el calendario para mostrar los nuevos eventos
    $('#calendar').fullCalendar('rerenderEvents');
  }
});

    En el código anterior, primero realizamos una llamada AJAX y recibimos los datos de eventos en la variable res. Luego, iteramos sobre los datos de eventos para crear un nuevo objeto de evento para cada evento y agregarlo al arreglo newEvents. Finalmente, actualizamos el arreglo events del objeto EventsField concatenándolo con el arreglo newEvents y luego volvemos a renderizar el calendario para mostrar los nuevos eventos.

    Ten en cuenta que este código asume que ya has inicializado FullCalendar con el objeto EventsField como fuente de eventos. Además, asegúrate de que la llamada AJAX devuelva los datos en el formato correcto esperado por FullCalendar.

Comments are closed.