calendar-javascript-lib
calendar-javascript-lib copied to clipboard
Published
20 hours ago •
nizarmah
nizarmah
📅 Javascript Calendar & Organizer Library for normal calendar use and or events scheduling.
📅 JS Calendar Library
Simple, lightweight, stylish calendar + organizer JavaScript Library
Installation — Basic Usage — Examples — Doc — Screenshots
🌏 Browser Support
 Chrome |
 Internet Explorer |
 Edge |
 Safari |
 Firefox |
|---|---|---|---|---|
| Yes | 10+ | Yes | Yes | Yes |
💾 Install
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>
🔨 Basic Usage
HTML
Place 2 <div>'s where you want the calendar to be placed
<body>
...
<div id="calendarContainer"></div>
<div id="organizerContainer"></div>
...
</body>
JavaScript
// 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
📓 Doc
Calendar Object
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
Calendar OnClickListeners
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");
}
);
Organizer Object
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
Event Format
{
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"
Data Format
{
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"
}
]
}
}
}
Organizer OnClickListener
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");
}
);
Examples
Using Ajax
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
🖼️ Screenshots
nizarmah