Новая строка в полном календаре

Question

Я создаю веб-сайт и использую полный календарь, чтобы интегрировать расписание с описаниями, когда вы наводите курсор на событие.Но проблема в том, что я не могу сделать новую строку в описании, если я использую \ n.Есть ли способ обойти это?

Ссылка на мой код через Codepen приведена ниже.Если вы посмотрите на события, а затем на описания, вы увидите код LINE ONE \n LINE TWO, который я вставил. Это часть, которая не работает.

Вот мой код: https://codepen.io/jjaacckk/pen/ReEyPr

Спасибо, Джек

Answer 1

По умолчанию опция content поповера Bootstrap /popper.js обрабатывается как обычный текст.Следует также отметить, что, поскольку мы находимся в документе HTML, символ новой строки нам не нужен.Поэтому вам нужно изменить две маленькие вещи:

1. Согласно документации установите для параметра html значение true, чтобы оно обрабатывало все, что вы вставляете взаголовок или содержимое в виде HTML вместо простого текста.

   html: true,
   

2. Вставьте разрыв HTML-строки в ваше описание вместо символа новой строки.

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

});