日历仅在触发窗口中的任何元素后才在第一次加载时显示事件 [英] Calendar don't show events in first load, only after trigger any element in window

问题描述

日历在第一次加载时不显示事件. 例如，仅当我触发诸如单击按钮之类的任何事件以将视图从一个月更改为一个星期时.

Calendar don't show events in first load. Only when I trigger any event like click in button to change the view from month to week for example.

我正在使用 Angular日历6 + LINK

我的项目是在 Angular 6 中完成的.

My project is made in Angular 6.

日历不会在首次加载时显示数据，只有在触发任何事件后才会显示数据.

The calendar don't show data in first load, only after it when I trigger any event.

一切都按预期进行，因此我给Html(其中的一部分)提供了最重要的信息:在这种情况下，最重要的信息.

Everything is working as expected, so Ill give the Html (part of them) and the most important: the most important in this case.

HTML ...

<div [ngSwitch]="view">
          <mwl-calendar-month-view *ngSwitchCase="CalendarView.Month" [viewDate]="viewDate" [events]="events"
            [refresh]="refresh" [activeDayIsOpen]="activeDayIsOpen" (dayClicked)="dayClicked($event.day)"
            (eventClicked)="handleEvent('Clicked', $event.event)" (eventTimesChanged)="eventTimesChanged($event)"
            [locale]="locale" [weekStartsOn]="weekStartsOn" [weekendDays]="weekendDays" >
          </mwl-calendar-month-view>
          <mwl-calendar-week-view *ngSwitchCase="CalendarView.Week" [viewDate]="viewDate" [events]="events"
            [refresh]="refresh" (eventClicked)="handleEvent('Clicked', $event.event)"
            (eventTimesChanged)="eventTimesChanged($event)" [locale]="locale" [weekStartsOn]="weekStartsOn"
            [weekendDays]="weekendDays" (beforeViewRender)="beforeMonthViewRender($event)">
          </mwl-calendar-week-view>
          <mwl-calendar-day-view *ngSwitchCase="CalendarView.Day" [viewDate]="viewDate" [events]="events"
            [refresh]="refresh" (eventClicked)="handleEvent('Clicked', $event.event)"
            (eventTimesChanged)="eventTimesChanged($event)" [locale]="locale" >
          </mwl-calendar-day-view>
        </div>

...

TYPESCRIPT ...

TYPESCRIPT ...

import {
  Component,
  ChangeDetectionStrategy,
  ViewChild,
  TemplateRef,
  OnInit
} from "@angular/core";
import {
  CalendarEvent,
  CalendarView,
  DAYS_OF_WEEK,
  CalendarEventAction,
  CalendarEventTimesChangedEvent,
  CalendarDateFormatter
} from "angular-calendar";
import { NgbModal } from "@ng-bootstrap/ng-bootstrap";
import { Subject, Observable } from "rxjs";
import {
  isSameDay,
  isSameMonth} from "date-fns";
import { HomeService } from "../shared/service/home.service";
import { CalendarioEvento } from "../shared/model/calendario-eventos.model";
import { FormGroup, FormBuilder } from "@angular/forms";
import { CustomDateFormatter } from "../shared/service/custom-date-formatter.provide";


@Component({
  selector: "mwl-demo-component",
  changeDetection: ChangeDetectionStrategy.OnPush,
  templateUrl: "./home.component.html",
  styleUrls: ["./home.component.css"],
  providers: [
    HomeService,
    {
      provide: CalendarDateFormatter,
      useClass: CustomDateFormatter
    }
  ]
})
export class HomeComponent implements OnInit {
  @ViewChild("modalContent") modalContent: TemplateRef<any>;

  activeDayIsOpen: boolean = true;
  view: CalendarView = CalendarView.Month;
  viewDate: Date = new Date();
  locale: string = "pt-PT";
  modalData: {
    action: string;
    event: CalendarEvent;
  };
  weekStartsOn: number = DAYS_OF_WEEK.MONDAY;
  weekendDays: number[] = [DAYS_OF_WEEK.FRIDAY, DAYS_OF_WEEK.SATURDAY];
  CalendarView = CalendarView;
  listEvents: CalendarioEvento[] = [];
  evento: CalendarioEvento;
  eventsJson: string;
  filtroForm: FormGroup;
  botao: string;
  acaoPermitida: boolean;
  events: CalendarEvent[] = [];

  events$: Observable<Array<CalendarEvent<{ event: any }>>>;

  constructor(
    private modal: NgbModal,
    private homeService: HomeService  ) {}

  actions: CalendarEventAction[] = [
    {
      label: '<i class="fa fa-fw fa-pencil"></i>',
      onClick: ({ event }: { event: CalendarEvent }): void => {
        this.handleEvent("Edited", event);
      }
    },
    {
      label: '<i class="fa fa-fw fa-times"></i>',
      onClick: ({ event }: { event: CalendarEvent }): void => {
        this.events = this.events.filter(iEvent => iEvent !== event);
        this.handleEvent("Deleted", event);
      }
    }
  ];

  refresh: Subject<any> = new Subject();
  ngOnInit() {
    this.myMethodToInit();
  }

  myMethodToInit() {
    this.homeService.getAll().subscribe(data => {

      this.listEvents = data;

      this.listEvents.forEach(element => {
        var diaInicial = element.dataInicio.toString().substring(0, 2);
        var diaFim = element.dataFim.toString().substring(0, 2);
        var mesInicial = element.dataInicio.toString().substring(3, 5);
        var mesFim = element.dataFim.toString().substring(3, 5);
        var anoInicial = element.dataInicio.toString().substring(6, 10);
        var anoFim = element.dataFim.toString().substring(6, 10);
        var dataInicio = anoInicial + "-" + mesInicial + "-" + diaInicial;
        var dataFim = anoFim + "-" + mesFim + "-" + diaFim;
        let eve: CalendarEvent = {
          title: element.descricao,
          start: new Date(dataInicio),
          id: element.id,
          end: new Date(dataFim),
          actions: this.actions
        };
        this.events.push(eve);
      });
    });
  }

  dayClicked({ date, events }: { date: Date; events: CalendarEvent[] }): void {
    if (isSameMonth(date, this.viewDate)) {
      this.viewDate = date;
      if (
        (isSameDay(this.viewDate, date) && this.activeDayIsOpen === true) ||
        events.length === 0
      ) {
        this.activeDayIsOpen = false;
      } else {
        this.activeDayIsOpen = true;
      }
    }
  }

  eventTimesChanged({
    event,
    newStart,
    newEnd
  }: CalendarEventTimesChangedEvent): void {
    this.events = this.events.map(iEvent => {
      if (iEvent === event) {
        return {
          ...event,
          start: newStart,
          end: newEnd
        };
      }
      return iEvent;
    });
    this.handleEvent("Dropped or resized", event);
  }

  handleEvent(action: string, event: CalendarEvent): void {
    event.start = event.start;
    this.modalData = { event, action };
    this.modal.open(this.modalContent, { size: "lg" });
    document
      .getElementsByTagName("ngb-modal-window")
      .item(0)
      .setAttribute("id", "modal");
    document.getElementById("modal").style.opacity = "1";
  }

  addEvent(action: string, event: CalendarEvent): void {
    this.modalData = { event, action };
    this.modal.open(this.modalContent, { size: "lg" });
    document
      .getElementsByTagName("ngb-modal-window")
      .item(0)
      .setAttribute("id", "modal");
    document.getElementById("modal").style.opacity = "1";
  }

  deleteEvent(eventToDelete: CalendarEvent) {
    this.events = this.events.filter(event => event !== eventToDelete);
  }

  setView(view: CalendarView) {
    this.view = view;
  }

  closeOpenMonthViewDay() {
    this.activeDayIsOpen = false;
  }

  resetar() {}

  salvar() {
    console.log("titulo:" + this.modalData.event.title);
    console.log("start:" + this.modalData.event.start);
    console.log("end:" + this.modalData.event.end);
  }
}

...

首次加载:

发生任何事件后(例如，在周视图中单击并返回到月视图):

AFTER ANY EVENT (for example, click in week view and return to month view):

推荐答案

几个小时后就解决了问题.

Problem solved after some hours rs.

只有2个可以在component.ts中进行调整，并且可以正常工作！

Only 2 adjusts in component.ts and it works!

1º包括:封装:ViewEncapsulation.None
2º在ngOnInit内部，检索所有事件后，请使用以下命令刷新日历:this.refresh.next();

1º Include: encapsulation: ViewEncapsulation.None
2º Inside ngOnInit, after retrieve all events refresh the calendar with the command: this.refresh.next();

代码:

ViewEncapsulation.None

...

selector: "calendario-ico",
  changeDetection: ChangeDetectionStrategy.OnPush,
  templateUrl: "./calendario.component.html",
  styleUrls: ["./calendario.component.css"],
  encapsulation: ViewEncapsulation.None,
  providers: [

...

this.refresh.next();

 ngOnInit() {
    this.AtivarFormulario();
    this.homeService.getAll("", "", "").subscribe(data => {
      this.listEvents = data;
      this.listEvents.forEach(element => {
        var diaInicial = element.dataInicio.toString().substring(0, 2);
        var diaFim = element.dataFim.toString().substring(0, 2);
        var mesInicial = element.dataInicio.toString().substring(3, 5);
        var mesFim = element.dataFim.toString().substring(3, 5);
        var anoInicial = element.dataInicio.toString().substring(6, 10);
        var anoFim = element.dataFim.toString().substring(6, 10);
        var dataInicio = anoInicial + "-" + mesInicial + "-" + diaInicial;
        var dataFim = anoFim + "-" + mesFim + "-" + diaFim;
        let eve: CalendarEvent = {
          title: element.descricao,
          start: new Date(dataInicio),
          id: element.id,
          end: new Date(dataFim),
          actions: this.actions
        };
        this.events.push(eve);
      });
      this.refresh.next();
    });
  }

这篇关于日历仅在触发窗口中的任何元素后才在第一次加载时显示事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！