Animated Calendar UI Design

Animated Calendar UI Design

Calendar UI Design with Dark Mode and Animation Using HTML CSS JavaScript

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" />
  1. Add the class="light" to the body tag.
<body class="light">
  1. Create the HTML for the calendar.
<div class="calendar">
  <div class="calendar-header">
     February
    <div class="year-picker">
      <span class="year-change" id="prev-year">
        <pre><</pre>
      </span>
       2021
      <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>

Download Details:

Author: trananhtuat

Source Code: https://github.com/trananhtuat/js-calendar

javascript css

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Stunning CSS & JavaScript Effects | Top CSS & JavaScript Animation

Stunning CSS & Javascript Effects | Top CSS & Javascript Animation

Hire CSS Developer

Want to develop a website or re-design using CSS Development? We build a website and we implemented CSS successfully if you are planning to **[Hire CSS Developer](https://hourlydeveloper.io/hire-dedicated-css-developer/ "Hire CSS Developer")**...

Slideshow with HTML, CSS, and JavaScript / How to Create a Slideshow with HTML, CSS, and JavaScript

In this tutorial, we will build a Slideshow of the Social Media Icons with HTML, CSS, and JavaScript

Image slider in HTML, CSS and, JavaScript || Carousel in HTML, CSS, and, JavaScript

Create a simple and responsive image slider or carousel using HTML, CSS, and javaScript.

Custom Dropdown HTML CSS JavaScript | Custom Select input HTML CSS and JavaScript

Custom Dropdown HTML CSS JavaScript | Custom Select input HTML CSS and JavaScript. Let's create a custom select dropdown in HTML.