Animated Calendar UI Design

Category: Date & Time , Javascript | February 24, 2021
Views Total:5,446 views
Official Page:Go to website
Last Update:February 24, 2021


Animated Calendar UI Design


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">
      <span id="year">2021</span>
      <span class="year-change" id="next-year">
  <div class="calendar-body">
    <div class="calendar-week-day">
    <div class="calendar-days"></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 class="month-list"></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.


  2. Siddharth Tripathi

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

  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


Leave a Reply