Animated Calendar UI Design

Category: Date & Time , Javascript | February 24, 2021
Author:trananhtuat
Views Total:5,446 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:


5 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
  2. Siddharth Tripathi

    I want to change month name from September to September-October i.e I want to showcase two calendar

    Reply
  3. afzal

    i want to change each date and div color of this clender same like as current date have blue bg color please can u guide me

    Reply

Leave a Reply