Calendar Month View show Today

[Adam_Baney]

I am looking for a way to make the Calendar Component highlight or indicate todays date. The same functionality that is present in the day and week views would be fine.

I read through the docs, but it appears that todays date is built in. At least I can't find a place to set it. I did set the default date to today, but that had no effect. Is there a way to accomplish this?

I am using the calendar component to display upcoming shipping information. The default view that we are used to using is the month view. We are on the cloud.

[ZeroCodez]

Hello @Adam_Baney

In Retool's calendar, you can set specific dates and times for particular events. This allows you to schedule events in your calendar according to your preferences.

Calendar | Retool Component Library

To display today's date, you can use the following calendar input:

Calendar Input | Retool Component Library

[Adam_Baney]

I appreciate the attempt at trying to solve my problem @ZeroCodez. I didn't initially understand your answer so it took me some time to respond. Unfortunately, my question must have been confusing because your answer doesn't seem to fit my needs.

I am using the Calendar Component. My users navigate to this page to review the schedule. When they do, I need the Calendar Component to indicate todays date.

I see that the calendar input component highlights todays date by default, but that doesn't help me. I need the calendar component to do that.

[ZeroCodez]

Hey @Adam_Baney

I understand what you're saying, but I don't think the calendar component provides that functionality. It only highlights dates based on events. You can add the event in it and pass the today date in it.

[PadenM]

I am looking for a the same functionality i believe. I would think in any basic calendar, todays date is indicated somehow. However, on retool calendar you can't tell what todays date is

similar to the example below, i would like the calendar component to highlight the date or do something to show which day is today

Wasn't sure if i put this here or in the request feature section..

[Paulo]

Hi @Adam_Baney, welcome to the forum!
We created the internal feature request to highlight today's date on the Calendar component the same way this is possible on the Calendar Input component. We'll update you here with any news from our devs.

[Brad_Fontanese]

Any movement on this feature? I would also like this, as we use the Calendar component to display internal project status and it would be very helpful to have the behavior of Show current time indicator under appearance include this (or have one that is Show current date indicator added).

[WidleStudioLLP]

Hey @Brad_Fontanese , welcome to the Retool Community!

At the moment, the native Calendar component in Retool doesn’t support a built-in “current date” or “current time” indicator the way you're expecting. The “Show current time indicator” only applies to specific views (like time-based day or week views), and doesn’t extend to a broader visual highlight for the current day in month view

If that’s the case, I’d recommend creating a Custom Component using a library like FullCalendar or any other JavaScript calendar package of your choice. You can follow this guide from Retool to get started:
Build custom React components | Retool Docs

Here's a quick example from one of my custom calendar components that I’ve used in multiple projects:

Sample Event Data:

const calendarEvents = [
  { title: "Team Meeting", start: "2025-08-01" },
  { title: "Project Deadline", start: "2025-08-03" },
  { title: "Client Call", start: "2025-08-05" },
  { title: "Design Review", start: "2025-08-08" },
  { title: "Release Day", start: "2025-08-10" },
  { title: "Weekly Sync", start: "2025-08-12" },
  { title: "Code Freeze", start: "2025-08-15" },
  { title: "Sprint Planning", start: "2025-08-17" },
  { title: "Marketing Launch", start: "2025-08-20" },
  { title: "Performance Review", start: "2025-08-22" },
  { title: "Bug Bash", start: "2025-08-25" },
  { title: "Demo Day", start: "2025-08-27" },
  { title: "All Hands Meeting", start: "2025-08-30" },
];

return calendarEvents

Preview: