Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Calendar blocks

Pro

Seasonal Events Calendar Block for Vue

A twelve-month ribbon with four patterned season bands, event marks and a today rule, a hemisphere switch, a season picker listing events with days away and a three-step prep checklist each.

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

Plan for what the year brings with this seasonal events calendar for Vue with Ark UI. A ribbon of twelve months, October 2026 to September 2027, shows four season bands in four patterns, event marks in three shapes for gifting, sales and launches, and a rule for the fixed moment the block treats as now, Wednesday 14 October. A Segment Group switches the hemisphere and the seasons move six months. A Toggle Group picks Winter, Spring, Summer or Autumn, and starts on the season that holds today. Under it each event of the season shows its date and how many days away it is, and a Checkbox list of three prep steps with a count like "Prep 2 of 3". The list keeps its height across seasons, the frame is ruled by Guides, and on a phone the ribbon scrolls sideways. For retail, marketing and merchandising teams.

FAQ

How do I change the events and the prep steps?

Edit EVENTS: each has a date, a name and a kind of gifting, sale or launch. Change the three prep steps in STEPS, and the twelve months the ribbon covers in RIBBON. The marks, the season lists and the day counts are all worked out from those.

What does the hemisphere switch change?

Only which months belong to which season. seasonOfMonth takes the northern meteorological seasons, December to February for winter and so on, and moves them two seasons along for the south. The dates of the events never change, and choosing a hemisphere returns the picker to the season that holds today.

Why are the seasons patterns and the events shapes?

So nothing depends on color. Each season has its own pattern and name in the band, and each kind of event has its own shape and a word in the legend.

How is the today rule placed?

ruleLook finds the month of TODAY on the ribbon and adds the day's share of that month, then passes the position as a CSS variable. Nothing reads the clock, so it sits at the same place on any day.

How does a screen reader get the year?

The ribbon is a drawing and is hidden from assistive technology, with a caption saying the events are listed below. The list is the real content: a named list of events, each with its date, its distance and a checkbox for each prep step.

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

Everything. Ticks live in the page and reset on reload. To make it real, save the keys that tick produces and start START_TICKS from what you saved.

All 100 calendar blocks