CODEWITHSUNDEEP
angulartypescriptfullcalendar
GolfBravo
GolfBravo

Reputation: 1127

Get the selected month in fullcalendar.io Angular typescript

I have already tried using jquery using the below code,

  getMonth(){
    const date = $('#calendarOptions').fullCalendar('getCalendar');
    const monthInt = date.getMonth();
    // you now have the visible month as an integer from 0-11
 }

however I get an error message which says

Property 'fullCalendar' does not exist on type 'JQuery<HTMLElement>'.ts(2339)

Is there a way to directly access which month I am currently on using typescript?

I have also tried this

getMonth(){
  const calendarApi = this.calendarOptions.getApi();
  const currentDate = calendarApi.view.currentStart;

  console.log(currentDate); // result: current calendar start date
}

However, it says Property 'getApi' does not exist on type 'CalendarOptions'

Upvotes: 0

Views: 1407

Answers (2)

GolfBravo
GolfBravo

Reputation: 1127

Add this code below

    setTimeout(() => {
         const calendarApi = this.calendarComponent.getApi();
         const currentDate = calendarApi.view.currentStart;
      
         console.log(currentDate);
    }

This allows the calendar to load first and then you can access the getApi(). otherwise you will end up with a ERROR TypeError: Cannot read property 'getApi' of undefined error message.

Upvotes: 0

Mike
Mike

Reputation: 1375

Try the example form Calendar API section (almost the last one) of https://fullcalendar.io/docs/angular

Upvotes: 2

Related Questions