fullcalendar не отображается, пока нажимается кнопка или не изменяется размер окна?

Question

Я использую jquery полный календарь с угловым и угловым ремешком. Проблема заключается в том, что календарь будет отображаться только при нажатии на одну из кнопок в календаре или изменении размера окна браузера. Этот календарь загружается в модальное поле, инициализированное с помощью углового ретранслятора.

Я ценю помощь.

Plunkr здесь: LINK

Модальные HTML в контроллере search_modal.html календарь: calendarCtrl.js контроллер Родитель search.js

Edit: После того, как испытывают те же проблемы с картами Google и галерея I «Я попытался реализовать, я не думаю, что это проблема, связанная напрямую с календарем, а скорее связанная с самой модальной коробкой. Все, что интерактивно и включает javascript, не масштабируется должным образом в соответствии с размером модального окна. У кого-нибудь есть идеи о том, как это исправить?

Answer 1

Ваша проблема, кажется, похож на How can I list two Linkedin Follow Buttons in a Twitter Bootstrap Dropdown

Ваш модальный устанавливается:

<a data-bs-modal="'search_modal.html'" href="#" class="ng-scope" data-target="#search_modal-003" data-toggle="modal">Search</a> 
<div id="search_modal-003" class="modal hide fade ng-scope in" tabindex="-1" aria-hidden="false"> 

Снятие дисплея: нет (указать место) перед календарной вставкой будет решить вашу проблему. С кодом выше b.e. добавьте #search_modal-003 {display:block; } в свой собственный css.

Answer 2

Проблема в том, что календарь инициализируется, пока модальный вид не отображается. Если модаль был в контроллере, вы могли бы использовать $scope.$on('modal-shown', function() {});, чтобы каким-то образом запустить calendar('render');.

Я не мог определить способ обнаружения видимости. Я попробовал использовать $ watch в директиве на elm.is(':visible'), но мог только проверить его 2 раза, когда он загружен.

Answer 3

Я создал пользовательскую директиву и завод, чтобы контролировать, когда показывать и скрывать календарь. Когда calendarFactory.isVisible установлено на true, вы вызываете функцию визуализации fullCalendar.

restrict: 'A', 
    scope: true, 
    link: function (scope, element, attrs) { 
     scope.$watch(function (scope) { 
      return calendarFactory.isVisible; 
     }, function (newValue, oldValue) { 
      if(newValue === true) 
       $(element).fullCalendar('render'); 

---

Фрагмент кода переделан с производства и не может быть совершенно правильным, но идея. Вы должны использовать $scope.$emit и $scope.$on вместо $watch кстати.

Решение №2 будет ui-calandar Я использую его сейчас для нашего собственного проекта, и это может быть приятно для быстрого взаимодействия, но я бы предложил вашу собственную настраиваемую директиву для гибкости. Мы делаем такие вещи, как двойное представление календаря, локализация клиентов, пользовательский выбор фона-цвета, настраиваемый заголовок для навигации по нескольким представлениям. Если вам нужны такие вещи, я предлагаю альтернативу №1. И я действительно не знаю, как писать директивы. Так что не обескураживайте! Самая сложная часть будет получать FullCalendar для динамического отображения.

Answer 4

Используйте функцию setimeout для задержки загрузки календаря, после чего она будет работать.

Answer 5

Я столкнулся с той же проблемой с закладкой фундамента. Где мой календарь был во второй вкладке.То, что я сделал, когда пользователь нажимает на вкладку, которую я имитировал «Сегодня», нажимает кнопку setTimeout с минимальной задержкой. Это решает мою проблему

Answer 6

Просто добавьте еще один ответ на этот вопрос. Я использовал fullcalendar на вкладке начальной загрузки. Для того, чтобы сделать календарь, я добавил:

$('a#id-of-tab').on('shown.bs.tab', function (e) { 
    $("#the-calendar-container").fullCalendar('render'); 
});