完整日历描述中的新行

Question

我正在建立一个网站，我正在使用完整日历将日程表与将鼠标悬停在事件上的描述相结合。但问题是如果我使用 \n，我无法在描述中换行。有办法解决这个问题吗？

下面是我通过 Codepen 编写的代码的 link。如果您查看事件和描述，您可以看到我输入的 LINE ONE \n LINE TWO 代码。那是不起作用的部分。

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

谢谢，杰克

Answer 1

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

根据 documentation 将 html 选项设置为 true 以便它将您插入标题或内容的任何内容视为 HTML 而不是纯文本。
```
html: true,
```
在描述中插入 HTML 换行符而不是换行符。

描述：'LINE ONE
LINE TWO'

总的来说，你的 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'
      }
    ]
  });

});

完整日历描述中的新行

New line in Full Calendar description

javascript

newline

fullcalendar

twitter-bootstrap

popper.js