如何在 Angular 8 的 FullCalendar 中使用 gotoDate()

Question

我正在使用 angular 8，我想转到输入给出的特定日期。我搜索了很多，但所有搜索结果都是针对 angular-ui 、angularjs、javascript，我不知道如何将其用于 angular 8. 我不知道如何开始，但我会展示我使用 fullCalendar 的方式：

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)">

如果exist.Thank你！

，请提供解决方案或建议不同的方法

Answer 1

如 ADyson 评论中所述，它使用 this.calendarApi.goToDate("2020-01-24") 工作。

Answer 2

calendar.render函数：

$('.fc-toolbar-ltr').append('<button type="date-local" class="btn btn-primary" id="date_picker"><i class="fas fa-calendar"></i></button>');

$('#date_picker').datepicker({
language: "pt_BR",
dateFormat: 'yyyy-mm-dd',
pick: function(e) {
    var s = new Date(e.date); 
    alert(s);
    calendar.gotoDate(s);
    sessionStorage.setItem("datadaagenda", dia);
    $('#date_picker').val(dia);
}

如何在 Angular 8 的 FullCalendar 中使用 gotoDate()

How to use gotoDate() in FullCalendar with Angular 8

javascript

angular

fullcalendar

fullcalendar-4