Calendar event show JSON of details

💬 App Building
1

All of the additional properties (as well as the required id field) show as a JSON string. Should be better formatted I would think?

Also, is there an easy way to append a Retool value to the Events JSON like this:

[{
  id: 1,
  employee: "Brad Mathews",
  title: 'Standup',
  url: "OrderDetailPage?" + {{qrySelect.data.id[0],
  start: {{ moment().hours(7).minutes(0).subtract(1, 'hour') }},
  end: {{ moment().hours(7).minutes(0) }}
 ...

It doesn't seem to like this at all: "OrderDetailPage?" + {{qrySelect.data.id[0]}},

image

2

Also the info box gets cut off:

image

3

Hey there!

The calendar component is not my personal favorite component. The events are definitely getting cut off and the properties (like id) aren't being displayed well, and I'll make sure to pass this along to the components team.

The best way to append to the events would probably be to use a temp state + JS query to grab the current temp state, append the new object, then set the temp state to this new value! Would something like this work for you?

3584×1722 704 KB


4

@victoria,

I am already getting the calendar filled with a jsTransformer from my database table (it's read only display.) Easy peasy. But you gave me the idea to disable Show Event Preview and have a Text component display the selectedEvent data (#### Event Details {{calendar1.selectedEvent.extendedProps.jobName}}). It works with one big caveat: It seems extendedProps are not supported.

So with my transformer that looks like this:

d = formatDataAsArray({{qryJobsSelect.data}})
var outArr = []
d.forEach((a) => {
  outArr.push({
    id: a.EmplID,
    title: a.JobName + '- ' + a.EmplName,
    extendedProps: {
    	jobName: a.JobName,
    	emplName: a.EmplName,
    	link: "https://company.retool.com/editor/EditJob#jobId=" + a.JobID
    },
    start: a.JobDate.substring(0,10) + " " + a.StartTime,
    end: a.JobDate.substring(0,10) + " " + a.EndTime
  })
})
return outArr

Retool can't see anything other than id, title, start. end (and url if I include it). And yes I initially tried just adding the props to the root event.

So I guess I need to have two objects, fullEvents temp var as you suggest and the second slimEvents populating the calendar. Set up a JSON SQL query to watch selectedEvent and trigger a query to search the fullEvents for the selectedEvent.id and set that element to another temp var. Then use that temp var to populate the event card. I can use the new Link component in the card to go to the full event details app!

1 Like
5

Retool can't see anything other than id, title, start. end (and url if I include it). And yes I initially tried just adding the props to the root event.

I am running into the same issue. I was able to work around this by making the id the index of the array and referencing the array item directly to get extendedProps.