最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - New line in Full Calendar description - Stack Overflow

programmeradmin4浏览0评论

I am building a website and I am using Full Calendar to integrate a schedule with descriptions when one hovers over an event. But the problem is I am not able to make a new line in the description if I use \n. Is there a way to get around this?

The link to my code via Codepen is below. If you look under events and then the descriptions you can see the LINE ONE \n LINE TWO code I put in. That is the part that is not working.

Here is my code:

Thanks, Jack

I am building a website and I am using Full Calendar to integrate a schedule with descriptions when one hovers over an event. But the problem is I am not able to make a new line in the description if I use \n. Is there a way to get around this?

The link to my code via Codepen is below. If you look under events and then the descriptions you can see the LINE ONE \n LINE TWO code I put in. That is the part that is not working.

Here is my code: https://codepen.io/jjaacckk/pen/ReEyPr

Thanks, Jack

Share Improve this question edited Oct 29, 2018 at 9:56 ADyson 62.1k16 gold badges78 silver badges91 bronze badges asked Oct 25, 2018 at 18:01 Jack WelchJack Welch 791 gold badge2 silver badges8 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 7

By default, the content option of a Bootstrap /popper.js popover is treated as plain text. Another thing to note is that since we're in a HTML document, a newline character is not use to us. So you need to change two small things:

  1. As per the documentation set the html option to true so that it will treat anything you insert into the title or content as HTML instead of plain text.

    html: true,
    
  2. Insert a HTML line break into your description instead of the newline character.

    description: 'LINE ONE
    LINE TWO'

So overall your JS code would look like this:

$(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'
      }
    ]
  });

});
发布评论

评论列表(0)

  1. 暂无评论