完整日历描述中的新行

Question

我正在构建一个网站，并且我正在使用完整日历将一个日程表与描述集成，当一个人悬停在一个事件上时。但问题是，如果我使用 \n，我将无法在描述中创建新行。有没有办法解决这个问题？

下面是通过 Codepen 指向我的代码的链接。如果您查看事件，然后查看描述，您可以看到LINE ONE \n LINE TWO我输入的代码。那是不起作用的部分。

这是我的代码：https : //codepen.io/jjaacckk/pen/ReEyPr

谢谢，杰克

Answer 1

默认情况下，contentBootstrap /popper.js 弹出窗口的选项被视为纯文本。另一件需要注意的事情是，由于我们在一个 HTML 文档中，换行符对我们来说是不常用的。所以你需要改变两个小东西：

1. 根据文档，将html选项设置为，true以便将您插入到标题或内容中的任何内容视为 HTML 而不是纯文本。

   html: true,
   

2. 在描述中插入 HTML 换行符而不是换行符。

   描述：'第一行
   第二行'

所以总的来说你的 JS 代码看起来像这样：

$(function() {

  $('#calendar').fullCalendar({
    defaultView: 'month',
    defaultDate: '2018-10-12',

    eventRender: function(eventObj, $el) {
      $el.popover({
        title: eventObj.title,
        content: eventObj.description,
        trigger: 'hover',
        html: true,
        placement: 'top',
        container: 'body'
      });
    },

    events: [
      {
        title: 'EVENT 1',
        description: 'LINE ONE <br> LINE TWO',
        start: '2018-10-01'
      }
    ]
  });

});