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 badges1 Answer
Reset to default 7By 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:
As per the documentation set the
html
option totrue
so that it will treat anything you insert into the title or content as HTML instead of plain text.html: true,
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'
}
]
});
});