Question

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

下面是通过Codepen链接到我的代码的链接。如果您查看事件，然后查看描述，您会看到我输入的LINE ONE \n LINE TWO代码。这是无效的部分。

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

谢谢，杰克

Answer 1

默认情况下，Bootstrap /popper.js popover的content选项被视为纯文本。要注意的另一件事是，由于我们位于HTML文档中，因此我们不使用换行符。因此，您需要更改两个小事项：

根据documentation，将html选项设置为true，以便它将您插入标题或内容中的任何内容都视为HTML，而不是纯文本。
```
html: true,
```
在描述中插入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'
      }
    ]
  });

});

完整日历说明中的新行

1 个答案: