Bootstrap 5 Calendar Component With Dark Mode

Category: Date & Time , Javascript | February 23, 2023
0 Comment
Authordilarauluturhan
Last UpdateFebruary 23, 2023
LicenseMIT
Tags
, ,
Views2,688 views
OfficialGo to website
Live DemoDownload
Bootstrap 5 Calendar Component With Dark Mode

An easy and animated calendar UI component with dark mode. Built with Bootstrap 5 framework.

How to use it:

1. Load the required Bootstrap 5 framework.

<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/bootstrap.bundle.min.js"></script>

2. Code the HTML for the calendar.

<!-- Enable dark mode on load -->
<body class="dark">
  <div class="calendar">
    <!-- Calendar Header -->
    <div class="calendar-header">
      <span class="month-picker" id="month-picker">
        February
      </span>
      <div class="year-picker">
        <span class="year-change mt-3" id="prev-year">
          <pre> < </pre>
        </span>
        <span id="year">2023</span>
        <span class="year-change mt-3" id="next-year">
          <pre> > </pre>
        </span>
      </div>
    </div>
    <!-- Calendar Body -->
    <div class="calendar-body">
      <div class="calendar-week-day">
        <div>Sun</div>
        <div>Mon</div>
        <div>Tue</div>
        <div>Wed</div>
        <div>Thu</div>
        <div>Fri</div>
        <div>Sat</div>
      </div>
      <div class="calendar-day">
        <div>
          1
          <span></span>
          <span></span>
          <span></span>
          <span></span>
        </div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
      </div>
    </div>
    <!-- Calendar Footer -->
    <div class="calendar-footer">
        <div class="toggle">
            <span>Dark Mode</span>
            <div class="dark-mode-switch">
                <div class="dark-mode-switch-ident"></div>
            </div>
        </div>
    </div>
    <div class="month-list"></div>
  </div>
</body>

3. Load the calendar component’s JavaScript and Stylesheet. That’s it.

<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>

See Also:

You Might Be Interested In:

Leave a Reply