Author: | niinpatel |
---|---|
Views Total: | 837 views |
Official Page: | Go to website |
Last Update: | January 18, 2023 |
License: | MIT |
Preview:

Description:
Generate a minimal, clean, easy-to-style calendar using plain JavaScript and HTML.
It uses the built-in Date()
function to generate the calendar, which means it will automatically update with the current date and time.
How to use it:
1. Code the HTML for the calendar.
<!-- Calendar --> <h3 id="monthAndYear"></h3> <table class="table table-bordered table-responsive-sm" id="calendar"> <thead> <tr> <th>Sun</th> <th>Mon</th> <th>Tue</th> <th>Wed</th> <th>Thu</th> <th>Fri</th> <th>Sat</th> </tr> </thead> <tbody id="calendar-body"> </tbody> </table> <!-- Prev/next Navigation --> <button id="previous" onclick="previous()">Previous</button> <button id="next" onclick="next()">Next</button> <!-- Jump to --> <label for="month">Jump To: </label> <select name="month" id="month" onchange="jump()"> <option value=0>Jan</option> <option value=1>Feb</option> <option value=2>Mar</option> <option value=3>Apr</option> <option value=4>May</option> <option value=5>Jun</option> <option value=6>Jul</option> <option value=7>Aug</option> <option value=8>Sep</option> <option value=9>Oct</option> <option value=10>Nov</option> <option value=11>Dec</option> </select> <label for="year"></label> <select name="year" id="year" onchange="jump()"> <option value=1990>1990</option> <option value=1991>1991</option> <option value=1992>1992</option> <option value=1993>1993</option> <option value=1994>1994</option> <option value=1995>1995</option> <option value=1996>1996</option> <option value=1997>1997</option> <option value=1998>1998</option> <option value=1999>1999</option> <option value=2000>2000</option> <option value=2001>2001</option> <option value=2002>2002</option> <option value=2003>2003</option> <option value=2004>2004</option> <option value=2005>2005</option> <option value=2006>2006</option> <option value=2007>2007</option> <option value=2008>2008</option> <option value=2009>2009</option> <option value=2010>2010</option> <option value=2011>2011</option> <option value=2012>2012</option> <option value=2013>2013</option> <option value=2014>2014</option> <option value=2015>2015</option> <option value=2016>2016</option> <option value=2017>2017</option> <option value=2018>2018</option> <option value=2019>2019</option> <option value=2020>2020</option> <option value=2021>2021</option> <option value=2022>2022</option> <option value=2023>2023</option> <option value=2024>2024</option> <option value=2025>2025</option> <option value=2026>2026</option> <option value=2027>2027</option> <option value=2028>2028</option> <option value=2029>2029</option> <option value=2030>2030</option> </select>
2. Load the main script at the end of the document. That’s it.
<script src="scripts.js"></script>