Skip to content

Instantly share code, notes, and snippets.

@Scapal
Last active June 18, 2019 08:08
Show Gist options
  • Save Scapal/6e54b08b1de8c7aa6da9 to your computer and use it in GitHub Desktop.
Save Scapal/6e54b08b1de8c7aa6da9 to your computer and use it in GitHub Desktop.
Aurelia FullCalendar integration
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));
}
}
@daveyjay
Copy link

daveyjay commented Nov 28, 2017

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

@helgadeville
Copy link

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 {

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment