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

• javascript
• twitter-bootstrap
• fullcalendar
• newline
• popper.js

1 Answer 1

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

});