Create a 2020 Calendar

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” :joy: )

Remix

You can make a copy of this app for yourself by clicking the remix link below:
https://x.thunkable.com/copy/cec50dce83c8b4fafcd12461c95dfd63

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 clicking the remix link below:
https://x.thunkable.com/copy/cec50dce83c8b4fafcd12461c95dfd63

6 Likes

This is a great help with what I am doing. Although, I need to be able to swap to different screens. This is vital to my app. Can anyone help me with that?

1 Like

Hello @school_project25! Welcome to the community! :sunny: :open_hands:

The block you need will be found in the Control blocks tab seen here! Also, please be sure to search the forum before posting. Many of your questions may have been answered already!

Let me know if you need any further help!

2 Likes

Okay, thanks! One last question, how could I fit this into the calendar? I need to be able to click a number and go to a different screen that has some information on it. This helps me so much! I really appreciate the it.

Sounds like you need a dynamic app for this @school_project25

Since there are 366 days this year, you don’t want to have to create 366 screens!

Here’s an example of what I mean by “dynamic” (which people also call Data Driven)

1 Like

is this code

Hi @22aamottk4 :wave:

I’m not entirely sure what you’re trying tot ask here.

Are you a new user to Thunkable? Are you interested in No Code platforms? Do you have a question about the blocks in this sample app?

Thanks!

2 Likes