simple-jscalendar
Version:
Just a simple javascript calendar
74 lines (59 loc) • 2.28 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">
<script type="text/javascript" src="../source/jsCalendar.js"></script>
<!--[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 class="auto-jsCalendar" id="awesome-calendar"></div>
<!-- Get the calendar object through javascript -->
<script type="text/javascript">
// You have to wait the load event
window.addEventListener('load', function() {
// Get the calendar
var calendar = jsCalendar.get('#awesome-calendar');
console.log('Get by id', calendar);
}, false);
// The jsCalendar creates the auto-jsCalendar onload,
// so you have to wait for the event and this code must
// be under the jsCalendar.js script tag
</script>
<!-- Calendar with id -->
<div id="calendar-by-id"></div>
<!-- Dynamic create it -->
<script type="text/javascript">
// Create calendar by id
var calendar_2 = jsCalendar.new("#calendar-by-id");
// Bind object to an id
var result = jsCalendar.set('<custom-id>', calendar_2);
console.log('Set by custom id', result);
// Get a reference to the calendar object
var calendar_2_ref = jsCalendar.get('<custom-id>');
console.log('Get by custom id', calendar_2_ref);
calendar_2_ref.goto('01/12/2018');
// Remove the binding
result = jsCalendar.del('<custom-id>');
console.log('Del by custom id', result);
</script>
<!-- Calendar with id -->
<div id="calendar-target-with-id"></div>
<!-- Dynamic create it -->
<script type="text/javascript">
// Create calendar
var calendar_3 = jsCalendar.new(document.getElementById("calendar-target-with-id"));
// Since the target has an id, it is automatically added to the list
// Get a reference to the calendar object
var calendar_3_ref = jsCalendar.get('#calendar-target-with-id');
console.log('Get by id (automatically added)', calendar_3_ref);
</script>
</body>
</html>