Simple, lightweight, stylish calendar + organizer JavaScript Library
Installation — Basic Usage — Examples — Doc — Screenshots
 Chrome |
 Internet Explorer |
 Edge |
 Safari |
 Firefox |
|---|---|---|---|---|
| Yes | 10+ | Yes | Yes | Yes |
There are multiple ways to install the calendar library
- Via CDN:
<head>
<link href="https://cdn.rawgit.com/nizarmah/calendar-javascript-lib/master/calendarorganizer.min.css" rel="stylesheet" />
</head>
<body>
<div id="calendarContainer"></div>
<div id="organizerContainer"></div>
<!-- Stick script at the end of the body -->
<script src="https://cdn.rawgit.com/nizarmah/calendar-javascript-lib/master/calendarorganizer.min.js"></script>
<script>
/* Fill with whatever your dreams desire */
</script>
</body>- Via download and self-hosting: Download the minified JavaScript file and minified CSS file
<!-- Insert in <head> -->
<link href="calendarorganizer.min.css" rel="stylesheet" />
<!-- Insert before you own <script> tag-->
<script src="calendarorganizer.min.js"></script>Place 2 <div>'s where you want the calendar to be placed
<body>
...
<div id="calendarContainer"></div>
<div id="organizerContainer"></div>
...
</body>// Basic config
var calendar = new Calendar("calendarContainer", "small",
[ "Monday", 3 ],
[ "#ffc107", "#ffa000", "#ffffff", "#ffecb3" ],
{
days: [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ],
months: [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ],
indicator: false,
placeholder: "<span>Custom Placeholder</span>"
});
var data = {
2017: {
12: {
25: [
{
startTime: "00:00",
endTime: "24:00",
text: "Christmas Day"
}
]
}
}
};
var organizer = new Organizer("organizerContainer", calendar, data);Want to know how to customize your data? Check out the docs
The calendar item, used to display days, months, and years
var calendar = new Calendar("calendarContainer", // HTML container ID, Required
"small", // Size: (small, medium, large) Required
["Sunday", 3], // [ Starting day, day abbreviation length ] Required
[ "#ffc107", // Primary Color Required
"#ffa000", // Primary Dark Color Required
"#ffffff", // Text Color Required
"#ffecb3" ], // Text Dark Color Required
{ // Following is optional
days: [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ],
months: [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ],
indicator: true, // Day Event Indicator Optional
indicator_type: 1, // Day Event Indicator Type (0 not to display num of events, 1 to display num of events) Optional
indicator_pos: "bottom", // Day Event Indicator Position (top, bottom) Optional
placeholder: "<span>Custom Placeholder</span>"
});When changing days, the starting day must match one of the days given
If you are using the organizer, please use the Organizer OnClickListener. If not, use the following
// Days Block click listener
calendar.setOnClickListener('days-blocks',
// Called when a day block is clicked
function () {
console.log("Day block clicked");
}
);
// Month Slider (Left and Right Arrow) Click Listeners
calendar.setOnClickListener('month-slider',
// Called when the month left arrow is clicked
function () {
console.log("Month back slider clicked");
},
// Called when the month right arrow is clicked
function () {
console.log("Month next slider clicked");
}
);
// Year Slider (Left and Right Arrow) Click Listeners
calendar.setOnClickListener('year-slider',
// Called when the year left arrow is clicked
function () {
console.log("Year back slider clicked");
},
// Called when the year right arrow is clicked
function () {
console.log("Year next slider clicked");
}
);The organizer object, used to display events
var organizer = new Organizer("organizerContainer", // Organizer container id Required
calendar, // Calendar item Required
data); // Events data (Must follow specified format) Required{
startTime: "00:00",
endTime: "24:00",
text: "Christmas Day",
link: "https://github.com/nizarmah" // this is optional :)
}Since starting and ending time are strings, 24 hour time is not required. You can just use "12:00am" and "12:00pm" instead of "00:00" and "24:00"
{
year: {
month: {
day: [ events ]
}
}
}
// Example
var data = {
// December 25, 2017
2017: {
12: {
25: [
// Christmas Day
{
startTime: "00:00",
endTime: "24:00",
text: "Christmas Day"
},
// Christmas Dinner
{
startTime: "5:00pm",
endTime: "11:00pm",
text: "Christmas Dinner"
}
]
}
}
}Do not use this if
organizeris not declared. Use the Calendar OnClickListeners instead
// Days Block Click Listener
organizer.setOnClickListener('days-blocks',
// Called when a day block is clicked
function () {
console.log("Day block clicked");
}
);
// Days Block Long Click Listener
organizer.setOnLongClickListener('days-blocks',
// Called when a day block is long clicked
function () {
console.log("Day block long clicked");
}
);
// Month Slider (Left and Right Arrow) Click Listeners
organizer.setOnClickListener('month-slider',
// Called when the month left arrow is clicked
function () {
console.log("Month back slider clicked");
},
// Called when the month right arrow is clicked
function () {
console.log("Month next slider clicked");
}
);
// Year Slider (Left and Right Arrow) Click Listeners
organizer.setOnClickListener('year-slider',
// Called when the year left arrow is clicked
function () {
console.log("Year back slider clicked");
},
// Called when the year right arrow is clicked
function () {
console.log("Year next slider clicked");
}
);Want to retrieve your events from an API? Use the onMonthChange function to dynamically add dates
organizer.onMonthChange = function (callback) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// TODO : Change the Organizer's Data to the new Data
// TODO : that you just grabbed from the Ajax Request
organizer.data = this.responseText;
// TODO : Call the Callback to display the Data
callback();
}
};
xhttp.open("GET", "someurl.json", true);
xhttp.send();
};Check out ajax_organizer.html in the examples folder for a better demonstration
