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:
- Grab table data
- Grab additional data from second data source
- Use a transformer/JS script to combine the data appropriately and save the finalized data
- 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 
2 Likes
@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 
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 table1.data 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 compilatontable.data 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
Hello @Jack_T , appologies for opening the ticket again .
i made the code below and it work, i set up a variable with an empty list then pass in the data as below. Only problem is when i deploy the values done show on my calendar, but when i manually run on the edit everything is visible. Also you noticed my timezone is being affected so i have to subtraact to have the right time as in table .
const data = tableCompilation.data;
let appointmentsArray = variable1.value;
data.forEach(row => {
if (row['Post Date']) {
appointmentsArray.push({
color: row.COLOR,
title: row['Compilation Name'],
start: row['Post Date']
});
}
if (row['Post Date 2']) {
appointmentsArray.push({
color: row.COLOR,
title: row['Compilation Name'],
start: row['Post Date 2']
});
}
});
variable1.setValue(appointmentsArray)
Hello @jakinda1 no worries!
I am glad you got the code working as intended when you manually run the forEach loop, are you calling/invoking the JS query block that holds the mapping data after the table data loads?
I would suggest going into the query that grabs the tableCompilation data, and at the bottom under "Event Handlers" go into the "Success" box and call the JS query to do the forEach loop!
Good catch on the time zone! the moment library can be somewhat tricky to initialize to the right time zone, but it is easy to manipulate as you did with adding and subtracting hours to get exactly what is needed.