Я использую fullcalendar в веб-приложении i "m building.
Я загружаю свои события с помощью функции событий и ajax.
вот мой код:
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 } }, }) }); когда я загружаю свои события через ajax, я также получаю информацию о том, какой цвет фона должен получить каждая ячейка. Я могу получить эту информацию только через запрос ajax событий.
проблема в том, что когда dayRender запущен, у меня все еще нет данных о цвете фона. (json_backgrundColor не определено).
есть способ, которым dayRender будет запускаться после того, как календарь событий перестанет работать? или любой другой код, который исправит мою проблему.
большое спасибо!!
Ваша проблема заключается в том, что обратный вызов «dayRender» запускается после изменения вида (с этой целью для изменения даты используйте предыдущий / следующий подсчет, как изменение вида), но до того, как события для нового представления были загружены и отображены. Вот почему ваш массив json_backgrundColor не определен.
Поскольку вы упомянули, что цвет, который будет использоваться, зависит от точной природы событий, которые в настоящее время запланированы на этот конкретный день, нам нужно найти то, что мы можем запустить после того, как все события и данные этого цвета были загружены.
Проверяя HTML, мы видим, что ячейки таблицы, используемые для рисования каждый день, имеют применяемый CSS-класс «fc-day». Они также имеют свойство data-date содержащее тот день, к которому они относятся. Наконец, дни, которые отключены (за пределами основного месяца, из-за которого вы устанавливаете showNonCurrentDates:false ), применяется дополнительный класс «fc-disabled-day». Мы можем использовать эти данные для идентификации ячеек, которые мы хотим изменить, без использования обратного вызова dayRender .
eventAfterAllRender вызов eventAfterAllRender запускается один раз, когда все события были обработаны. Поэтому это кажется хорошим местом для изменения цветов фона ячеек:
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")]); }); }
Обратите внимание, что я переименовал json_backgrundColor в json_backgroundColor чтобы исправить орфографическую ошибку.
NB Это хрупкое в том смысле, что оно опирается на имена классов, которые fullCalendar использует внутри, чтобы представлять ячейки дня. Если fullCalendar решит сделать это по-другому в будущей версии, он сломается (тогда как если бы мы могли использовать API fullCalendar через назначенные обратные вызовы, они, вероятно, сохраняли бы согласованность, несмотря на внутренние изменения или, по крайней мере, документировали любые изменения). Но это довольно важный момент в представлении «Месяц», поэтому реалистично это вряд ли изменится в ближайшее время – вам просто нужно будет запомнить его, если вы обновите версию fullCalendar.