We have an apex calendar that displays meetings; right now, they all have a generic background color (I am not actually sure how this default color is being rendered). When the user wants to add a new meeting, they simply click the calendar and input the meeting details: location, title, etc. So, location is a field that has 3 possible locations that a user can check off. Location A, location B, location C. Now, DEPENDING on which location the user checked off, I want the background color of the meeting to change. For example, user selects location A → change calendar meeting display bg color to, let's say, red.
Here's the tricky part: I cannot actually go into the javascript initialization code and document.querySelector() the element and change the bg color based on the location text. The reason I can't is because the location text is hidden (it's something that the SQL code pulls into the site behind the scenes, and it is not accessible via the DOM). Right now, the only metrics that are being shown on the meeting is the title of the meeting. This must remain as is. So yes, if i directly put the location text onto the meeting box then I could easily access the location text via the DOM. But as previously mentioned, it is not actually part of the DOM given the current setup.
Therefore, I tried to “intercept” the sql code, which is the only other method that I found available. It is also pretty valid.
In the js initialization code I did this:
function(options) {
// will be executed for every meeting that's on the calendar
options.eventDidMount = (info) => {
// const description = info.event._def.extendedProps.description → this actually contains all SQL-retrieved details in the form of html text, including the location
// use the description to change BG color
}
}
now this should work in theory, and it does. the background color does change. BUT, for some reason
adding "options.didEventMount = (info) => {}" completely removed the tooltip functionality. Hovering over the
meeting does not show the tooltip anymore. But at the same time the only way we can access the location via
js is by using options.didEventMount and actually grabbing the info argument. So, how would it be possible to actually grab the meeting details without using eventDidMount and ultimately changing the bg colors all while keeping the tooltip functionality intact?
Would appreciate any help in this matter :) Thank you!