Calendar UI design with dark mode and animations using HTML CSS JavaScript.
An elegant, animated, and lightweight (or bold) calendar user interface design implemented in HTML, JS, and CSS.
Date Range Picker Component-Based On Angular Material Calendar
How to make use of it:
1. Add the app.css
to the highest of the web 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>
Animated Calendar UI Design, js-calendar Plugin/Github
See Demo And Download
Official Website(trananhtuat): Click Here
This superior jQuery/javascript plugin is developed by trananhtuat. For extra Advanced Usages, please go to the official website.
Be First to Comment