calendar component in UI builder -
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
04-04-2023 02:20 AM
I want to use calendar component to show or work exactly behavior of google calendar. need to able to create events same as google calendar.
has anyone implemented?
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
04-05-2023 12:41 AM
Hello,
I am implementing it currently so I can help you on it. What do you want to know about that ?
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
04-13-2023 10:26 AM
Hello,
I need to move the event from 1 date to other
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
04-20-2023 12:31 AM
Hello, I will try to explain you how I did, maybe there is better solution but it works, and it is just a POC so I have to optimize this solution.
First you have to set your events as you need in the component configuration.
After that you need to create an event on this calendar for "Event moved" or "Event resized".
Now, there is what I did.
I created an UI Builder Client Script "Update event" that format my JSON data to update.
I am using "assigned_to because" I also need to change the assignment of the event.
There is two case between "moved" and "resized" because for each case it is not the same date fields used in the event.
function handler({
api,
event,
helpers,
imports
}) {
var json = {
"data": [{}]
};
if (event.name == "NOW_CALENDAR#EVENT_MOVED") {
if (event.payload.event.group != event.payload.group) {
json.data[0].assigned_to = event.payload.group;
}
if (event.payload.event.startMS != event.payload.newStartMS) {
json.data[0].expected_start = event.payload.newStartMoment._d.toISOString();
}
if (event.payload.event.endMS != event.payload.newEndMS) {
json.data[0].due_date = event.payload.newEndMoment._d.toISOString();
}
} else {
if (event.name == "NOW_CALENDAR#EVENT_RESIZED") {
if (event.payload.event.startMoment._i != event.payload.event.startMS) {
json.data[0].expected_start = event.payload.newStartMoment._d.toISOString();
}
if (event.payload.event.endMoment._i != event.payload.event.endMS) {
json.data[0].due_date = event.payload.newEndMoment._d.toISOString();
}
}
}
json.data[0].sys_id = event.payload.event.id;
json.data[0].table = event.payload.event.table;
api.data.staffing_data_broker_1.execute(json);
}
My last line will call a Data broker that I created. A data broker is used to perform some server script action for UI Builder. It is stored in "sys_ux_data_broker_transform" table.
Take a look à this link to use data broker : https://www.servicenow.com/community/next-experience-articles/how-to-fix-the-quot-acl-failed-for-dat...
My Data broker looks like that
And this is my script part (I have to optimize that)
function transform(input) {
var start_date = input.data[0].expected_start;
var end_date = input.data[0].due_date;
var sys_id = input.data[0].sys_id;
var table = input.data[0].table;
var assigned_to = input.data[0].assigned_to;
var resultQuery = "";
if(assigned_to){
resultQuery += "assigned_to="+assigned_to;
}
if(start_date){
resultQuery != "" ? resultQuery +="^" : resultQuery;
resultQuery += "expected_start="+convertDateFormat(start_date);
}
if(end_date){
resultQuery != "" ? resultQuery +="^" : resultQuery;
resultQuery += "due_date="+convertDateFormat(end_date);
}
var result = {};
result.sys_id = sys_id;
result.table = table;
result.query = resultQuery;
return result;
function convertDateFormat(dateToConvert){
// Getting the date to convert
var dateString = dateToConvert;
// Convert the date to Date object
var date = new Date(dateString);
// Splitting date elements
var year = date.getUTCFullYear();
var month = ('0' + (date.getUTCMonth() + 1)).slice(-2);
var day = ('0' + date.getUTCDate()).slice(-2);
var hours = ('0' + date.getUTCHours()).slice(-2);
var minutes = ('0' + date.getUTCMinutes()).slice(-2);
var seconds = ('0' + date.getUTCSeconds()).slice(-2);
// Format the date as needed
var formattedDate = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
// returning date
return formattedDate;
}
}
Once my data is returned we can go to UI Builder and create events for data broker succeeded
The first is to execute a new Client Script to update the task.
function handler({api, event, helpers, imports}) {
api.data.update_tasks.execute({
table: event.payload.data.output.table,
recordId: event.payload.data.output.sys_id,
templateFields: event.payload.data.output.query,
useSetDisplayValue: false
});
}
And after refresh the events data resource, to update the events in the calendar.
That is my way to do that, I did it like this because I not found real solution for this, so I discovered UI Builder for my POC. There is some thing to change on my code but it works for now. If you have any other questions or something you did not understand from my replies, you can ask me.
Thanks