Web Components
Use the Schedule 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-schedule type="week" value="2025-01-15" style="height: 500px;"></lm-schedule>
</html>
Programmatic Control
<lm-schedule id="schedule" type="week" style="height: 500px;"></lm-schedule>
<script>
const element = document.getElementById('schedule');
// Set data
element.data = [
{ guid: 'evt-1', title: 'Meeting', date: '2025-01-15', start: '10:00', end: '11:00', color: '#3498db' }
];
// Methods
element.render();
// Add event
element.addEvents({ guid: 'evt-2', title: 'Call', date: '2025-01-15', start: '14:00', end: '15:00', color: '#2ecc71' });
// Delete event
element.deleteEvents('evt-1');
</script>
Events
<lm-schedule id="schedule" type="week" style="height: 500px;"></lm-schedule>
<script>
const schedule = document.getElementById('schedule');
schedule.addEventListener('oncreate', function(e) {
console.log('Created:', e.detail);
});
schedule.addEventListener('onchangeevent', function(e) {
console.log('Changed:', e.detail);
});
schedule.addEventListener('ondelete', function(e) {
console.log('Deleted:', e.detail);
});
</script>