Multiple datasource for calendar view

i have a calendar that gets information from a table on retool, it works perfectly well. However, I want to display information from a second data source or from a second column on the same table but have the same title but just different times without duplicating a row.

Hello @jakinda1!

This should be possible. I would recommend looking at this thread in the forum. There is a youtube video at the bottom that goes over a similar situation.

The steps in the process would be:

  1. Grab table data
  2. Grab additional data from second data source
  3. Use a transformer/JS script to combine the data appropriately and save the finalized data
  4. Set the source of the table to be the result of the transformer/JS script

For the part of the question where you mention "second column on the same table" could you elaborate more on this with an example? Grabbing data from the table and changing it or renaming the column name can be done with a transformer as well!

just today I ran into needing to rename a key in an object, I have no idea if this is helpful but i saw @Jack_T mentioned changing or renaming a column:

delete Object.assign(myObject, {[newKey]: myObject[oldKey] })[oldKey];

nifty one liner. for the curious ones, it uses object destructuring.... and some funky js syntax that I don't think I'll ever use anywhere else unless I get to the point where I can read js like I'm Neo reading matrix code :clown_face:


@bobthebear Very nice one liner. I haven't seen that one before!

So the Object.assign() is going to mutate the old myObject....and then in the outer layer it keys in to the newly mutated object via [oldKey] and uses the delete key word to remove the old key and its value :face_with_monocle: :exploding_head:

With the inner {} taking the new key and having it point to the value of the old key. Crazy stuff!

1 Like

hello @Jack_T , let me provide a better example for context. I have a table with name, and appointment, and apoointment2 as columns. I am currently only able to display appointment 1 information on the calendar component , I want to also be able to display appointments 2 information that is on a later date with the same name. I don't want to have duplicate rows of names with appointments , hence two column appointment 1 and 2

@jakinda1 Thank you for the example.

How are you mapping the appointment 1 column data from your table into your calendar component currently?

A screen shot might be helpful for explaining this, if you can inspect the calendar I should be able to see more.

You should be able to edit the Data Source for the calendar component to get all the appointments that you want for the calendar to parse through and render.

The data source can be set to a query, which you could set to the same query that is grabbing the table's data.

If you are not already doing that, you can use the FX button which is hidden but appears on mouse over next to the Data Source in the calendar inspector to then grab/create a data object of all the appointment you want to have the calendar take in and render.

This would be recommended if setting the query as the source does not work how you want it to.

You can do some javascript to grab from the the information you want to map over to grab the data from the columns you want to have in an iterable format.

You can read more about the calendar component and how it wants the data formatted for it to render here!

Hello @Jack_T , i am mapping the table data for the name and date as in the first screenshot which I have attached below, so I want to have same compilation name but now the postdate comes from column post date 2 for example. I will try to use javascript to create a data object.

Thank you for the information @jakinda1!

I see you have set Start to {{ item['Post Date'] }} which is what will appear on the calendar component.

I cannot see what the results of your query for looks like, but I would guess that item['Post Date'] is the values appearing in column 1.

You would have to key in with a different value to grab the 'column 2' appointments, which would prevent you from getting 'column 1' appointments.

So the solution to this would be to flatten out/transform your data so that the appointments are split up and not both saved in a single row/data item in the data source the map is iterating over.

You need to grab the data from column 2 and combine it with the column 1 data, for example an array of objects, where each object is an appointment.

It will be ok to have as you said 'repeated rows' where the same name has two rows for their first and then their second appointment. Each row is an object for one appointment with a name and a date property.

The calendar will then have its Data source set to this array of objects, and will be able to iterate over every appointment and display each appointment.

Hope this helps!

1 Like