Как реализовать и показать события fullcalendar в модальности boostrap - PullRequest
Новая
       18

Как реализовать и показать события fullcalendar в модальности boostrap

1 голос
/ 24 июня 2019

Я внедряю календарь для моего нового сайта Я получаю события из приложения BackEnd и показываю результат в модальном режиме, используя fullcalendar. Все работает нормально, но когда я открываю и отображаю модальный календарь, события не отображаются в календаре, пока я не нажму кнопку «Далее» или «Предыдущая».

Я уже пытался сделать календарь, перерисовку, следующий или предыдущий программным способом.

Вот мой код для календаря, Конечно, «calendar-results» - это модальное тело модального диалога 

var calendarResultsEl = document.getElementById('calendar-results');
calendarResults = new FullCalendar.Calendar(calendarResultsEl, {
    plugins: ['interaction','timeGrid', 'list'],
    defaultView: 'timeGridWeek',
    slotDuration:'01:00:00',
    scrollTime : '08:00:00',
    firstDay: 1, 
    height:'parent',
    handleWindwoResize:true,
    header: {
        left:   '',
        center: 'title',
        right:  'today prev,next'
    },
        events: elements,
    eventMouseEnter : function(info)
    {
        var element = info.el;
        element.setAttribute('data-html', 'true');
        element.setAttribute('data-container', 'body');
        element.setAttribute('data-rel', 'popover')
        element.setAttribute('data-trigger', 'hover');
        element.setAttribute('data-content', "<font size='3'><b>Start :</b>" + info.event.start + "<br>" + "<b>End :</b>" + info.event.end + "<br></font>");
        element.setAttribute('data-placement', 'top');
        element.setAttribute('data-title', "<font size='6'>" + info.event.id + "</font>");
        $(function () { 
            $("[data-rel=popover]").popover();   
        });
    },
    columnHeaderFormat:{
        weekday:'long',
        day:'numeric',
        month:'long'
    },
    eventClick : function(info){
        $("#startTime").val(moment.utc(info.event.start));
        $("#endTime").val(moment.utc(info.event.end));
        $("#name").val(info.event.title);
        $("#eventInfo").html(info.event.description);
        $("#eventLink").attr('href', info.event.url);
        $("#eventContent").modal('show');
    }
});
calendarResults.render();

Вот мой объект событий: 

[
  {
    "end": "2019-03-11T19:02:00.000Z",
    "id": 0,
    "start": "2019-03-11T04:32:00.000Z"
  },
  {
    "end": "2019-03-12T19:02:00.000Z",
    "id": 1,
    "start": "2019-03-12T04:32:00.000Z"
  },
  {
    "end": "2019-03-13T19:02:00.000Z",
    "id": 2,
    "start": "2019-03-13T04:32:00.000Z"
  },
  {
    "end": "2019-03-14T19:02:00.000Z",
    "id": 3,
    "start": "2019-03-14T04:32:00.000Z"
  },
  {
    "end": "2019-03-15T19:02:00.000Z",
    "id": 4,
    "start": "2019-03-15T04:32:00.000Z"
  },
  {
    "end": "2019-03-18T19:02:00.000Z",
    "id": 5,
    "start": "2019-03-18T04:32:00.000Z"
  }
]

Конечно, проблема не появится с этим объектом события, Я сделал jsFiddle, чтобы показать мою проблему. События текущей недели не появляются, если вы не нажмете предыдущий / следующий Также при изменении размера окна результатов показываются события.

https://jsfiddle.net/Marech/2Lqgewdc/7/

Кому-нибудь удалось показать календарь в моде boostrap? Может быть, я должен проверить события, запускаемые при нажатии кнопки, и сделать то же самое программно после рендеринга календаря. Есть предложения?

1 Ответ

1 голос
/ 25 июня 2019

В вашем коде кнопки вы можете вручную вызвать событие изменения размера окна: 

// When the user clicks on the button, open the modal
btn.onclick = function() {

  modal.style.display = "block";
  window.dispatchEvent(new Event('resize'));

}

Это работает, но этот способ работы с модальными;напрямую манипулировать стилями, это не самый элегантный способ.Вам следует рассмотреть обзор модальной документации Bootstrap или, по крайней мере, использовать библиотеку для обработки модальных функций.

...