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

问题描述

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

我正在使用 Angular Calendar 6 +

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

解决方案

几个小时后问题解决了.

在 component.ts 中只调整了 2 处就可以了！

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

代码:

ViewEncapsulation.None

...

选择器:calendario-ico"，changeDetection: ChangeDetectionStrategy.OnPush,templateUrl: "./calendario.component.html",styleUrls: ["./calendario.component.css"],封装:ViewEncapsulation.None，供应商: [

...

this.refresh.next();

 ngOnInit() {this.AtivarFormulario();this.homeService.getAll("", "", "").subscribe(data => {this.listEvents = 数据；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;让前夕:CalendarEvent = {标题:element.descricao，开始:新日期(dataInicio)，id: element.id,结束:新日期(dataFim)，动作:this.actions};this.events.push(eve);});this.refresh.next();});}

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.

I'm using Angular Calendar 6 + LINK

My project is made in Angular 6.

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

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 ...

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);
  }
}

...

FIRST LOAD:

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

解决方案

Problem solved after some hours rs.

Only 2 adjusts in component.ts and it works!

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

Code:

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屋！