Style

Features

Themes

Colors

Preview

January 2026
Sun
Mon
Tue
Wed
Thu
Fri
Sat
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="calendar">
  <div class="calendar-header">
    <span class="calendar-title">January 2026</span>
    <div class="calendar-controls">
      <div class="calendar-nav">
        <button class="nav-btn" onclick="navigateMonth(-1)">&lt;</button>
        <button class="nav-btn" onclick="navigateMonth(1)">&gt;</button>
      </div>
      <button class="today-btn" onclick="goToToday()">Today</button>
    </div>
  </div>
  <div class="calendar-weekdays">

    <div class="weekday">Sun</div>
    <div class="weekday">Mon</div>
    <div class="weekday">Tue</div>
    <div class="weekday">Wed</div>
    <div class="weekday">Thu</div>
    <div class="weekday">Fri</div>
    <div class="weekday">Sat</div>
  </div>
  <div class="calendar-days">
    <div class="calendar-day other-month"></div>
    <div class="calendar-day other-month"></div>
    <div class="calendar-day other-month"></div>
    <div class="calendar-day other-month"></div>
    <div class="calendar-day" data-day="1">
      1

    </div>
    <div class="calendar-day" data-day="2">
      2

    </div>
    <div class="calendar-day weekend" data-day="3">
      3

    </div>
    <div class="calendar-day weekend" data-day="4">
      4

    </div>
    <div class="calendar-day" data-day="5">
      5
      <div class="day-event" style="background-color: #3b82f6" title="Team Meeting"></div>
    </div>
    <div class="calendar-day" data-day="6">
      6

    </div>
    <div class="calendar-day" data-day="7">
      7

    </div>
    <div class="calendar-day today selected" data-day="8">
      8

    </div>
    <div class="calendar-day" data-day="9">
      9

    </div>
    <div class="calendar-day weekend" data-day="10">
      10

    </div>
    <div class="calendar-day weekend" data-day="11">
      11

    </div>
    <div class="calendar-day" data-day="12">
      12
      <div class="day-event" style="background-color: #22c55e" title="Product Launch"></div>
    </div>
    <div class="calendar-day" data-day="13">
      13

    </div>
    <div class="calendar-day" data-day="14">
      14

    </div>
    <div class="calendar-day" data-day="15">
      15
      <div class="day-event" style="background-color: #ef4444" title="Deadline"></div>
    </div>
    <div class="calendar-day" data-day="16">
      16

    </div>
    <div class="calendar-day weekend" data-day="17">
      17

    </div>
    <div class="calendar-day weekend" data-day="18">
      18

    </div>
    <div class="calendar-day" data-day="19">
      19

    </div>
    <div class="calendar-day" data-day="20">
      20
      <div class="day-event" style="background-color: #a855f7" title="Conference"></div>
    </div>
    <div class="calendar-day" data-day="21">
      21

    </div>
    <div class="calendar-day" data-day="22">
      22

    </div>
    <div class="calendar-day" data-day="23">
      23

    </div>
    <div class="calendar-day weekend" data-day="24">
      24

    </div>
    <div class="calendar-day weekend" data-day="25">
      25
      <div class="day-event" style="background-color: #f97316" title="Review"></div>
    </div>
    <div class="calendar-day" data-day="26">
      26

    </div>
    <div class="calendar-day" data-day="27">
      27

    </div>
    <div class="calendar-day" data-day="28">
      28

    </div>
    <div class="calendar-day" data-day="29">
      29

    </div>
    <div class="calendar-day" data-day="30">
      30

    </div>
    <div class="calendar-day weekend" data-day="31">
      31

    </div>
  </div>
</div>