Я использую данные календаря Google в FullCalendar 4, и все отображается нормально, но мне трудно понять, как использовать всплывающие окна начальной загрузки для событий при наведении. Я пробовал кучу разных вещей, которые нашел в Интернете, но все они либо выдают ошибки JSON, либо вообще ничего не делают (вероятно, потому что большая часть из них предназначена для предыдущих версий).
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'dayGrid', 'timeGrid', 'list', 'bootstrap', 'googleCalendar' ],
themeSystem: 'bootstrap',
googleCalendarApiKey: 'xxxxxxx',
events: {
googleCalendarId: 'xxxxxxx'
},
eventRender: function(event, element) {
$(element).popover({
title: event.title,
placement:'top',
html:true,
trigger : 'hover',
animation : 'false',
content: event.description,
container:'body'
}).popover('show');
},
height: 650,
header: {
left: 'title',
center: '',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek prevYear,prev,next,nextYear'
}
});
calendar.render();
Эта конкретная функция eventRender не выдает никаких ошибок, но и ничего не делает. Единственное, что происходит при наведении курсора мыши, — это добавление fc-allow-mouse-resize к тегу привязки в конкретном событии. Что мне не хватает?
РЕШЕНИЕ (удалено event.description из содержимого всплывающего окна)
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'dayGrid', 'timeGrid', 'list', 'bootstrap', 'googleCalendar'],
themeSystem: 'bootstrap',
googleCalendarApiKey: 'xxxxxxx',
events: {
googleCalendarId: 'xxxxxxx'
},
eventRender: function(info) {
var start = info.event.start;
var end = info.event.end;
var startTime;
var endTime;
if (!start) {
startTime = '';
} else {
startTime = start;
}
if (!end) {
endDate = '';
} else {
endTime = end;
}
var title = info.event.title;
var location = "at " + info.event.extendedProps.location;
if (!info.event.extendedProps.location) {
location = '';
}
$(info.el).popover({
title: title,
placement:'top',
trigger : 'hover',
content: startTime + " to " + endTime + " " + location,
container:'body'
}).popover('show');
},
eventClick: function(info) {
info.jsEvent.preventDefault(); // don't let the browser navigate
if (info.event.url) {
window.open(info.event.url);
}
},
height: 650,
header: {
left: 'title',
center: '',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek prevYear,prev,next,nextYear'
}
});
calendar.render();
Это самое близкое, что я могу придумать, получает «ошибка разбора JSON» eventRender: function(info) { info.el.popover({ title: info.event.extendedProps.title, placement:'top', trigger : 'hover', content: info.event.extendedProps.description, container:'body' }).popover('show'); },
Итак, 1) Судя по исходному коду, я ожидаю, что метод .popover() является методом jQuery? Поэтому по логике в новой версии это должно быть $(info.el).popover( (поскольку в v4 элемент el теперь является собственным объектом элемента DOM, а не объектом jQuery). И 2) Поскольку title - это стандартное свойство объекта события в fullCalendar, я не думаю, что вам следует искать его в extendedProps - info.event.title должен предоставить вам необходимые данные. Итак, опять же, в обоих этих случаях вам просто нужно более подробно проверить документы, я думаю.
Вы были правы насчет названия. Я пытался использовать этот селектор jQuery, но все еще получаю сообщение «Ошибка синтаксического анализа JSON». Интересный факт: если я скопирую пример кода eventRender из документации, я все равно получу эту ошибку JSON. Похоже, мне придется заставить своего босса попробовать это.
очевидный вопрос... действительно ли (все) ваши события имеют свойство description, которое заполняется? Возможно, он не может прочитать это из одного или нескольких событий. Может быть, попробуйте только свойство title, так как они все должны иметь это как минимум.
Ха! Вот оно! Первому событию не хватало описания, и это ломало все дело.
Не волнуйтесь! Так что, возможно, вам просто нужно проверить, доступно ли описание, прежде чем пытаться его использовать.
Привет @V1xIII ... это был хороший вопрос ... не могли бы вы добавить свой рабочий код с подзаголовком РЕШЕНИЕ ниже того, что у вас уже есть ... Я уверен, что это поможет людям в будущем ... спасибо
@Marvel Moe - я опубликовал полный блок кода, который в итоге использовал, как вы и просили.
Спасибо, V1xIII... Мне пришлось заменить $ на jQuery, а также отформатировать дату с помощью fullcalendar.io/docs/v1/formatDate.
я даже не заставляю тему начальной загрузки работать в 4.3.1. у меня есть themeSystem: bootstrap и я импортирую import '@fullcalendar/bootstrap/main.css';



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Спасибо Эдисону. В комментариях он спросил, есть ли у всех моих событий свойство description, а у них его нет. Я удалил ссылку на event.description, и это решило мою проблему. Мой окончательный код ниже.
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'dayGrid', 'timeGrid', 'list', 'bootstrap', 'googleCalendar'],
themeSystem: 'bootstrap',
googleCalendarApiKey: 'xxxxxxx',
events: {
googleCalendarId: 'xxxxxxx'
},
eventRender: function(info) {
var start = info.event.start;
var end = info.event.end;
var startTime;
var endTime;
if (!start) {
startTime = '';
} else {
startTime = start;
}
if (!end) {
endDate = '';
} else {
endTime = end;
}
var title = info.event.title;
var location = "at " + info.event.extendedProps.location;
if (!info.event.extendedProps.location) {
location = '';
}
$(info.el).popover({
title: title,
placement:'top',
trigger : 'hover',
content: startTime + " to " + endTime + " " + location,
container:'body'
}).popover('show');
},
eventClick: function(info) {
info.jsEvent.preventDefault(); // don't let the browser navigate
if (info.event.url) {
window.open(info.event.url);
}
},
height: 650,
header: {
left: 'title',
center: '',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek prevYear,prev,next,nextYear'
}
});
calendar.render();
У меня была такая же проблема, и это сработало как шарм. Спасибо.
Небольшое дополнение: endDate должно быть endTime в части кода ниже
if (!end) {
endDate = '';
} else {
endTime = end;
}
Кстати, мне было проще написать это как:
var endTime = (!end) ? '' : end;
Я хотел бы добавить кое-что для формата даты. Может кому пригодится. Я использовал:
var end = info.event.end.toLocaleString('fr-FR');
еще более специализированный:
var end = info.event.end.toLocaleString('fr-FR',{
day: '2-digit',
month: 'short',
hour: '2-digit',
minute: '2-digit'
});
Я предлагаю вам проверить документацию eventRender v4: fullcalendar.io/docs/eventRender , особенно то, что там говорится о сигнатуре обратного вызова, т.е. о параметрах, передаваемых в функцию обратного вызова. Вы используете подпись v3.