Author: | dilarauluturhan |
---|---|
Views Total: | 1,194 views |
Official Page: | Go to website |
Last Update: | February 23, 2023 |
License: | MIT |
Preview:

Description:
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>