How can I insert a table-like calendar in my Dash interface?

Hello, I am currently making a project organization tool in Dash, and my main goal right now is to show a table-like calendar where the rows are each project a dataframe is storing, and the columns are the weeks of the year (divided into week and weekend). This “table/calendar” should have a scroll bar to navigate through the year, and colour the table cells according to the dates and deadlines of each project (in red: weeks that the project is going to be worked, and black: the deadlines of each project).

This is a general example of what I wanna achieve:

My problem is, this is not a normal table. Tables are supposed to show labeled information, and in this one, if I want to do it correcly, I would need to point to each cell based on the date it correspond (for example, if I have a deadline the 14th of April, the weekend of the week 16 in that project would turn black), but I dont know any other way to make something like this. I found this topic where they made a heatmap calendar which looks pretty cool, but I cannot use that for my intentions.

So, how can I show in my interface a whole year, divided in weeks and weekends, scrollable and with individual independent coloured cells?

Thank you for your attention

Hi @Gatopianista
nunca vi un gato pianista :thinking:

You can use a table with data conditional:
https://dash.plotly.com/datatable/conditional-formatting

And also you can interact with any cell to change the background color or emojis:

Hello @Eduardo, thanks for your answer.

The thing is, how can I put all the weeks and weekends of a year as columns in the table? does the table automatically fit inside the html.Div of my layout?

A table can get any Pandas DataFrame, so first bild a DataFrame with each week and weekend in Pandas and then pass it to the Dash Table.

And then, after I create such dataframe, how can I point to a specific cell based on a datetime value?

If you see the example I linked, each time the user click any cell it change the background color, you can do something like this to modify directly in the table.

Another way is using dropdown into the cells with 3 options: “Free”, “Busy” and “dedline”.

Another way is to change the value of the cell and use conditional formating to reflect the backgroud color acording with the value of the cell.

I hope I understand :thinking: your question.

Thanks, it is just that I feel wrong using dataframes for this kind of application. I want to make it all configure itself automatically based on the info I already have on another dataframe. Editing the table would be a feature in the future, but for now I want to see the data I already have stored.

If you already have the information in a table you just use this information to bild the conditional format of the table, it is all done automatically.

Let me give you an example: I have an app to analyze Companies and one of the analysis is to see if some “Ratios” are good or bad, then I use data conditional to change the backgroud color depending on the information stored in the cell.

Everything is done automatically, see the Tab “Financial Reports” in the right table “Critical Variables and Ratios”
https://companyanalysis.herokuapp.com/

lol not gonna lie that app is very cool

1 Like