События, не появляющиеся в угловом календаре пользовательского интерфейса - PullRequest
Новая
       29

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

0 голосов
/ 11 января 2019

Я использую Angular UI Calendar в моем приложении. Все работает нормально. Календарь отображается, но события не отображаются в календаре.
Вот мой код: - 

$timeout(function() {
    $scope.events = [
        {
            title: 'Long Event',
            start: '2019-01-10'
        }
      ];
    $scope.eventSources = [$scope.events];
    return $scope.uiConfig = {
      calendar: {
        height: 450,
        editable: true,
        header: {
            left: 'title',
            center: '',
            right: 'today prev,next'
         }
      }
    };
   },5000);

Здесь я использую таймаут, потому что хочу, чтобы загрузка календаря была задержана.
Это мой HTML-код: - 

<div ui-calendar="uiConfig.calendar" class="span8 calendar" ng-model="events" calendar="myCalendar" style="height:700px;"></div>

В документах предлагается указывать массив с именем eventSources. Я дал это, но ничего не работает. Пожалуйста, подскажите, что я делаю не так.
Вот скриншот: -

enter image description here

1 Ответ

0 голосов
/ 11 января 2019

Вы инициализируете переменные области действия примерно через 5 секунд, ваш календарь получает переменные undefined и, следовательно, если вы проверяете консоль, есть ошибки. Вам нужно только загрузить календарь, только когда эти переменные появятся defined.

Итак, вам нужно 

ng-if="uiConfig!==undefined"

если эти переменные определены, то только картинка будет отображаться.

Ваш div должен выглядеть так 

 <div class="span8" ng-if="uiConfig!==undefined">
          <div class="calendar" ng-model="eventSources" calendar="myCalendar1" ui-calendar="uiConfig.calendar"></div>
  </div>

это обеспечит инициализацию, когда эта переменная имеет некоторые значения.

Демо

...