Web Components
Use the Calendar as a native web component with simple HTML tags.
Examples
Basic Usage
<html>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@calendarjs/ce/dist/style.min.css" />
<script src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@calendarjs/ce/dist/index.min.js"></script>
<lm-calendar type="inline" value="2024-01-15,2024-01-18" range="true"></lm-calendar>
</html>
Programmatic Control
<lm-calendar id="calendar" type="inline"></lm-calendar>
<script>
const element = document.getElementById('calendar');
// Methods
element.getValue();
element.setValue('2024-12-25');
element.reset();
element.setView('months');
</script>
Events
<lm-calendar id="calendar" type="inline"></lm-calendar>
<script>
document.getElementById('calendar').addEventListener('onchange', function(e) {
console.log(e)
});
</script>