estoy usando fullcalendar en una aplicación web que estoy construyendo.
cargo mis eventos con la función de eventos y ajax.
aquí está mi código:
var ajaxData; var eventsJsonArray; var json_backgrundColor; var json_iconstring; //alert('Hello! 1!'); $(document).ready(function () { $('#calendar').fullCalendar({ header: { left: 'prev', center: 'title', right: 'next,month,agendaWeek,agendaDay' }, //custom events function to be called every time the view changes events: function (start, end, timezone, callback) { var mStart = start.format('M') var yStart = start.format('YYYY') $.ajax({ url: '$getMonthDataUrl', type: 'GET', data: { startDate: start.format(), endDate: end.format() }, error: function () { alert('there was an error while fetching events!'); }, success: function (data) { alert('nice!!'); ajaxData = data; json_iconstring = ajaxData['iconString']; json_backgrundColor = ajaxData['Calendar_cell_background_color']; eventsJsonArray = ajaxData['all_Events_For_The_Month']; callback(eventsJsonArray); //pass the event data to fullCalendar via the supplied callback function } }); }, fixedWeekCount: false, showNonCurrentDates: false, dayRender: function (date, cell, view) { console.log(json_backgrundColor);//this brings eror because json_backgrundColor is undefined var cellDate = date.format('D'); if (date.format('M') == view.start.format('M')) //cheacking is this day is part of the currrent month (and not prev/next month) { alert(cellDate); cell.css('background-color', json_backgrundColor[cellDate]);//this brings eror because json_backgrundColor is undefined } }, }) });cuando cargo mis eventos a través de ajax, también obtengo la información sobre qué color de fondo debe tener cada celda. Solo puedo obtener esta información a través de la solicitud de eventos ajax.
el problema es que cuando se ejecuta dayRender, todavía no tengo los datos de color de fondo. (json_backgrundColor no está definido).
¿Hay alguna manera de que dayRender se ejecute después de que el calendario de eventos deje de ejecutarse? o cualquier otro código que solucione mi problema.
¡¡muchas gracias!!
Su problema es que la devolución de llamada "dayRender" se ejecuta después de que se cambia la vista (cambiar la fecha usando anterior/siguiente cuenta como cambiar la vista, para este propósito), pero antes de que los eventos para la nueva vista se hayan descargado y procesado. Es por eso que su matriz json_backgrundColor no está definida.
Como mencionó que el color que se utilizará depende de la naturaleza exacta de los eventos actualmente programados para ese día específico, necesitamos encontrar algo que podamos ejecutar después de que se hayan descargado todos los eventos y estos datos de color.
Al inspeccionar el HTML, podemos ver que las celdas de la tabla utilizadas para dibujar cada día tienen aplicada la clase CSS "fc-day". También tienen una propiedad data-date que contiene el día con el que se relacionan. Finalmente, los días que están deshabilitados (fuera del mes principal, debido a que configuraste showNonCurrentDates:false ) tienen aplicada una clase adicional de "fc-disabled-day". Podemos usar esta información para identificar las celdas que queremos cambiar, sin tener que usar la devolución de llamada de dayRender .
La devolución de llamada eventAfterAllRender se ejecuta una vez cuando se han representado todos los eventos. Por lo tanto, este parece un buen lugar para alterar los colores de fondo de las celdas:
eventAfterAllRender(function(view) { //loop through each non-disabled day cell $('.fc-day:not(.fc-disabled-day)').each(function(index, element) { //set the background colour of the cell from the json_backgroundColor arrray, based on the day number taken from the cell's "data-date" attribute. $(this).css('background-color', json_backgroundColor[moment($(this).data("date")).format("D")]); }); } Tenga en cuenta que he cambiado el nombre de json_backgrundColor a json_backgroundColor para corregir el error ortográfico.
NB Esto es frágil en el sentido de que se basa en los nombres de clase que fullCalendar usa internamente para representar las celdas del día. Si fullCalendar decide hacer esto de manera diferente en una versión futura, se romperá (mientras que si pudiéramos usar la API de fullCalendar a través de las devoluciones de llamada designadas, probablemente mantendrían la coherencia a pesar de los cambios internos, o al menos documentarían cualquier cambio). Pero es bastante clave para la vista Mes, por lo que, de manera realista, no es probable que cambie en el corto plazo; solo debe recordar probarlo si actualiza su versión completa de Calendar.
En lugar de confiar en dayRender , debe crear eventos de color de fondo basados en su ajax:
events = [ ... { date: date color: ... rendering: 'background' className: 'my-class' }] Puede transformar eventos usando css de la forma que desee, con o sin la opción rendering: 'background' .