CODEWITHSUNDEEP
javascriptangularfullcalendarfullcalendar-4
AliAb
AliAb

Reputation: 569

How to use gotoDate() in FullCalendar with Angular 8

I'm using angular 8 and I want to go to a specific date given by input. I searched a lot but all search results are for angular-ui , angularjs, javascript, and I don't know how to use it for angular 8. I dont know how to start but I will show the way I'm using the 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 );
  }
}

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

Please provide me with a solution or suggest a different approach if exist.Thank You!

Upvotes: 2

Views: 3848

Answers (2)

Leonardo Xavier
Leonardo Xavier

Reputation: 1

calendar.render function:

$('.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);
}

Upvotes: -3

AliAb
AliAb

Reputation: 569

It worked using this.calendarApi.goToDate("2020-01-24") as mentioned in ADyson comment.

Upvotes: 4

Related Questions