Calendar — Norbielink Design System

March 2026

SU

MO

TU

WE

TH

FR

SA

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

<div class="cal">
  <div class="cal-header">
    <div class="cal-title">March 2026</div>
    <div class="cal-nav">
      <button class="cal-nav-btn"><span class="material-icons-round">chevron_left</span></button>
      <button class="cal-nav-btn"><span class="material-icons-round">chevron_right</span></button>
    </div>
  </div>
  <div class="cal-grid">
    <!-- day labels and day cells -->
  </div>
</div>

Installation

Built with pure HTML and CSS. Include ds-shared.css in your project.

pnpm add @norbielink/ds

Usage

Import

<link rel="stylesheet" href="ds-shared.css">

Structure

<div class="cal">
  <div class="cal-header">
    <div class="cal-title">Month Year</div>
    <!-- nav buttons -->
  </div>
  <div class="cal-grid">
    <!-- day labels (SU MO TU...) then cal-day cells -->
  </div>
</div>

API Reference

Day cell states

Class	Description
`cal-day`	Regular day cell
`cal-day.today`	Current date (gray bg, bold)
`cal-day.selected`	Selected date (black bg)
`cal-day.other-month`	Days outside current month (dimmed)
`cal-dk`	Dark mode modifier on .cal