Full Page Calendar - Examples

1. Basic Month View

A fully interactive calendar with event management. Click any day to add an event, or click existing events to edit them.

Try it: Use arrow keys to navigate, Enter to select a day, and Escape to close the event panel.

<div data-rsl-calendar
     data-calendar-view="month"
     data-calendar-editable="true"
     data-calendar-events='[
         {"id":"1","title":"Team Standup","start":"2025-12-04T09:00:00","category":"meeting"},
         {"id":"2","title":"Project Review","start":"2025-12-04T14:00:00","category":"work"}
     ]'>
</div>

2. Week View with Time Slots

The week view shows hourly time slots, making it easy to see event duration and schedule conflicts.

<div data-rsl-calendar
     data-calendar-view="week"
     data-calendar-editable="true">
</div>

<script>
// Switch views programmatically
var calendar = RSL.Calendar.getInstance('#calendar-week');
calendar.setView('day');   // Day view
calendar.setView('week');  // Week view
calendar.setView('month'); // Month view
calendar.setView('year');  // Year view
</script>

3. FilterBus Integration

Filter events by category using RSL's FilterBus. Click a category to show only those events.

<!-- Filter Component -->
<div data-rsl-filter
     data-filter-key="calendar-category"
     data-filter-style="pills">
    <button class="rsl-filter-option" data-filter-value="all">All</button>
    <button class="rsl-filter-option" data-filter-value="work">Work</button>
    <button class="rsl-filter-option" data-filter-value="meeting">Meetings</button>
</div>

<!-- Calendar with filter key -->
<div data-rsl-calendar
     data-calendar-view="month"
     data-calendar-filter-key="calendar-category">
</div>

4. JavaScript API

Programmatically control the calendar using the JavaScript API.

Event Log

[Ready] Calendar initialized

// Get calendar instance
var calendar = RSL.Calendar.getInstance('#calendar-api');

// Add an event
calendar.addEvent({
    title: 'New Meeting',
    start: '2025-12-15T10:00:00',
    end: '2025-12-15T11:00:00',
    category: 'meeting'
});

// Navigate to a date
calendar.goToDate('2025-12-25');

// Get all events
var events = calendar.getEvents();
console.log('Total events:', events.length);

// Listen for events
document.querySelector('#calendar-api').addEventListener('rsl-calendar-event-save', function(e) {
    console.log('Event saved:', e.detail.event);
});

5. Read-Only Display

A calendar without editing capabilities - perfect for displaying schedules, availability, or public events.

<div data-rsl-calendar
     data-calendar-view="month"
     data-calendar-editable="false"
     data-calendar-events='[...]'>
</div>

6. Upcoming Events (Below)

Show upcoming events in a list below the calendar. Great for school websites, community boards, and event schedules.

<div data-rsl-calendar
     data-calendar-view="month"
     data-calendar-upcoming="below"
     data-calendar-upcoming-count="5"
     data-calendar-upcoming-days="30">
</div>

7. Upcoming Events (Sidebar)

Show upcoming events in a sidebar next to the calendar. The sidebar collapses below the calendar on mobile.

<div data-rsl-calendar
     data-calendar-view="month"
     data-calendar-upcoming="sidebar"
     data-calendar-upcoming-count="8"
     data-calendar-upcoming-days="60"
     data-calendar-upcoming-title="What's Coming Up">
</div>

8. Upcoming Events Only (Widget)

Display just the upcoming events list without the calendar. Perfect for sidebars, widgets, and compact displays.

<!-- Compact widget for sidebars -->
<div data-rsl-calendar
     data-calendar-upcoming="only"
     data-calendar-upcoming-count="5"
     data-calendar-upcoming-days="14"
     data-calendar-upcoming-title="Upcoming Events"
     data-calendar-editable="false">
</div>

Calendar Examples