simple-jscalendar
Version:
Just a simple javascript calendar
86 lines (71 loc) • 2.63 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title>jsCalendar</title>
<meta name="description" content="jsCalendar example">
<meta name="author" content="GramThanos">
<!-- jsCalendar -->
<link rel="stylesheet" type="text/css" href="../../source/jsCalendar.css">
<link rel="stylesheet" type="text/css" href="../../extensions/jsCalendar.eventmarks.css">
<script type="text/javascript" src="../../source/jsCalendar.js"></script>
<script type="text/javascript" src="../../extensions/jsCalendar.eventmarks.js"></script>
<style type="text/css">
.jsCalendar {
user-select: none;
}
</style>
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<!-- My calendar element -->
<div id="my-calendar" class="jsCalendar classic-theme"></div>
<div id="buttons-wrapper">
<button id="clear-marks" style="margin: 4px;">Clear all event marks</button>
</div>
<!-- Create the calendar -->
<script type="text/javascript">
// Create the calendar
var calendar = jsCalendar.new("#my-calendar");
// Colors for my event marks
var colors = [
'#52c9ff', // Blue
'#ffe31b', // Yellow
'#ffb400', // Orange
'#f6511d', // Red
'#7fb800', // Green
'#9c27b0' // Purple
];
// Handle Event Clear
document.getElementById('clear-marks').addEventListener('click', function() {
calendar.clearAllEventMarks();
}, false);
// On click on a date, add random color event mark
calendar.onDateClick(function(event, date) {
// Select random color
var color = colors[Math.floor(Math.random() * colors.length)];
calendar.addEventMarks(date, color);
//calendar.removeEventMark(date, clear_colors.value);
});
// Add buttons to remove each color
for (var i = 0; i < colors.length; i++) {
var btn = document.createElement('button');
btn.textContent = 'Clear ' + colors[i] + ' event marks';
btn.style.boxShadow = '1px 1px 3px ' + colors[i] + ', -1px 1px 3px ' + colors[i] + ', -1px -1px 3px ' + colors[i] + ', 1px -1px 3px ' + colors[i];
btn.style.margin = '4px';
btn.dataset.color = colors[i];
document.getElementById('buttons-wrapper').appendChild(btn);
btn.addEventListener('click', function() {
var list = calendar.getAllEventMarks();
for (var date in list) {
if (list.hasOwnProperty(date) && list[date].indexOf(this.dataset.color) >= 0) {
calendar.removeEventMarks(parseInt(date, 10), this.dataset.color);
}
}
}, false);
}
</script>
</body>
</html>