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 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

17 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

hi! thanks for making this calendar app available! i was a little frustrated that it could only do 2020 so i took it as a challenge to modify it so it can create a calendar for any month for any year from 1901 to 2100.

i must make these warnings - i had to resize the width of the displayable components so the calendar looks good on the live test browser preview (beta)

i could never get it to display properly on my device (android galaxy s7) using live test!

other notes: on open, the app loads the current month and year as the initial month. i added 2 buttons in the NAVBAR to do FastBkwd and FastFwd , which adjust the the value of the year by +/- 1. I’ve changed the weekday to start with Sunday and changed the buttons from circles to rectangles. Plus, i’ve incorporated the logic to adjust to any month and any year.

below is a link to a copy of my version
https://x.thunkable.com/copy/fe035a520f8e466e01be7a3bc200f59b

thanks again for making the app available in the first place!

manny

7 Likes

I am a new user to Thunkable. Thanks for all your help anyway! Luckily, I have found another option that I think will work better. Thank you for all of your help!

1 Like

Where can I find “clearCalendar” and “makeCalendar”?

1 Like

Those sound like custom functions you will have to make. When you do, you should share them with the community!

Nice job!

3 Likes

How do I select the number 1 write on the label x “day 1”, if I select the number 2 write “day 2”. thanks.

add a label, say Label10 and change the when_any_button_click to something like this:


the contents of the button picked will show up in the label.

2 Likes

and if I get number 3 (day) I can write “day three”? tanks.

I need the month, it can be on label 11.

If you need the day spelled out then you need a routine ti convert 3 to “three”, 17 to “seven teen”, etc. - a nice programming challenge, as for month, it’s already on one of the top labels.

1 Like

Hi! Thank you for making your calendar it was very helpful. I just wanted to know if there is a way to make the buttons bigger.

Sarah

I can’t understand where the color of the empty calendar boxes is before day 1. Can you help?

go in design mode and change the numeric values of the width (and the height correspondingly) of the following components to your desired value.

buttons ButtonBack and ButtonFwd should have the same values. same with ButtonFBack and ButtonFFwd

2 Likes