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/rrule@4.4.0/main.min.js"></script>
    <script src="https://unpkg.com/@fullcalendar/core@4.4.0/main.min.js"></script>
    <script src="https://unpkg.com/@fullcalendar/interaction@4.4.0/main.min.js"></script>
    <script src="https://unpkg.com/@fullcalendar/daygrid@4.4.0/main.min.js"></script>
    <script src="https://unpkg.com/@fullcalendar/timegrid@4.4.0/main.min.js"></script>
    <script src="https://unpkg.com/@fullcalendar/resource-common@4.4.0/main.min.js"></script>
    <script src="https://unpkg.com/@fullcalendar/resource-daygrid@4.4.0/main.min.js"></script>
    <script src="https://unpkg.com/@fullcalendar/resource-timegrid@4.4.0/main.min.js"></script>
    <scritpt src="https://unpkg.com/@fullcalendar/moment@4.4.0/main.min.js"></scritpt>
    <script src="https://unpkg.com/@fullcalendar/interaction@4.4.0/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/rrule@2.6.2/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();
});

Answer 2

I have faced this issue!I was working with @fullcalendar/ @5.1.0 (ie.,@fullcalendar/core, @fullcalendar/rrule and so on) , the recurring events didn't display. Then I changed all my fullcalendar dependencies (@fullcalendar/) to @5.2.0 and used rrule @2.6.4. It is working fine!

Answer 3

You can use the code below to show a day, daily, weekly, every two weeks and monthly events with a tooltip on mouse hover event.

In this example you can see how we can set up rrule in FullCalendar.

Visit here- https://stackoverflow.com/a/68770685/9673996