Angular : How to execute a function from the config renderer in the config.ts file for Bryntum Calendar?

[amit.sharma]

I have a custom configuration in the config.ts file for Bryntum Calendar where I need to run a function when a checkbox is toggled within the event renderer. Specifically, the eventRenderer is responsible for rendering events in the calendar, and it includes a checkbox that reflects whether a task is completed. The checkbox should trigger a function called isCompletedChecked when clicked, passing the eventRecord.id as an argument. Here is the code I am using:

code

  month: {
      eventRenderer({ eventRecord }) {
        const completed = eventRecord.get('completed');
        return StringHelper.xss`
          ${eventRecord.name}
          <input type="checkbox" ${completed ? 'checked' : ''}
            style="width: 15px; height: 15px; border-radius: 50%; vertical-align: middle; margin-left: 5px;"
            onchange="(ActivitiesCalendarComponent).prototype.isCompletedChecked(${
              eventRecord.id
            });"
            ${completed ? 'disabled' : ''}>
        `;
      },
    },
 

And here is the function that is supposed to be called when the checkbox is clicked:

 
 isCompletedChecked(id: number) {
    console.log('isCompeletedChecked id is', id);
  }
 

[marcio]

Hey amit.sharma,

Thanks for reaching out.

You can use eventClick event listener, and check if it was a click on the checkbox, then trigger the isCompletedChecked function with all the info in the event context, you can add the following listener

listeners: {
        eventClick: (ev) => {
            if(ev.domEvent.target.type === 'checkbox') {
                //handle checkbox click
            }
        }
    }

I adapted that to our demo here https://bryntum.com/products/calendar/examples/basic/

const calendar = new Calendar({
    // Start life looking at this date
    date : new Date(2020, 9, 12),

// 'day', 'week', 'month', etc.
mode : 'week',

// CrudManager arranges loading and syncing of data in JSON form from/to a web service
crudManager : {
    autoLoad : true,
    loadUrl  : 'data/data.json'

    // Changes can be automatically sent to your server after every change
    // autoSync : true,
    // syncUrl  : './yourEndPoint'
},

sidebar : {
    items : {
        datePicker : {
            // highlight the selected cell's week row
            highlightSelectedWeek : true
        }
    }
},
modes: {
    month: {
  eventRenderer({ eventRecord }) {
    return StringHelper.xss`
      ${eventRecord.name}
      <input type="checkbox"
        style="width: 15px; height: 15px; border-radius: 50%; vertical-align: middle; margin-left: 5px;">
    `;
    },
    }
},

appendTo : 'container',

// Features named by the properties are included.
// An object is used to configure the feature.
features : {
    eventTooltip : {
        // Configuration options are passed on to the tooltip instance
        // We want the tooltip's left edge aligned to the right edge of the event if possible.
        align : 'l-r'
    }
},
listeners: {
    eventClick: (ev) => {
        if(ev.domEvent.target.type === 'checkbox') {
            //handle checkbox click
        }
    }
}
});