javascript - fullcalendar.js v4 - 如何在标题中设置 html?

标签 javascript html fullcalendar fullcalendar-4

有没有人有让 FullCalendar.js v4 将标题呈现为 html 的解决方案?获取元素和用 html 替换文本的所有旧方法都不适用于新版本。我在下面试过这个:

eventRender: function(info) {
  return $.parseHTML(info.event.title);

半工作 - Html 已呈现,但它缺少事件的其余 html 类。我的猜测是它需要修改完整的信息对象,但设置它不起作用: eventRender:功能(信息){ info.event.title = info.el.innerText; 返回信息

最佳答案

由于 fullCalendar v4 不再使用 jQuery,在 eventRender 期间提供的 HTML 元素现在是一个标准的 JS DOM 元素对象,所有元素都是通过 v4 的回调和方法提供的。参见 https://fullcalendar.io/docs/upgrading-from-v3了解更多信息。

这意味着您可以使用标准的 JavaScript DOM 方法来操作它。例如,您可以这样做以使标题以斜体显示:

eventRender: function(info) {
  info.el.querySelector('.fc-title').innerHTML = "<i>" + info.event.title + "</i>";
}

演示:https://codepen.io/anon/pen/XwmgLR?editors=1010

关于javascript - fullcalendar.js v4 - 如何在标题中设置 html?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56033273/

相关文章:

javascript - 响应式三列重新堆叠

html - 具有百分比的相对定位 Top 不适用于内联元素

jquery - 在 fullcalendar.js 的事件中渲染 HTMLS 标签

fullcalendar - 使用JQuery Fullcalendar插件的时间线 View

javascript - 如何隐藏视频中出现的 YouTube 播放按钮?

javascript - JS 函数不返回 return

html - 获得厚 h1

jquery - FullCalender.io 与经典 ASP

javascript - 主干保存嵌套集合

javascript - jQuery toggleClass fade 适用于一个类,而不适用于另一个类?