Animated Calendar UI Design

Demo Download

Author:	trananhtuat
Views Total:	5,446 views
Official Page:	Go to website
Last Update:	February 24, 2021
License:	MIT

Preview:

Description:

An elegant, animated, light (or dark) calendar UI design implemented in plain HTML, JavaScript, and CSS.

How to use it:

1. Add the app.css to the top of the page.

<link rel="stylesheet" href="app.css" />

2. Add the class="light" to the body tag.

<body class="light">

3. Create the HTML for the calendar.

<div class="calendar">
  <div class="calendar-header">
    <span class="month-picker" id="month-picker">February</span>
    <div class="year-picker">
      <span class="year-change" id="prev-year">
        <pre><</pre>
      </span>
      <span id="year">2021</span>
      <span class="year-change" id="next-year">
        <pre>></pre>
      </span>
    </div>
  </div>
  <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-days"></div>
  </div>
  <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>

4. Add the app.js to the bottom of the page. Done.