\n
📅 Dedicated Calendar Components

Reusable calendar UI for planning, booking, and scheduling.

Three polished calendar patterns built with pure HTML and CSS.

Monthly Planner

May 2026

SunMonTueWedThuFriSat
27282930123 45678910 11121314151617 18192021222324 25262728293031
Today • 3 events Sprint review

Monthly Planner

Great for dashboards, team planning, and project timelines.

<div class="calendar-head">
  <h2>May 2026</h2>
</div>
<div class="day-grid">
  <span class="selected">8</span>
  <span class="event">16</span>
</div>
Date Range Picker
12 May
19 May

May

SunMonTueWedThuFriSat 27282930123 45678910 11121314151617 18192021222324
Trip 5 nights
Timezone UTC+5:30
Status Confirmed

Date Range Picker

Useful for bookings, travel flows, and appointment selection.

<div class="mini-days">
  <span class="start">12</span>
  <span class="range">13</span>
  <span class="end">19</span>
</div>
Agenda Scheduler

Thursday, 23 May

Live
23 Thu
MoTuWeThFr 1920212223
09:00 Standup
12:30 Design review
04:15 Client call

Agenda Scheduler

Compact view for meetings, task lists, and daily productivity.

<div class="agenda-item accent">
  <span class="agenda-time">12:30</span>
  <strong>Design review</strong>
</div>