Aurelia FullCalendar integration

calendar.js

import {
  inject, noView, bindable, bindingMode,
  customElement, BindingEngine, inlineView
} from 'aurelia-framework';

import 'jquery';
import moment from  'moment';
import {fullCalendar} from 'fullcalendar';

@customElement('calendar')
@inlineView('<template><require from="fullcalendar/dist/fullcalendar.css"></require></template>')
@inject(Element, BindingEngine)
export class calendar {
  @bindable weekends = true;
  @bindable dayClick;
  @bindable eventClick;
  @bindable events = [];
  @bindable options;
  @bindable view;

  subscription = null;

  constructor(element, bindingEngine) {
    this.element = element;
    this.bindingEngine = bindingEngine;

    this.subscription = this.bindingEngine.collectionObserver(this.events).subscribe( (splices) => {this.eventListChanged(splices)});
  }

  eventListChanged(splices) {
    if(this.calendar)
      this.calendar.fullCalendar( 'refetchEvents');
  }

  eventsChanged(newValue) {
    if(this.subscription !== null) {
      this.subscription.dispose();
    }
    this.subscription = this.bindingEngine.collectionObserver(this.events).subscribe( (splices) => {this.eventListChanged(splices)});

    if(this.calendar)
      this.calendar.fullCalendar( 'refetchEvents');
  }

  attached() {
    this.calendar = $(this.element);
    let eventSource = (start, end, timezone, callback) => {
      callback(this.events);
    }

    let defaultValues = {
      defaultView: this.view || 'month',
      weekends: this.weekends,
      firstDay: 1,
      dayClick: (date, jsEvent, view) => this.dayClick(date, jsEvent, view),
      eventClick: (event) => this.eventClick(event),
      events: eventSource
    }

    this.calendar.fullCalendar(Object.assign(defaultValues, this.options));
  }

}

Usage:

<calendar events.bind="events" view="agendaDay" weekends.bind="false" day-click.bind="test" event-click.bind="eventClicked" options.bind="{ eventLimit: true }"></calendar>

TODO: change calendar view when view changes.

Hi - I'm trying to get full calendar integrated with my aurelia app - I installed fullcalender:

npm install fullcalendar --save

and added your code but get an error :

Message: Maximum call stack size exceeded

Do you have a working example I could refer to?

Thanks Matt

I was not able to get this to work out of the box - I think there is a missing require tag in the inline view decorator. I added this:

<require from="fullcalendar"></require></template>

into the inline view decorator and everything worked. The complete inline view decorator line looks like this:

@inlineView('<template><require from="fullcalendar/dist/fullcalendar.css"></require><require from="fullcalendar"></require></template></template>')

Thanks

Actually, I wasn't able to get this to work with the javascript file above. I ended up translating it to Typescript and adding the require tag in my last post. Here is the entire file in case this helps anyone else out:

import {  autoinject, inject, noView, bindable, bindingMode,
    customElement, BindingEngine, inlineView} from 'aurelia-framework';
import * as $ from "jquery";
import * as moment from "moment";
import * as fullCalendar from 'fullcalendar';

@customElement('calendar')
@inlineView('<template><require from="fullcalendar/dist/fullcalendar.css"></require><require from="fullcalendar"></require></template>')
@autoinject
export class calendar {
    @bindable weekends = true;
    @bindable dayClick;
    @bindable eventClick;
    @bindable events = [];
    @bindable options;
    @bindable view;
    subscription = null;
    calendar:any;
    
      constructor(private element:Element, private bindingEngine:BindingEngine) {
        
        this.subscription = this.bindingEngine.collectionObserver(this.events).subscribe( (splices) => {this.eventListChanged(splices)});
      }

      eventListChanged(splices) {
        if(this.calendar)
          this.calendar.fullCalendar( 'refetchEvents');
      }
    
      eventsChanged(newValue) {
        if(this.subscription !== null) {
          this.subscription.dispose();
        }
        this.subscription = this.bindingEngine.collectionObserver(this.events).subscribe( (splices) => {this.eventListChanged(splices)});
    
        if(this.calendar)
          this.calendar.fullCalendar( 'refetchEvents');
      }

      attached() {
          console.log('calendar attached');
          console.log(this.element);
          console.log($(this.element));

        this.calendar = $(this.element);
        let eventSource = (start, end, timezone, callback) => {
          callback(this.events);
        }
    
        let defaultValues = {
          defaultView: this.view || 'month',
          weekends: this.weekends,
          firstDay: 1,
          dayClick: (date, jsEvent, view) => this.dayClick(date, jsEvent, view),
          eventClick: (event) => this.eventClick(event),
          events: eventSource
        }
    
        this.calendar.fullCalendar(Object.assign(defaultValues, this.options));
      }
}

I managed to make it at least start with new aurelia, modifying header in this way:

import * as $ from 'jquery';
import moment from 'moment';
import { fullCalendar } from 'fullcalendar';
import 'fullcalendar/dist/fullcalendar.css';

@CustomElement('calendar')
@noview
@Inject(Element, BindingEngine)
export class calendar {