Author: | |
---|---|
Views Total: | 10,517 views |
Official Page: | Go to website |
Last Update: | December 3, 2019 |
License: | MIT |
Preview:

Description:
Calendarize is the simplest JavaScript implementation of a customizable yearly calendar for your web applications.
How to use it:
Add the JavaScript library calendarize.js into your webpages.
<script src="calendarize.js"></script>
Create an empty container for the calendar.
<div id="calendar"></div>
Render a yearly calendar within the container you just created.
var $calendar = document.getElementById("calendar"); var currentYear = new Date().getFullYear(); var calendarize = new Calendarize(); calendarize.buildYearCalendar($calendar, currentYear);
Apply your own CSS styles to the calendar.
.month { width: 300px; padding: 20px; background: #fff; position: relative; overflow: hidden; float: left; margin: 20px; height: 350px; } .month h3 { text-align: center; margin: -20px -20px 30px -20px; padding: 20px 0; background: red; color: #fff; } .day, .dow, .dummy-day { display: inline-block; width: 12.7864%; float: left; text-align: center; margin-right: 1.5%; } .dow { font-weight: bold; margin-bottom: 10px; } .day { color: #333; cursor: pointer; box-shadow: inset 0 0 0 1px #eee; } .day.weekend { background: #fafaff; } .day:hover { background: yellow; } .day, .dummy-day { height: 40px; line-height: 40px; margin-bottom: 1.5%; background: #fff; } .dummy-day { background: #f5f5f5; color: #ccc; }
Possible options.
var opts = { showMonth: true, showDaysOfWeek: true, showYear: true, clickHandler: function(e) { var day = e.target.getAttribute("data-date"); alert(day); } };
Changelog:
12/03/2019
- Improvements.