If you’re taking part in our latest Hackathon then you might like to include a calendar in your app for you users to keep track of their goals and progress.
Inspiration
A while ago (2018?!) Simone Giertz and her team made this really cool hardware calendar that you can use for tracking habits.
Originally it was just a way to give herself a tiny reward for meditating every day, but it eveolved into a crowd-funding success, raising over $600,000. My goal for this app was to create something similar in app-form. (Please send your crowd funding donations to “Domhnall O’Hanlon, c/o The Thunk Tank, San Francisco, USA” 
)
Remix
You can make a copy of this app for yourself by opening the project page below and clicking on “Edit Project”:
https://x.thunkable.com/projectPage/5e39529c1892dca22837e0cb
Design
The design of this app uses 1 row and 1 button (called PrototypeRow and PrototypeButton) in conjunction with the Any Component blocks to quickly create the grid layout for the calendar.
Each day is a button so that you can attach an activity to it. In my example I’m just changing the background colour, but you can do pretty much whatever you like here.
Blocks
Since this app uses the Any Component blocks it’s a little more complex, but this 366 day calendar has less than 150 blocks, so if you take a little time to study it, hopefully it will make sense.
The first group of blocks (and the area where there’s most room for improvement) are the variables to work out things like month name, month number, length of the month etc
When the screen open a prototype week is created in the (hidden) prototype row and then there’s a test to see whether or not we’re in “debug mode”. This was particularly useful when developing and testing the first version, and if I ever revisit or update this project it will be useful again in the future, so definitely something that I’d recommend you try in your own apps too.
There are two buttons and a label that the top of the screen, collectively referred to as the “NavBar” that are used to move backwards and forwards through the months. (Note, this app is only for 2020!)
These blocks make this navigation possible.
After some quick calculations, 6 weeks are added to Column1 (still hidden) using the count with loop. A for loop is used to set the stating day of the month and to remove any extra days left at the end of the month.
Once this is done, the loading icon is hidden and all the days are displayed on screen.
Finally, once the calendar is displayed on the screen we can actually do something with it. If one of the NavBar buttons is clicked we ignore it, but if any of the other buttons (the days of the month) are clicked then we change the background colour.
Next Steps
I think the most obvious “next step” would be to have the buttons toggle back to their original colour when pressed. Feel free to share you approach to doing this in the comments below if you get it working.
I still haven’t done any error handling so you’ll run into trouble if you try to move back to December 2019 or January 2021.
I’m know there’s an API that could be used to get the start day and the month length. There might even be some formula that you could use if you want the whole thing to be completely offline? If you know of one please let me know.
Remix
You can make a copy of this app for yourself by opening the project page below and clicking on “Edit Project”:
https://x.thunkable.com/projectPage/5e39529c1892dca22837e0cb
