Is it possible to have an event in JS that fires when the value of a certain variable changes? But this variable is only in my js code, not in html. For example, i have: var x='George'; i want whenever the value of this var changes, to handle it and perform an action. Is there any possible way ? More specifically, i want in line 116 where i do

this.queryTerm.value = info.view.type; 

to be "listened" and then fire an event in order for another component to listen to this event and perform some actions.

@ggalaios 07/04/2020 
Lightning Web Component to Implement fullCalendar.io solution
This LWC will be contained in an Aura Component that will have a map with the respective Locations

import { LightningElement, wire, track, api } from "lwc";
import { loadScript, loadStyle } from "lightning/platformResourceLoader"; //In order for fullCalendar to be displayed
import FullCalendarJS from "@salesforce/resourceUrl/FullCalendarJS"; //import the static Resource!
import { NavigationMixin } from "lightning/navigation"; //Import this in order to be able to pop-up the New Event Screen
import { encodeDefaultFieldValues } from "lightning/pageReferenceUtils";
import getMyEvents from "@salesforce/apex/fullCalendarController.getEventsForCurrentUser"; //in order to call fullCalendarController Apex Class
import { RecordFieldDataType } from "lightning/uiRecordApi";

export default class FullCalendarJs extends NavigationMixin(LightningElement) {
  @wire(getMyEvents) myEvents; //@wire is used to call automatically the Apex method!
  @track eventsList = [];
  @track queryTerm = {
    value: "timeGridWeek"

  connectedCallback() {
    var targetProxy = new Proxy(this.queryTerm, {
      set: function (target, key, value) {
        alert(`${key} set to ${value}`);
        target[key] = value;
        return true;
    this.queryTerm = targetProxy;

  //Function to pop-up New Event Standard screen
  createNewEvent() {
      type: "standard__objectPage",
      attributes: {
        objectApiName: "Event",
        actionName: "new"
      state: {
        nooverride: "1"

  renderedCallback() {
      // First step: load FullCalendar core
      loadStyle(this, FullCalendarJS + "/packages/core/main.css"),
      loadScript(this, FullCalendarJS + "/packages/core/main.js")
      .then(() => {
        // Second step: Load the plugins in a new promise
          loadStyle(this, FullCalendarJS + "/packages/daygrid/main.css"),
          loadScript(this, FullCalendarJS + "/packages/daygrid/main.js"),
          loadStyle(this, FullCalendarJS + "/packages/timegrid/main.css"),
          loadScript(this, FullCalendarJS + "/packages/timegrid/main.js"),
          loadScript(this, FullCalendarJS + "/packages/interaction/main.js")
        ]).then(() => {
          // Third step: calls your calendar builder once the plugins have been also loaded
      .catch((error) => {
        // Catch any error while loading the scripts here

  initialiseFullCalendar() {
    let myVar = "timeGridWeek";
    //@ggalaios 03-04-2020 If events not null or undefined...
    if (this.myEvents) {
      let newEventList = [];
      this.myEvents.data.forEach((ele) => {
          id: ele.Id,
          start: ele.StartDateTime,
          end: ele.EndDateTime,
          title: ele.Subject
      this.eventsList = newEventList;
    const ele = this.template.querySelector("div.fullcalendar");
    console.log("ele >>> " + ele);
    var calendar = new FullCalendar.Calendar(ele, {
      customButtons: {
        myCustomButton: {
          text: "custom!",
          click: function () {
      header: {
        left: "prev,next,today,myCustomButton",
        center: "title",
        right: "dayGridMonth,timeGridWeek,timeGridDay"
      plugins: [
      events: this.eventsList,
      defaultView: "timeGridWeek",
      viewSkeletonRender: function (info) {
        alert("Change to type: " + info.view.type);
        this.queryTerm.value = info.view.type;


This is more of a general JavaScript question then Salesforce, however, you can check out this question, more specifically the Proxy response.

@track queryTerm = {
    value: "Test"

connectedCallback () {
    var targetProxy = new Proxy(this.queryTerm, {
        set: function (target, key, value) {
            console.log(`${key} set to ${value}`);
            target[key] = value;
            return true;
    this.queryTerm = targetProxy;

handleKeyUp(evt) {
    this.queryTerm.value = evt.target.value;

Unless you've already tried this in LWC and doesn't meet your needs.

  • 1
    Hi Jordan and thanks for your response. But where could i put this code snipped? If i put it inside the export default class FullCalendarJs extends NavigationMixin(LightningElement) {}, i get error and i cannot save my code – Giorgos Galaios Apr 7 '20 at 15:31
  • Hi Giorgos, setup your proxy and assign it in the connectedCallback() life-cycle function like so developer.salesforce.com/docs/component-library/tools/…, – jordan.baucke Apr 7 '20 at 15:38
  • Hi Giorgos, modify your original question with some more complete code if this doesn't work. – jordan.baucke Apr 7 '20 at 15:43
  • Hi Jordan, thank you very much for your help! I will try it out and if it doesn't work, i will update the question. Thank you again:) – Giorgos Galaios Apr 7 '20 at 15:45
  • Hi Jordan, unfortunately i cannot find solution. I update the question with my code and explain a bit what i want to do: In line 116, i change the value of the variable, and i want at this point the listener to "get" this change and then fire an event. I haven't found any solution yet, unfortunately. if you could give a piece of advice i would be grateful! Thanks :) – Giorgos Galaios Apr 8 '20 at 7:25

Not the answer you're looking for? Browse other questions tagged or ask your own question.