Event Moved or Resized Event Handler for Now-Calendar Component

[User367757]

As a follow-up to my previous article about Data Broker Server Script for Now-Calendar Component, I wanted to provide my simple event handler for moving or resizing the events.

Since these events are from an extension of the Planned Task table, when they are moved or resized on the now-calendar seismic component, they need their start_date and end_date fields updated accordingly.

Referencing the data broker transform script, we made sure to provide the incoming date fields as UTC timestamps. This is important because the now-calendar will correctly handle the adjustable TimeZone only when the incoming events (the planned tasks) are in UTC timestamps.

Here's what to do:

1. Add the Update Record data broker to your page the now-calendar. Note there's nothing to configure on this data resource. Everything is handled in the events you pass to it.
   
   
2. Configure the now-calendar component, and open the Events panel.
   
   
3. Find the "Event Moved" event and click "Add a new event handler".
   
   
4. In the search box, type "EXECUTE" and chose the EXECUTE for your "Update Record 1" (might be a different number for you)
   
   
5. In the Event Handler preview, enter the following code and save it.

Update Record as event handler code snippet

function evaluateEvent({api, event}) {
    var startM = event.payload.newStartMoment;
    var session_tz = api.context.session.user.timeZone;
    //apply TZ from user's session (not cal context)
    startM.tz(session_tz);
    var endM = event.payload.newEndMoment;
    endM.tz(session_tz);

    var new_start = startM.format('YYYY-MM-DD HH:mm:ss');
    var new_end = endM.format('YYYY-MM-DD HH:mm:ss');

    return {
	table: api.state.table,
	recordId: event.payload.event.id,
	templateFields: "start_date=" + new_start +"^end_date=" + new_end,
	useSetDisplayValue: true
    };
}

Once this is in place, save your page and try moving (or resizing if you placed this event handler there) events on your now-calendar component - outside of the UIB.

I'm still quite new to the seismic components and UI Builder. It sort of reminds me of working in Java Swing. (way back in the day)

I welcome your questions and suggestions. Happy building!

[Jake Sadler]

Hi,

I've followed both articles and got the first one working without an issue. 

This is one does not seem to be working. I have copied an pasted the script into the Update Record script and updated the fields to work with the change request table.

Am I missing a step or some information about what needs to be passed in?

My script is below:

function evaluateEvent({

    api,

    event

}) {

    var startM = event.payload.newStartMoment;

    var session_tz = api.context.session.user.timeZone;

    //apply TZ from user's session (not cal context)

    startM.tz(session_tz);

    var endM = event.payload.newEndMoment;

    endM.tz(session_tz);

    var new_start = startM.format('YYYY-MM-DD HH:mm:ss');

    var new_end = endM.format('YYYY-MM-DD HH:mm:ss');

    return {

        table: "change_request",

        recordId: event.payload.event.id,

        templateFields: "work_start=" + new_start + "^work_end=" + new_end,

        useSetDisplayValue: true

    };

}