javascriptfullcalendarrrulefullcalendar-6

Recurring events in Fullcalendar version 6 using rrule


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();

picture of calendar


Solution

  • 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();