Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Blog blocks

Pro

Month Calendar Blog Block for Ark UI

A recipe blog's month as a grid of day buttons, one small square per post on each day, and a panel that lists the posts of the chosen day.

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

A month calendar of posts for React with Ark UI, written for the Larkspoon Diary, a recipe blog. A header sits over a split: at the start, May 2026 as a framed table of day buttons from Monday to Sunday, where each day with posts carries one small square per post; at the end, behind a divider that meets the top rule at a + mark, a panel for the chosen day. Choosing a day, with a click or the arrow keys, lists its posts there (category, title as a link, author and reading time) and a polite line says "May 12: 2 posts". A day with nothing says so. The month is fixed and every count is worked out from the typed posts. On a phone the panel sits under the grid. It's built from Badge and Guides, with a native table and buttons. For recipe diaries, event journals and any blog that publishes on a rhythm.

FAQ

How do I show a different month?

Change the constants at the top: LEAD (how many blank cells come before the 1st, with Monday first), DAYS, WEEKS, MONTH and the ISO prefix in FIRST_ISO, then give the posts dates in that month. The weekday of the 1st is fixed in the file rather than computed, so the grid is the same on the server and in every browser.

What do the squares mean?

One square for each post that ran that day, up to three. They are redundant with the text: every marked day also says "2 posts" to a screen reader, and the panel lists the posts. The chosen day turns into a solid cell.

How does it work with a keyboard?

The grid has one tab stop, the chosen day. Arrow keys move the choice and the focus by a day or a week and stop at the month's ends; Tab then leaves the grid for the panel's links. Each day is a button with aria-pressed, so a screen reader hears its date, how many posts and whether it is chosen. The table keeps dir="ltr" in a right-to-left page, so the arrow keys always follow the picture.

Why does the panel keep its height?

It reserves the room of two posts, the most any day has here, so choosing an empty day or a busy one never moves the page below. Each row has a fixed height, so a long title wraps inside it.

Are there covers?

No. A calendar is about when, so the panel shows text rows: category, title, byline. For a version with cards, use the cards blocks.

All 100 blog blocks