Calendar?

Questions about Thunkable
1

Hello,

Just starting with Thunkable. I have a background in software design, have intermediate code experience and lots of experience with various tools like this one, HOWEVER:

I’m trying to generate a calendar (one month visible at a time) with nothing but the month and year name at the top, and then a grid of buttons representing the days, which simply turn on or off and get added to a database of “how many days have been selected.”

I’m not sure what a sensible way to address this is. Make a grid, fetch calendar data, autopopulate grid with buttons with a loop, or what? What’s the usual convention here? Do calendar components already exist somewhere that I can just modify?

Thanks!

2

Having worked with various no-code & low-code platforms over the last decade, including Thunkable, we have implemented calendar features for clients across different domains from booking apps to internal event management tools.

If you are looking for a basic date selection, Thunkable’s built-in Date Picker component might be all you need. It allows users to select a date, and you can easily store or act on that data. But if you’re looking for something more advanced..

  • Displaying multiple events on specific dates
  • Showing a full month-view interactive calendar
  • Allowing users to book or RSVP to an event

Then the best approach is usually to integrate a web view calendar. Here’s what we often do at Impero IT Services:

  1. Create a responsive calendar widget using tools like FullCalendar.js or TUI Calendar
  2. Host it on a lightweight web server or use a free Firebase hosting setup
  3. Embed it inside Thunkable using the Web Viewer component
  4. Use Web APIs or Thunkable Web API blocks to send/receive event data between your app and the calendar

We built a lightweight appointment scheduling module for a salon booking app, the client wanted users to view available slots and book in-app. Using a Web Viewer-based custom calendar + backend API (Google Sheets + Integromat), we delivered exactly what they needed => no custom code, no third-party paid plugin.

3

Thanks for the response!
I’m trying to make this:

image
image1125×982 56.7 KB

But for it to work, I need to generate the correct number of days each month. After that, all they need to do is be on/off and for me to get a full count of the days.

4
  1. Create a Days Database (Optional but Recommended)

Set up a local or cloud variable (or Airtable/Google Sheets) that stores:

  • Month name (e.g. “May”)
  • Total number of days
  • A list of toggled dates (to track on/off state)
  1. Use a Function to Get Days in Month

You can calculate how many days a month has by:

  • Getting the current month and year
  • Using logic like:
If month is 2 and (year % 4 == 0), then 29
Else if month is 2, then 28
Else if month in [4, 6, 9, 11], then 30
Else 31
  1. Create a List of Days Dynamically

Use a loop block to populate a list of numbers from 1 to N (based on the output above). Store this in an app variable.

  1. Display Days in a Scrollable Column/Grid

Loop through the list and create rows/columns with:

  • A Label showing the day number
  • A Button or Switch next to it for on/off toggling
  • Store toggle state in an object or data source
  1. Count Toggled-On Days

As users toggle days, update a separate counter variable. You can show this count at the bottom as a summary.

You could even color-code toggled days (green = active, red = inactive) using the set background color block dynamically based on state.