Minimalist Calendar Plugin For jQuery - Calendar.js
File Size: | 4.32 KB |
---|---|
Views Total: | 3023 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
The Calendar.js jQuery plugin makes it easier to embed a simple calendar widget into the webpage. The plugin provides a function that resets any previously stored data and reinitializes the calendar from scratch. Accepts a single month as argument. Only constructs the calendar for the current year.
How to use it:
1. Insert the latest jQuery JavaScript library and the calendar plugin's files into the html file.
<link rel="stylesheet" href="calendar.css"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"> </script> <script src="calendar.js"></script>
2. Create the html for the calendar widget.
<table id="calendar"> <tr id="monthrow"> <th colspan="7"> <button id="prev" onclick="prevMonth()">❮</button> <span id="month"></span> <button id="next" onclick="nextMonth()">❯</button> </th> </tr> <tr class="daysoftheweek"> <th>Sun</th> <th>Mon</th> <th>Tue</th> <th>Wed</th> <th>Thu</th> <th>Fri</th> <th>Sat</th> </tr> </table>
3. That's it. To override the default month names, follow this step:
let monthNames = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ];
This awesome jQuery plugin is developed by initforcode. For more Advanced Usages, please check the demo page or visit the official website.