Recurring events in Fullcalendar version 6 using rrule

Question

I'm trying to figure out recurring events in fullcalendar version 6 using rrule but it is not working. I need to do recurring events every week on specific days, every month, and yearly. I can't figure out what is wrong neither is shows me any error in console.

  calendar = new Calendar(calendarEl, {
        // Event handlers
        eventClick: function(info) {
            var eventObj = info.event;
            populateAndShowModal(eventObj, eventObj.extendedProps.procedure);
        },
        eventReceive: function(info) {
            var eventObj = info.event;
            populateAndShowModal(eventObj, eventObj.title);
        },

        schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
        droppable: true,
        themeSystem: 'bootstrap5',
        displayEventTime: false,
        slotLabelInterval: {
            minutes: 30
        },
        slotMinTime: '08:00:00',
        slotMaxTime: '19:00:00',
        eventTimeFormat: {
            hour: '2-digit',
            minute: '2-digit',
            hour12: false,
        },
        height: "auto",
        initialView: 'resourceTimelineDay',
        aspectRatio: 1.5,
        headerToolbar: {
            left: 'prev,next,custom2',
            center: 'title',
            right: 'custom1,resourceTimelineDay,resourceTimelineWeek,resourceTimelineMonth'
        },
        editable: true,
        resourceAreaHeaderContent: 'Staff',
        resources: [{
            id: 6,
            title: "New",
        }, {
            id: 211,
            title: "Test",
        }],
        events: [{
            title: "SiH|97155|Processed|208|97155",
            duration: '39:00',
            resourceId: 211,
            assignedToName: "Matt Randall",
            procedure: "97155",
            color: "#00ffca",
            rrule: {
                freq: rrule.RRule.WEEKLY,
                interval: 2,
                byweekday: [rrule.RRule.WED],
                dtstart: '2024-03-13T08:00:00'
            }
        }]
    });
    calendar.render();

Answer 1

I was missing js which connects full calendar and rrule plugin. It is working now as I have code like this.

 calendar = new Calendar(calendarEl, {
    // Event handlers
    eventClick: function(info) {
        var eventObj = info.event;
        populateAndShowModal(eventObj, eventObj.extendedProps.procedure);
    },
    eventReceive: function(info) {
        var eventObj = info.event;
        populateAndShowModal(eventObj, eventObj.title);
    },

    schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
    droppable: true,
    themeSystem: 'bootstrap5',
    displayEventTime: false,
    slotLabelInterval: {
        minutes: 30
    },
    slotMinTime: '08:00:00',
    slotMaxTime: '19:00:00',
    eventTimeFormat: {
        hour: '2-digit',
        minute: '2-digit',
        hour12: false,
    },
    height: "auto",
    initialView: 'resourceTimelineDay',
    aspectRatio: 1.5,
    headerToolbar: {
        left: 'prev,next,custom2',
        center: 'title',
        right: 'custom1,resourceTimelineDay,resourceTimelineWeek,resourceTimelineMonth'
    },
    editable: true,
    resourceAreaHeaderContent: 'Staff',
    resources: [{
        id: 6,
        title: "New",
    }, {
        id: 211,
        title: "Test",
    }],
    events: [{
        title: "SiH|97155|Processed|208|97155",
        duration: '39:00',
        resourceId: 211,
        assignedToName: "Matt Randall",
        procedure: "97155",
        color: "#00ffca",
        rrule: {
            freq: "weekly",
            interval: 2,
            byweekday: ["mo"],
            dtstart: '2024-03-13T08:00:00'
        }
    }]
});
calendar.render();