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
    }
}

You can then use it like this
<ngx-calendar [options]="calendarOptions"></ngx-calendar>

Where calendarOptions is defined by

calendarOptions: OptionsInput = {
  events: this.eventsCallback,
  selectable: true, //You override any property here
};

but mine generates a demo data dynamic, and don't forget to implement same styles.

@codex-corp yes of course, which is fine for ngx-admin. My code here is fed by an API that retrieves actual events, and is meant more as a reusable component than just a demo. I just wanted to make this public if it can ever help anyone out :)

@dizco can we also have the file full-calendar-translation.service?

cheers!

Hey @Conrekatsu, I guess I never saw your message.... I'd say my FullcalendarTranslationService is quite poorly written, but I haven't revisited it, so use at your own risks:

import { Injectable } from '@angular/core';

declare const require: any;

//TODO: Waiting for Dynamic Import in ES6 : https://github.com/tc39/proposal-dynamic-import
//This solution is far from ideal because we need to hardcode every possible import. It does NOT scale to more languages automatically.

@Injectable()
export class FullcalendarTranslationService {
  private loaded: string[] = [];

  public load(language: string): void {
    if (language === 'fr' && !this.isLoaded('fr')) {
      require('fullcalendar/dist/locale/fr.js'); //Require does not support dynamic strings
      this.loaded.push('fr');
    }
    //Else, fail silently (fullcalendar will default to 'en')
  }

  private isLoaded(language: string): boolean {
    return this.loaded.indexOf(language) !== -1;
  }
}

Are there any plans to put this in to ngx-admin?

Hey @beriniwlew, I'm not affiliated with Akveo. You should ask that question on the ngx-admin repo. Theres a link to a specific PR at the top of this gist

Thanks, I'll check on it @dizco