Fullcalendar recurring event with rrule is not working

Question

I am using fullcalendar 4.4.0 and everything working fine except rrule. If i try with simple recurrence, it is working, but rrule recurrence not working. let me share my code

    <script src="https://unpkg.com/@fullcalendar/[email protected]/main.min.js"></script>
    <script src="https://unpkg.com/@fullcalendar/[email protected]/main.min.js"></script>
    <script src="https://unpkg.com/@fullcalendar/[email protected]/main.min.js"></script>
    <script src="https://unpkg.com/@fullcalendar/[email protected]/main.min.js"></script>
    <script src="https://unpkg.com/@fullcalendar/[email protected]/main.min.js"></script>
    <script src="https://unpkg.com/@fullcalendar/[email protected]/main.min.js"></script>
    <script src="https://unpkg.com/@fullcalendar/[email protected]/main.min.js"></script>
    <script src="https://unpkg.com/@fullcalendar/[email protected]/main.min.js"></script>
    <scritpt src="https://unpkg.com/@fullcalendar/[email protected]/main.min.js"></scritpt>
    <script src="https://unpkg.com/@fullcalendar/[email protected]/main.min.js"></script>
    <script src="{{asset('public/plugins/datepicker-master/dist/datepicker.js')}}"></script>

The code for generating event is as follows.

             function makeEventFromBook(book) {
                var event={};
                var start_time_object=new Date(book.start_date+" "+book.book_time);
                var end_time_object=new Date(start_time_object.getTime() + 
                parseInt(book.duration)*60*1000);
                var start_time=start_time_object.toISOString();
                var end_time=end_time_object.toISOString();
                if(book.name==='null' || book.name==null)
                    book.name='';
                event={
                        id:book.id,
                        resourceId: book.provider_id,
                        // start: start_time,
                        // end:end_time,
                        title:book.name,
                        overlap:false,
                        backgroundColor:`${book.service_item_id==0 ? '#ff0000' :  '#1f1dd0'} `,
                        textColor:'#fff',
                        borderColor:'transparent',

                        rrule: {
                            count: 13,
                            freq: 'weekly',
                            interval: 1,
                            byweekday: [ 'mo', 'fr' ],
                            dtstart: '2020-03-01',
                            duration:"01:30"
                        },
                        groupId:book.id,

                        extendedProps:{
                            user_id:book.user_id,
                            user_name:book.user_name,
                            user_email:book.user_email,
                            user_phone_number:book.user_phone_number,
                            duration:book.duration,
                            book_date:book.book_time,
                            from_admin:book.from_admin,
                            service_type:book.service_type,
                            service_item_id:book.service_item_id,
                            provider_id:book.provider_id,
                            comment:book.comment,


                        }
                }
                return event;
            }

What is issue here? If anyone has experience, please help me.

I am sharing my calendar how it is being showed

There is no recurring event here.

Example of event data:

events=[ { id: 117, resourceId: 3, title: "Personal", backgroundColor: "#ff0000 ", rrule: { count: 13, freq: "weekly", interval: 1, byweekday: [ "mo", "fr" ], dtstart: "2020-03-01", duration: "01:30" }, groupId: 117 }, ]

Answer 1

You need to make sure you include the rrule Javascript library file, and the fullCalendar rrule plugin file, and include the plugin in your calendar config.

You also need to remove the "duration" property from your rrule, because that's not a valid rrule option, and will cause an error.

At the time of writing, you can get the rrule file from https://cdn.jsdelivr.net/npm/[email protected]/dist/es5/rrule.min.js

Here's a working demo: https://codepen.io/ADyson82/pen/poJWLzB

Demo code, for reference:

document.addEventListener("DOMContentLoaded", function() {
  var calendarEl = document.getElementById("calendar");
  var calendar = new FullCalendar.Calendar(calendarEl, {
    plugins: ["interaction", "dayGrid", "timeGrid", "resourceTimeline", "rrule"],
    header: {
      left: "prev,next today",
      center: "title",
      right: "dayGridMonth,timeGridWeek,timeGridDay"
    },
    events: [ { id: 117, resourceId: 3, title: "Personal", backgroundColor: "#ff0000 ", rrule: { count: 13, freq: "weekly", interval: 1, byweekday: [ "mo", "fr" ], dtstart: "2020-03-01" }, groupId: 117 } ]
  });

  calendar.render();
});