LoadOnDemand

//<code-header>
fiddle.title = 'Load on demand';
//</code-header>
const calendar = new Calendar({
    appendTo : targetElement,

    // Configure the LoadOnDemand feature
    features : {
        loadOnDemand : true
    },

    // Configure CrudManager for data management
    crudManager : {
        autoLoad : false, // Don't load initially, let LoadOnDemand handle it
        loadUrl  : '/calendar/load',
        syncUrl  : '/calendar/sync'
    },

    date    : new Date(2023, 0, 1),
    sidebar : false,
    width   : 800,
    height  : 600,

    onDateRangeLoad({ response }) {
        Toast.show(`Loaded ${response.events.rows.length} events`);
    }
});

// hide mocking the AJAX endpoint for loading data
AjaxHelper.mockUrl('/calendar/load', (url, urlParams, { queryParams }) => {
    const
        startDate = new Date(queryParams.startDate),
        endDate   = new Date(queryParams.endDate),
        events    = [],
        resources = [
            { id : 'r1', name : 'Resource 1' }
        ];

    // Generate events for the requested date range
    const current = new Date(startDate);
    let eventId = 1;

    while (current <= endDate) {
        // Generate 1-3 events per day
        const eventsToday = Math.floor(Math.random() * 3) + 1;

        for (let i = 0; i < eventsToday; i++) {
            const isMultiDay = Math.random() < 0.3; // 30% chance of multi-day event

            if (isMultiDay) {
                // Multi-day event (1-5 days)
                const
                    daySpan   = Math.floor(Math.random() * 5) + 1,
                    startTime = new Date(current),
                    endTime   = new Date(current);

                startTime.setHours(9, 0, 0, 0); // Start at 9 AM
                endTime.setDate(endTime.getDate() + daySpan);
                endTime.setHours(17, 0, 0, 0); // End at 5 PM

                events.push({
                    id         : eventId++,
                    name       : `Conference ${eventId} (${daySpan} days)`,
                    startDate  : startTime,
                    endDate    : endTime,
                    resourceId : 'r1',
                    allDay     : daySpan > 2 // Mark as all-day if longer than 2 days
                });
            }
            else {
                // Single day event
                const
                    startTime = new Date(current),
                    duration  = (Math.floor(Math.random() * 4) + 1) * 30; // 30min to 2hrs

                startTime.setHours(9 + Math.floor(Math.random() * 8)); // 9 AM to 5 PM
                startTime.setMinutes(Math.floor(Math.random() * 2) * 30); // 0 or 30 minutes

                const endTime = new Date(startTime.getTime() + duration * 60000);

                events.push({
                    id         : eventId++,
                    name       : `Meeting ${eventId}`,
                    startDate  : startTime,
                    endDate    : endTime,
                    resourceId : 'r1'
                });
            }
        }

        current.setDate(current.getDate() + 1);
    }

    return {
        responseText : JSON.stringify({
            success   : true,
            events    : { rows : events },
            resources : { rows : resources }
        }),
        delay : 300 // Simulate network delay
    };
});

// Mock the sync endpoint
AjaxHelper.mockUrl('/calendar/sync', () => {
    return {
        responseText : JSON.stringify({
            success : true
        }),
        delay : 200
    };
});
// end hide