Как заставить всплывающие окна Bootstrap работать в FullCalendar 4?

Я использую данные календаря 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();

Я предлагаю вам проверить документацию eventRender v4: fullcalendar.io/docs/eventRender , особенно то, что там говорится о сигнатуре обратного вызова, т.е. о параметрах, передаваемых в функцию обратного вызова. Вы используете подпись v3.

ADyson 03.07.2019 11:54

Это самое близкое, что я могу придумать, получает «ошибка разбора 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'); },

V1xIII 03.07.2019 17:03

Итак, 1) Судя по исходному коду, я ожидаю, что метод .popover() является методом jQuery? Поэтому по логике в новой версии это должно быть $(info.el).popover( (поскольку в v4 элемент el теперь является собственным объектом элемента DOM, а не объектом jQuery). И 2) Поскольку title - это стандартное свойство объекта события в fullCalendar, я не думаю, что вам следует искать его в extendedProps - info.event.title должен предоставить вам необходимые данные. Итак, опять же, в обоих этих случаях вам просто нужно более подробно проверить документы, я думаю.

ADyson 03.07.2019 17:37

Вы были правы насчет названия. Я пытался использовать этот селектор jQuery, но все еще получаю сообщение «Ошибка синтаксического анализа JSON». Интересный факт: если я скопирую пример кода eventRender из документации, я все равно получу эту ошибку JSON. Похоже, мне придется заставить своего босса попробовать это.

V1xIII 03.07.2019 17:56

очевидный вопрос... действительно ли (все) ваши события имеют свойство description, которое заполняется? Возможно, он не может прочитать это из одного или нескольких событий. Может быть, попробуйте только свойство title, так как они все должны иметь это как минимум.

ADyson 03.07.2019 18:09

Ха! Вот оно! Первому событию не хватало описания, и это ломало все дело.

V1xIII 03.07.2019 18:23

Не волнуйтесь! Так что, возможно, вам просто нужно проверить, доступно ли описание, прежде чем пытаться его использовать.

ADyson 03.07.2019 18:25

Привет @V1xIII ... это был хороший вопрос ... не могли бы вы добавить свой рабочий код с подзаголовком РЕШЕНИЕ ниже того, что у вас уже есть ... Я уверен, что это поможет людям в будущем ... спасибо

Marvel Moe 26.07.2019 22:12

@Marvel Moe - я опубликовал полный блок кода, который в итоге использовал, как вы и просили.

V1xIII 29.07.2019 15:13

Спасибо, V1xIII... Мне пришлось заменить $ на jQuery, а также отформатировать дату с помощью fullcalendar.io/docs/v1/formatDate.

Marvel Moe 30.07.2019 22:03

я даже не заставляю тему начальной загрузки работать в 4.3.1. у меня есть themeSystem: bootstrap и я импортирую import '@fullcalendar/bootstrap/main.css';

Gobliins 26.11.2019 15:31
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
3
11
7 400
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Спасибо Эдисону. В комментариях он спросил, есть ли у всех моих событий свойство 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'
            });

Другие вопросы по теме