plot.ly dash is a great framework for building dashboards – but that’s not the only use for it. I tend to use plot.ly dash for all my web-app needs – mostly because I haven’t hit a wall yet where I can’t achieve something using plot.ly dash that I can be using another framework.

I recently got to thinking whether I could build a calendar using a DataTable in dash. Why not? If I can get some set of dataframes in the shape of a calendar then I could display it in dash and use all the nice features of dash_table.DataTable to format it.

First we need a dataframe in the shape of a traditional calendar that I can index by year and month. I will then display this calendar on a plot.ly dash app in Part 2.

Part 1: Calendar with pandas

Initialise the dataframe with the dates and use pandas .dt accessors to get relevant information:

Great! Now we can use the unstack method to pivot the week_day level of the index so we get something that looks like a traditional calendar. I want to keep the initial dataframe as a meta table and display the unstacked version so I will keep both.

Doing this I realised something was wrong with the last week of December 2021 and first week of January 2022. The first week of January seems to come out as week number 52 instead of 1.

After some research I learned that as part of the ISO date and time standard that pandas uses, the first week of the year is the week with the first Thursday of the year. Which means the first week of January is actually the 52nd week of the year as it doesn’t have a Thursday in it. We can fix this by changing that week’s week number to 0 and pretend the week numbers start from 0 instead of 1.

Now it’s much better. I also want to display if a day is a public holiday in England in my final calendar. I will use the python holidays library to achieve this.

uk_holidays is a dictionary so we get a boolean column. You can also get the names of the holidays by using the .get method.

Finally I want my calendar to have the weekday names instead of weekday numbers so I will rename the columns

Looks more like a calendar now. We need to wrap everything in a function, format it nicely and we’ll use this in Part 2. See you next time 👋

By Zeynep Bicer