引入Bootstrap后FullCalendar自定义事件提示工具失效问题排查
FullCalendar + Bootstrap 5 集成后日期旁Tooltip失效问题
我正在将基于FullCalendar 1.x + Bootstrap 3的旧项目迁移至最新版FullCalendar + Bootstrap 5。为展示节假日,我们未使用背景事件,而是在日期旁添加小图标并通过Tooltip说明节假日信息,该效果在不引入Bootstrap CSS时可正常运行,但添加Bootstrap CSS后Tooltip失效,尝试Bootstrap原生Tooltip也存在相同问题,推测是两者CSS冲突,但无法定位。
用于渲染事件Tooltip的JS代码如下:
// import bootstrap5Plugin from '@fullcalendar/bootstrap5'; var DateTime = luxon.DateTime; document.addEventListener('DOMContentLoaded', function() { var calendarEl = document.getElementById('calendar'); var calendar = new FullCalendar.Calendar(calendarEl, { timeZone: 'local', // plugins: [ // bootstrap5Plugin, // ], headerToolbar: { start: 'prev,today,next', center: 'title', end: 'dayGridMonth,dayGridWeek,dayGridDay' }, // themeSystem: 'bootstrap5', eventDidMount: function(info) { const element = info.el; const event = info.event; const date = DateTime.fromJSDate(event.start).toFormat('yyyy-MM-dd'); const cell = document.querySelector(`td[data-date="${date}"] .fc-daygrid-day-top`); if (cell != null) { var ta = document.createElement('a'); ta.setAttribute('data-bs-toggle', 'tooltip'); ta.setAttribute('data-bs-title', event.title); ta.setAttribute('data-bs-placement', 'top'); ta.setAttribute('href', 'https://google.com'); ta.innerText = 'xxx'; cell.appendChild(ta); var tooltipDay = new Tooltip(ta, { title: info.event.extendedProps.description, placement: 'top', trigger: 'hover', container: 'body' }); } var tooltip = new Tooltip(info.el, { title: info.event.extendedProps.description, placement: 'top', trigger: 'hover', container: 'body' }); }, events: [{ "title": "All Day Event", "description": 'description for All Day Event', "start": "2023-10-04" }], editable: false, selectable: false }); calendar.render(); });
内容的提问来源于stack exchange,提问作者pgb
相关产品推荐
相关产品推荐

