Day
The run
Today is a hairline. The selected day is ink.
August 2026
MoTuWeThFrSaSu
Calendar
Month grid. Selected is ink; today is a hairline. Weeks start on Monday.
July 2026
MoTuWeThFrSaSu
Install
npx @noordvc/raster-cli add calendar
Markup
<div class="rs-cal"><div class="rs-cal-head"><span class="rs-cal-title">July 2026</span><span class="rs-cal-nav"><button class="rs-page">‹</button><button class="rs-page">›</button></span></div><div class="rs-cal-grid"><span class="rs-cal-dow">Mo</span><span class="rs-cal-dow">Tu</span><span class="rs-cal-dow">We</span><span class="rs-cal-dow">Th</span><span class="rs-cal-dow">Fr</span><span class="rs-cal-dow">Sa</span><span class="rs-cal-dow">Su</span><button class="rs-cal-day">20</button><button class="rs-cal-day">21</button><button class="rs-cal-day">22</button><button class="rs-cal-day">23</button><button class="rs-cal-day rs-cal-day-selected">24</button><button class="rs-cal-day rs-cal-day-today">25</button><button class="rs-cal-day">26</button></div></div>
React
import { Calendar } from "@/components/raster/calendar";
<Calendar value={date} onSelect={setDate} />Classes
.rs-cal.rs-cal-head.rs-cal-title.rs-cal-nav.rs-cal-grid.rs-cal-dow.rs-cal-day.rs-cal-day-out.rs-cal-day-today.rs-cal-day-selected