Как использовать gotoDate () в FullCalendar с Angular 8 - PullRequest
Новая
       8

Как использовать gotoDate () в FullCalendar с Angular 8

0 голосов
/ 23 января 2020

Я использую angular 8, и я хочу go до указанной c даты, указанной во входных данных. Я много искал, но все результаты поиска для angular -ui, angularjs, javascript, и я не знаю, как его использовать для angular 8. Я не знаю, как начать, но Я покажу, как я использую полный календарь: 

import { FullCalendarComponent } from "@fullcalendar/angular";
import { EventInput, Calendar } from "@fullcalendar/core";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGrigPlugin from "@fullcalendar/timegrid";
import interactionPlugin from "@fullcalendar/interaction";
import {
  MatDialog,
  MatDialogRef,
  MAT_DIALOG_DATA
} from "@angular/material/dialog";


@Component({
  selector: "app-home",
  templateUrl: "./home-admin.component.html",
  styleUrls: ["./home-admin.component.css"]
})
export class HomeAdminComponent implements OnInit {
  @ViewChild("fullcalendar", { static: false })
  calendarComponent: FullCalendarComponent;

  //storing the events shown in the calendar
  calendarEvents: EventInput[] = [];
  // using plugins to interact with the calendar
  calendarPlugins = [dayGridPlugin, timeGrigPlugin, interactionPlugin];
  //getting the calendar api
  calendarApi: Calendar;

  constructor( public dataholder: DataHolder) {}

  ngOnInit() {
          this.loadEvents();
  }

  ngAfterViewChecked() {
    this.calendarApi = this.calendarComponent.getApi();
  }

  //used to load the events of the calendar
  loadEvents() {
    this.calendarEvents = this.dataholder.calendarEvents; //I get the events from a service and it's working fine
    console.log("laodevents", this.calendarEvents);
    this.calendarApi.removeAllEventSources();
    this.calendarApi.addEventSource(this.calendarEvents);
  }

  //when clicking the date not the event(the white square)
  onDateClick(clickedDate: any) {
    let date = clickedDate.date;
    console.log("date:", date);
    let dialogRef = this.dialog.open(AddEventPopupComponent, {

      data: {
        date: date
      }
    });
    this.loadEvents();
  }

  //when clicking the event
  onEventClick(clickedEvent: any) {
        this.dataholder.changeSelectedEventId(clickedEvent.event.id)
  }

  //when dragging the event
  onEventRender(info: any) {
    // console.log('onEventRender', info.event.start,info.event.end );
  }
}

В html: 

<full-calendar
#fullcalendar
[plugins]="calendarPlugins"
[editable]="true"
[events]="calendarEvents"
[defaultView]="'dayGridMonth'"
[header]="{
  left: 'prev,next today',
  center: 'title',
  right: ''
  }"

[dir]="'ltr'"
[events]="calendarEvents"
(dateClick)="onDateClick($event)"
(eventClick)="onEventClick($event)"
(eventRender)="onEventRender($event)">

Пожалуйста, предоставьте мне решение или предложите другой подход, если существует. Спасибо!

1 Ответ

1 голос
/ 23 января 2020

Работало с использованием this.calendarApi.goToDate("2020-01-24"), как указано в комментарии ADyson.

...