Implementation of FullCalendar in TypeScript, inspired by https://github.com/akveo/ngx-admin/pull/1774

fullcalendar.component.ts

import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
import * as $ from 'jquery';
import 'fullcalendar';
import { OptionsInput } from 'fullcalendar';
import { FullCalendarTranslationService } from '../../../@core/utils/full-calendar-translation.service';
import { LangChangeEvent, TranslateService } from '@ngx-translate/core';
import { deepExtend } from '@nebular/auth/helpers';


const defaultOptions: OptionsInput = {
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month',
    },
    defaultView: 'month',
    firstDay: 1, //monday
    navLinks: false, // can click day/week names to navigate views
    editable: true,
};

@Component({
    template: '<div></div>',
    selector: 'ngx-calendar',
    styleUrls: ['./fullcalendar.component.css'],
    encapsulation: ViewEncapsulation.None,
})
export class FullCalendarComponent implements OnInit {
    static readonly DATE_FORMAT = 'YYYY-MM-DD';

    private _container: JQuery;
    get container(): JQuery {
        return this._container;
    }
    @Input() options: OptionsInput;
    calendarOptions: OptionsInput;

    constructor(private fullCalendarTranslationService: FullCalendarTranslationService, private translate: TranslateService) {
        this.calendarOptions = defaultOptions;
    }

    ngOnInit(): void {
        this.calendarOptions = deepExtend({}, defaultOptions, this.options);

        // tslint:disable-next-line:ban
        this._container = $('ngx-calendar');
        this.container.fullCalendar(this.calendarOptions);

        this.translate.onLangChange //Can't unsubscribe from an event emitter
            .subscribe((event: LangChangeEvent) => {
                this.loadLanguage(event.lang);
            });
        this.loadLanguage(this.translate.currentLang);
    }

    private loadLanguage(language: string): void {
        this.fullCalendarTranslationService.load(language);
        this.container.fullCalendar('option', 'locale', language); //Dynamic reload of calendar option
    }
}