Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Calendar blocks

Pro

Prayer Times Calendar Block for React Aria

Five typed prayer times on a bar from 04:30 to 20:30 with a marker for the fixed now, the next time worked out from it, a Done toggle for each and seven streak dots.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

See a day of practice at a glance with this prayer times calendar for React with React Aria. A hairline frame with a plus mark on each corner opens with a bar from 04:30 to 20:30 and a marker for each of the five times, filled once it is done, with a line at the fixed "now", 09:30 on Wednesday 14 October 2026. Above it the next time is worked out from that line: "Dhuhr in 3 h 04 min". Below, a list gives each time with a Toggle for Done and seven streak dots, the six days before as typed and today's live, with the streak counted back from them. A time that has not begun is locked and says when it does. The times are a typed table for one sample town, written as given; nothing here calculates them from the sun or a place, and the block says so. The words are neutral and there is no imagery. The bands are ruled by Guides. Below the small breakpoint the dots and the streak sit under the name. It's built from Toggle and Guides, with a CSS entrance only. For daily-practice timers, reminder apps and any app that tracks a few fixed times a day.

FAQ

How do I use my own times?

Edit PRAYERS: each has a name, a wall-clock time such as 05:12, past, a list of the six days before today (1 done, 0 missed), and whether today's is done. Edit BAR_FROM and BAR_TO to change the ends of the bar. The next time, the waits, the streaks and the marker positions are all worked out from those and from the fixed "now" in AS_OF.

Are the times calculated for my location?

No. They are typed for one sample town and one date, and the block labels them as typed for this demo. Prayer times depend on the place, the date and the method you choose, so for a real app take them from a library or service built for that and replace the table with what it returns.

Why is a toggle locked?

A time that has not begun yet cannot be marked done. The toggle stays in the tab order with aria-disabled, and pressing it only adds a message to the polite status line ("Dhuhr begins at 12:34, in 3 h 04 min"). Change AS_OF to move the line between past and future.

How is the streak counted?

It counts the days in a row that were kept, back from today. If today's is not yet done the count starts from yesterday, so a streak does not drop to zero before the time has come. The dots show the same days: filled is kept, an open ring is not, and today's is a little larger.

What stays local, and how do I wire it up?

The ticks live in the page and reset on reload; nothing is saved or sent. To keep them, send each change from tick to your own API and start the state from what it returns.

How does it look on a phone?

The bar scales to the width, with one-letter markers so they do not collide, and each row puts the dots and the streak under the name with the toggle at the end.

All 100 calendar blocks