【问题标题】:fullcalendar.js v4 - How to set html in title?fullcalendar.js v4 - 如何在标题中设置 html?
【发布时间】:2019-05-08 03:50:16
【问题描述】:

有没有人有办法让 FullCalendar.js v4 将标题呈现为 html?获取元素并用 html 替换文本的所有旧方法在新版本上都不起作用。我在下面尝试过:

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

Semi 有效 - 渲染了 Html,但它缺少事件中的其余 html 类。我的猜测是它需要修改完整的信息对象,但设置它不起作用: 事件渲染:函数(信息){ info.event.title = info.el.innerText; 返回信息

【问题讨论】:

  • 在 eventRender 中寻找 v4 中的等效项。 v2 是: element.find('.fc-content').html( '
    html 文本或图像
    ' );

标签: javascript html fullcalendar fullcalendar-4


【解决方案1】:

由于 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

【讨论】:

  • 这可行,但 HTML 有时会与 fullcalender 生成的 HTML 输出混淆,引发“解析 JSON 失败”错误(在我的情况下发生在更改视图时)。如果其他人收到此错误,我解决了调整此解决方案stackoverflow.com/a/60061879/3075616
猜你喜欢
  • 1970-01-01
  • 2016-07-16
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-02-21
相关资源
最近更新 更多