Animated Calendar UI Design

Category: Date & Time , Javascript | February 24, 2021
Author: trananhtuat
Views Total: 1,325 views
Official Page: Go to website
Last Update: February 24, 2021
License: MIT

Preview:

Animated Calendar UI Design

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.

You Might Be Interested In:


2 thoughts on “Animated Calendar UI Design

  1. nadir

    you have a bug in generateCalendar js function. when month = 0, the condition if(!month) get true and the month is set to the current month. january is never showed.

    Cordialy

    Reply

Leave a Reply