Я хочу добавить всплывающие подсказки к событиям FullCalendar, потому что они показывают недостаточно информации, но каждый раз, когда я пытался это сделать - браузер возвращает сообщение об ошибке консоли. Вот код:
JS ФАЙЛЫ:
<script src="<?php echo base_url('assets/fullcalendar/tooltip/tooltip.js'); ?>"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
Преобразование событий в JSON из базы данных:
$dataInfo = $this->core_model->getCalendarEvents();
foreach($dataInfo as $row) {
$json[] = array(
'title' => $row['e_title'],
'description' => $row['es_name'],
'start' => date(DateTime::ISO8601, strtotime($row['e_start_date'])),
'end' => date(DateTime::ISO8601, strtotime($row['e_end_date'])),
'color' => $row['ec_color'],
'textColor' => '#FFFFFF',
'class' => 'gcal-day-grid',
'url' => base_url('core/dashboard/showEvent/'.$row['e_id'])
);
}
$this->output->set_header('Content-Type: application/json');
echo json_encode($json, true);
И, наконец, настройки FullCalendar:
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('load-calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
// load plugins
plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list', 'googleCalendar', 'momentTimezonePlugin', 'momentPlugin'],
nextDayThreshold: '00:00:00',
allDayDefault: false,
firstDay: 1,
locale: 'pl',
timeZone: 'Europe/Warsaw',
editable: true,
selectable: false,
selectHelper: true,
displayEventTime: true, // don't show the time column in list view
buttonIcons: true, // show the prev/next text
weekNumbers: false,
navLinks: true, // can click day/week names to navigate views
editable: true,
eventLimit: true, // allow "more" link when too many events
defaultView: window.mobilecheck() ? "listWeek" : "dayGridMonth",
eventRender: function(info) {
var tooltip = new Tooltip(info.el, {
title: info.event.extendedProps.description,
placement: 'top',
trigger: 'hover',
container: 'body'
});
},
// calendar header
header: {
left: window.mobilecheck() ? 'prev,next, custom1' : 'prev,next, today, custom1',
center: window.mobilecheck() ? '' : 'title',
right: window.mobilecheck() ? 'title' : 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
},
customButtons: {
custom1: {
text: 'Dodaj',
click: function() {
$('#addEventModal').modal('show');
}
}
},
// change button text
buttonText: {
today: "Dzisiaj",
month: "Miesiąc",
week: "Tydzień",
day : "Dzień",
listMonth: 'Lista'
},
// THIS KEY WON'T WORK IN PRODUCTION!!!
// business hours
businessHours: {
daysOfWeek: [1, 2, 3, 4, 5],
startTime: '08:00',
endTime: '18:00',
},
eventSources: [
{
url: "<?php echo base_url('core/dashboard/getEvents'); ?>",
dataType : 'jsonp',
className: 'feed_two',
}
],
loading: function(bool) {
document.getElementById('loading').style.display =
bool ? 'block' : 'none';
},
});
calendar.render();
});
Ошибка в браузере:
У меня также есть ошибка из всплывающей подсказки. js:
Календарь отображается, но без событий. Когда я удаляю eventRender из кода, события будут показываться.
Понятия не имею, где найти ошибку. Кто-нибудь сталкивался с такой же проблемой?