Full Page Calendar - JSON API V2 Examples

Example 1: Basic Month View Calendar

A simple calendar with month view. Click any day to add events, use toolbar to navigate between months.

RSL.JSONLayout.renderLayout('#container', {
    version: 2,
    layoutId: "basic-calendar-demo",
    breakpoints: { xs: 1 },
    items: [{
        id: "my-calendar",
        content: {
            type: "calendar",
            view: "month",
            editable: true,
            height: "500px"
        }
    }]
});

Example 2: Calendar with Pre-loaded Events

Initialize the calendar with existing events. Events support categories, colors, and time ranges.

const today = new Date();
const year = today.getFullYear();
const month = today.getMonth();

RSL.JSONLayout.renderLayout('#container', {
    version: 2,
    layoutId: "events-calendar-demo",
    breakpoints: { xs: 1 },
    items: [{
        id: "event-calendar",
        content: {
            type: "calendar",
            view: "month",
            editable: true,
            height: "550px",
            events: [
                {
                    title: "Team Standup",
                    start: new Date(year, month, today.getDate(), 9, 0).toISOString(),
                    end: new Date(year, month, today.getDate(), 9, 30).toISOString(),
                    category: "meeting"
                },
                {
                    title: "Project Deadline",
                    start: new Date(year, month, today.getDate() + 3, 17, 0).toISOString(),
                    category: "work"
                },
                {
                    title: "Doctor Appointment",
                    start: new Date(year, month, today.getDate() + 5, 14, 0).toISOString(),
                    category: "health"
                },
                {
                    title: "Weekend Trip",
                    start: new Date(year, month, today.getDate() + 7).toISOString(),
                    category: "personal"
                }
            ],
            categories: [
                { id: "meeting", name: "Meeting", color: "#3b82f6" },
                { id: "work", name: "Work", color: "#10b981" },
                { id: "health", name: "Health", color: "#ef4444" },
                { id: "personal", name: "Personal", color: "#8b5cf6" }
            ]
        }
    }]
});

Example 3: Week View Calendar

Calendar showing a detailed weekly view with hourly time slots. Great for scheduling applications.

RSL.JSONLayout.renderLayout('#container', {
    version: 2,
    layoutId: "week-calendar-demo",
    breakpoints: { xs: 1 },
    items: [{
        id: "week-calendar",
        content: {
            type: "calendar",
            view: "week",
            firstDay: 1,  // Monday start
            editable: true,
            showWeekNumbers: true,
            height: "600px"
        }
    }]
});

Example 4: Read-Only Calendar

Display events without allowing edits. Perfect for displaying schedules or public event calendars.

RSL.JSONLayout.renderLayout('#container', {
    version: 2,
    layoutId: "readonly-calendar-demo",
    breakpoints: { xs: 1 },
    items: [{
        id: "display-calendar",
        content: {
            type: "calendar",
            view: "month",
            editable: false,  // Read-only mode
            showToolbar: true,
            height: "500px",
            events: [
                { title: "Conference", start: "2025-01-15", category: "work" },
                { title: "Holiday", start: "2025-01-20", category: "personal" }
            ]
        }
    }]
});

Example 5: Calendar with Event Callbacks

Listen to calendar events like clicks, adds, updates, and deletes. Great for integrating with backend systems.

RSL.JSONLayout.renderLayout('#container', {
    version: 2,
    layoutId: "callbacks-calendar-demo",
    breakpoints: { xs: 1 },
    items: [{
        id: "interactive-calendar",
        content: {
            type: "calendar",
            view: "month",
            editable: true,
            height: "500px",
            onEventClick: function(event) {
                console.log('Event clicked:', event.title);
            },
            onEventAdd: function(event) {
                console.log('Event added:', event.title);
            },
            onEventUpdate: function(event) {
                console.log('Event updated:', event.title);
            },
            onEventDelete: function(eventId) {
                console.log('Event deleted:', eventId);
            },
            onViewChange: function(view) {
                console.log('View changed to:', view);
            }
        }
    }]
});

Example 6: Year View Calendar

Overview of the entire year at a glance. Click any month to navigate to month view.

RSL.JSONLayout.renderLayout('#container', {
    version: 2,
    layoutId: "year-calendar-demo",
    breakpoints: { xs: 1 },
    items: [{
        id: "year-calendar",
        content: {
            type: "calendar",
            view: "year",
            editable: true,
            height: "700px"
        }
    }]
});

Example 7: Calendar with Upcoming Events

Show upcoming events in a sidebar, below the calendar, or as a standalone widget. Perfect for school websites and event schedules.

RSL.JSONLayout.renderLayout('#container', {
    version: 2,
    layoutId: "upcoming-calendar-demo",
    breakpoints: { xs: 1 },
    items: [{
        id: "upcoming-calendar",
        content: {
            type: "calendar",
            view: "month",
            editable: true,
            upcoming: "sidebar",      // "none", "below", "sidebar", or "only"
            upcomingCount: 8,         // Number of events to show
            upcomingDays: 60,         // Days ahead to look
            upcomingTitle: "What's Coming Up",
            height: "600px",
            events: [
                { title: "Team Standup", start: "2025-12-04T09:00", category: "meeting" },
                { title: "Project Deadline", start: "2025-12-06T17:00", category: "work" },
                { title: "Holiday Party", start: "2025-12-19T18:00", category: "personal" }
            ]
        }
    }]
});

Configuration Reference

Complete list of available options for the V2 calendar content type:

Option	Type	Default	Description
`view`	string	"month"	Initial view: "day", "week", "month", or "year"
`date`	string	today	Initial date in ISO format (YYYY-MM-DD)
`firstDay`	number	0	First day of week: 0=Sunday, 1=Monday, etc.
`editable`	boolean	true	Enable event creation/editing
`showToolbar`	boolean	true	Show navigation toolbar
`showWeekNumbers`	boolean	false	Display week numbers
`filterKey`	string	null	FilterBus key for category filtering
`events`	array	[]	Initial events array
`categories`	array	[]	Event categories: [{id, name, color}]
`height`	string	"600px"	Calendar minimum height
`upcoming`	string	"none"	Upcoming events mode: "none", "below", "sidebar", or "only"
`upcomingCount`	number	5	Number of upcoming events to display
`upcomingDays`	number	30	Days ahead to look for events
`upcomingTitle`	string	"Upcoming Events"	Title shown above the upcoming events list
`locale`	string	browser	Locale for date formatting
`onEventClick`	function	null	Callback when event is clicked
`onEventAdd`	function	null	Callback when event is added
`onEventUpdate`	function	null	Callback when event is updated
`onEventDelete`	function	null	Callback when event is deleted
`onViewChange`	function	null	Callback when view changes
`onDateChange`	function	null	Callback when navigating dates

Event Object Structure

Events passed to the calendar should follow this structure:

{
    id: "event-123",           // Unique ID (auto-generated if omitted)
    title: "Meeting",          // Event title (required)
    start: "2025-01-15T09:00", // Start date/time ISO string (required)
    end: "2025-01-15T10:00",   // End date/time (optional)
    category: "meeting",       // Category ID for color coding
    description: "Notes...",   // Event description (optional)
    allDay: false              // Full day event flag (optional)
}

Full Page Calendar V2 API