CODEWITHSUNDEEP
aurelia
LStarky
LStarky

Reputation: 2777

Update calendar when Aurelia shared state variable changes

I am using FullCalendar and want to update the contents each time a global variable "lang" changes.

My shared state Config class (src/common/config.js) is as follows:

export class Config {
  static lang;
  static sch;
  static qtr;

  constructor() {
    this.lang = 'es';
    this.sch = 1;
    this.qtr = 1;
  }

  getLang() {
    return this.lang;
  }
  setLang(lang) {
    this.lang = lang;
  }
}

My Events class (src/events/events.js) is as follows:

import { inject } from 'aurelia-framework';
import { Config } from '../common/config';
import { fullCalendar } from 'fullcalendar';

@inject(Config)
export class Events {

  constructor(config) {
    this.config = config;
  }

  attached() {
    $('#eventscalendar').fullCalendar({
      events: 'http://localhost:8080/api/v1/events-date-range?lang=' + this.config.getLang()
    });
  }
}

Basically, I want to update the events URL with the new language and reload the events (using fullCalendar('refetchEvents') each time Config.lang changes. How do I do this in Aurelia, without having to make an explicit call from Config (since presumably a change of language could have implications in many different parts of the application)? I'm thinking some sort of event creation / listener?

Upvotes: 0

Views: 219

Answers (1)

Ashley Grant
Ashley Grant

Reputation: 10887

I would use the EventAggregator to publish an event whenever setLang is called. You can subscribe to the event in the constructor of the Events class.

There's some documentation here: http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/cheat-sheet/10

Upvotes: 4

Related Questions