Отображать Popover при наведении курсора на событие в fullcalendar Angular 6 - PullRequest
Новая
       17

Отображать Popover при наведении курсора на событие в fullcalendar Angular 6

0 голосов
/ 18 сентября 2018

Я использую Fullcalendar в проекте Angular 6, и я хочу отображать всплывающее окно при наведении курсором мыши на событие

С этим кодом у меня нет проблем в моей консоли, но также ничего не отображается

Файл TS: 

    PopOver(elem): void {
    console.log(elem);
    $(elem.element).popover({
      title: 'the title',
      content: 'qsdqsd',
      placement: 'top',
      trigger: 'manual',
      delay: { show: 200, hide: 100 },
      animation: true,
      container: '#calendar',
      html: true,
    }).popover('show');
  }

Файл HTML: 

 <div *ngIf="calendarOptions">
        <ng-fullcalendar #ucCalendar
                         [options]="calendarOptions"
                         (eventResize)="draging($event)"
                         (eventStartEditable)="true"
                         (eventDrop)="draging($event)"
                         (eventMouseover)="PopOver(this)"
                         (eventMouseout)="undisplay()"
        ></ng-fullcalendar>
      </div>

Я испробовал множество других решений, но ничего не получил Пожалуйста, мне нужен ответ, это важно для меня

1 Ответ

0 голосов
/ 04 ноября 2018

Я знаю, что этот пост опоздал, но я нашел обходной путь для этого.

Мой HTML 

<div *ngIf="calendarOptions">
          <ng-fullcalendar #ucCalendar [options]="calendarOptions" (eventClick)="eventClick($event.detail)" (eventDrop)="updateEvent($event.detail)"
              (eventResize)="updateEvent($event.detail)" (clickButton)="clickButton($event.detail)"></ng-fullcalendar>
      </div>

Мой Typescript для метода eventClick

eventClick (model: any) {

<code>var popTemplate = [
    '<div class="popover" style="max-width:600px;" >',
    '<div class="arrow"></div>',
    '<div class="popover-header">',
    '<button id="closepopover" type="button" class="close" aria-hidden="true">&times;</button>',
    '<h3 class="popover-title"></h3>',
    '</div>',
    '<div class="popover-content"></div>',
    '</div>'].join('');
    $('.popover').not(model.jsEvent.currentTarget).popover('hide');
    $(model.jsEvent.currentTarget).popover({
        title: 'the title',
        content: function () {
            return "This <em>rich</em>  <pre>html
содержимое идет внутрь popover ";}, template: popTemplate, размещение: 'left', html: true, триггер: 'click', анимация: true, контейнер: 'body'}). popover ('show');

}

Надеюсь, это кому-нибудь поможет

...