Question

我在角度6中使用的是全日历版本：3.6.1，并且我想在mouseOver事件发生时显示popOver 我在component.html中没有添加（eventMouseOver）时出现的问题是

这是我的calendar.component.ts代码

import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
import {CalendarComponent} from 'ng-fullcalendar';
import { Options } from 'fullcalendar';
import {CompanyService} from '../company/company.service';
import {Person} from '../person';
import { Event } from '../event';
import {style} from '@angular/animations';
import {validate} from 'codelyzer/walkerFactory/walkerFn';
import {NgbPopoverConfig} from '@ng-bootstrap/ng-bootstrap';
import * as $ from 'jquery';
@Component({
  selector: 'app-calendars',
  templateUrl: './calendars.component.html',
  styleUrls: ['./calendars.component.css']
})
export class CalendarsComponent implements OnInit {

  @ViewChild(CalendarComponent) ucCalendar: CalendarComponent;
  calendarOptions: Options;
  event: Event;
  events = [];
  person: Person;
  persons = [];
  elemChecked = [];
  color;
  idsStr = '';
  eventOut;
  modal = false;
  SelectedEvent: Event;
  selectedPerson: Person;
  constructor(private Service: CompanyService,private config: NgbPopoverConfig, private element: ElementRef) {
    config.placement = 'right';
    config.triggers = 'hover';
  }

  ngOnInit() {
  this.getDataFromServer();
  setTimeout(() => {
    this.createCalendar();
  }, 500);

  }

  getDataFromServer() {
    this.Service.getPerson().subscribe(data => {
      data.forEach((value => {
        this.person = {
          id: value.id,
          name: value.name,
          color: value.color,
          event: ''
        };
        this.persons.push(this.person);
      }));
      data.forEach((value => {
        let length = value.event.length;
        for (let i = 0 ; i < length; i++) {
          this.event = {
            id: value.event[i].id,
            title: value.event[i].title + '-' + value.name,
            start: value.event[i].start,
            end: value.event[i].end,
            color: value.event[i].color,
            person: value.id,
            ngbPopover: 'qsdqsd'
          };
          this.events.push(this.event);
        }
      }));
      this.persons.forEach((value => {
        this.elemChecked.push(value.id);
      }));
    });

  }
  createCalendar() {
    this.calendarOptions = {
      editable: true,
      eventLimit: true,
      header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay,listMonth'
      },
      selectable: true,
      events: this.events,
      slotEventOverlap: false,
    };
  }

  Color(elem) {
    this.color = null;
    this.persons.forEach((value => {
      if (+value.id === +elem.target.id) {
         this.color = value.color;
      }
    }));
    if (elem.target.checked) {


      elem.target.parentElement.style.background = this.color ;
      this.elemChecked.push(+elem.target.id);
      elem.target.style.marginRight = '500px';

    } else {

      for (let i = 0; i < this.elemChecked.length; i ++) {
        if (+this.elemChecked[i] === +elem.target.id) {
          this.elemChecked.splice(i, 1);
        }
      }
      elem.target.parentElement.style.background = '#DCDCDC';
      console.log('grey');
    }
    this.updateData(this.elemChecked);

  }
  updateData(ids) {
    this.events = [];
    this.idsStr = '';
   ids.forEach( (value => {
     this.idsStr = this.idsStr + value + ';' ;
   }));
   this.Service.getEventsByIds(this.idsStr).subscribe(data => {
     this.events = data;

     data.forEach((value => {
      for (let i = 0; i < value.length; i ++) {
        this.event = {
          id: value[i].id,
          title: value[i].title + '-' + value[i].person.name,
          start: value[i].start,
          end: value[i].end,
          color: value[i].color,
          person: value[i].person.id
        };
        this.events.push(this.event);
        this.ucCalendar.renderEvents(this.events);
      }
     }));
   });


  }
  EventClick(calEvent, jsEvent, view, resourceObj, element) {

    calEvent.target.style.width = '1px';
    this.SelectedEvent = {
      title: calEvent.detail.event.title,
      start: calEvent.detail.event.start,
      end: calEvent.detail.event.end,
      color: calEvent.detail.event.color,
      person: calEvent.detail.event.person
    };
    this.persons.forEach((value => {
      if (value.id === calEvent.detail.event.person) {
        this.selectedPerson = {
          name: value.name
        };
      }
    }));
    this.modal = true;
  }

  closeModal() {
    this.modal = false;
  }
  MouseOver(event) {
  console.log(event);
  }
  EventRender(event) {
   this.ucCalendar.eventMouseOut.emit(console.log('qsdqs'));
  }
}

calendar.component.html

    <div *ngIf="calendarOptions">
  <ng-fullcalendar #ucCalendar [options]="calendarOptions"
                   (eventClick)="click($event)"
                   (eventMouseOver)="MouseOver($event)"
                    ></ng-fullcalendar>
</div>

我知道这是该topic的重复项，但没有答案。

Answer 1

您可以在calendarOptions中将处理程序添加到fullcalendar的eventMouseover事件中。参数可以在fullcalendar documentation中看到。

示例：

createCalendar() {
    this.calendarOptions = {
        editable: true,
        eventLimit: true,
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay,listMonth'
        },
        selectable: true,
        events: this.events,
        slotEventOverlap: false,
        eventMouseover: (event, jsEvent, view) => this.eventMouseOver(event, jsEvent, view)
    };
}


eventMouseOver(event, jsEvent, view) {
    // TODO: Open popover with event data
}

Answer 2

您可以捕获从控件发出的CustomEvent：

html

<ng-fullcalendar ... (eventMouseover)="MouseOver($event)"
                                ^
                             lowercased o

component.ts

MouseOver(event) {
  console.log(event.detail);
}

eventMouseOver fullCalendar Angular 6无法正常工作

2 个答案: