How to convert the Jquery Implemenation to angular 6

Question

I have a using https://github.com/nekken/ng2-fullcalendar/ below library for my calander, But there have limited options in this library, so i have used full calender api for extend to fullfill business requriements.

So here is the function Viewrender implementation function to disable previous and next months buttons when crossed future one months and previous one month.

Eg)button should be disable when current month is Nov 2018 - if user clicks on JAn 2019 next button should disable and user choose Sep 2018 previous button should disable.

I have written a logic in jquery inside angualr function , anyone convert this into angular 6 way.

onViewRender(view, element) {
    // alert(view.intervalStart);
    // alert(view.intervalEnd);
    // alert(view.start);
    // alert(view.end);
    // alert(view.title);
    // console.log(view.intervalStart); 
    // console.log(view.intervalEnd); 
    var now = new Date(); 
    var end = new Date();
    end.setMonth(now.getMonth() + 1); 

    console.log( view.start.format('MM'));//11
    console.log(view.start.format('YYYY'));//2018

    var cal_date_string = view.start.format('MM')+'/'+view.start.format('YYYY');
    var cur_date_string = now.getMonth()+'/'+now.getFullYear();
    var end_date_string = end.getMonth()+'/'+end.getFullYear();

    if(cal_date_string == cur_date_string) { jQuery('.fc-prev-button').addClass("fc-state-disabled"); }
    else { jQuery('.fc-prev-button').removeClass("fc-state-disabled"); }

    if(end_date_string == cal_date_string) { jQuery('.fc-next-button').addClass("fc-state-disabled"); }
    else { jQuery('.fc-next-button').removeClass("fc-state-disabled"); }
  }

Stackblitz Demo: demo

Answer 1

The easiest way is to use NgClass.

You create a boolean inside your controller ts code isPrevButtonEnabled and isNextButtonEnabled (class members).

In your component, you put inside your .fc-prev-button element:

[ngClass]="{ 'fc-state-disabled': !isPrevButtonEnabled }"

same thing for your Next button.

In your ts code, you simply use:

isPrevButtonEnabled = cal_date_string !== cur_date_string;

And same thing for NextButton.

Edit:

If you can't modify the component code, just use the following to retrieve the DOM element: document.getElementsByClassName("fc-prev-button");.

But beware, it might be false if the elements are not yet created in the DOM. Use in OnAfterViewInit and you should be fine.