Author: | trananhtuat |
---|---|
Views Total: | 5,446 views |
Official Page: | Go to website |
Last Update: | February 24, 2021 |
License: | MIT |
Preview:

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 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
How do I correct the january not showing bug?
if (!month && month!==0) month = currDate.getMonth()
I want to change month name from September to September-October i.e I want to showcase two calendar
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