带有 rrule 的 Fullcalendar 重复事件不起作用答案

【问题标题】：Fullcalendar recurring event with rrule is not working带有 rrule 的 Fullcalendar 重复事件不起作用
【发布时间】：2020-03-04 18:27:40
【问题描述】：

我使用的是 fullcalendar 4.4.0，除了 rrule 之外一切正常。如果我尝试简单的重复，它可以工作，但 rrule 重复不起作用。让我分享我的代码

    <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>

生成事件的代码如下。

             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;
            }

这里有什么问题？如果有人有经验，请帮助我。

我正在分享我的日历显示方式

这里没有重复事件。

事件数据示例：

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 }, ]

【问题讨论】：

请给我们一些book 变量的样本数据。然后我们可以准确地重现问题。并请出示您的日历代码。
我分享了我的数据结构
我已经分享了我的数据结构，我只是尝试检查示例重复规则，但没有成功。
谢谢，但我没有要求数据结构 - 我已经看到了。我实际上要求提供一些 data :-)。 JSON.stringify(book) 的输出会很好。
我注意到的一件事......您已经注释掉了您的活动的 start 属性。如果没有开始，FullCalendar 根本不会显示事件。即使事件重复发生，重复的模式仍然必须在某个时间开始。所以当你说它“不工作”时，你的意思是重复没有发生，或者事件根本没有出现？你没有澄清这一点。（一般来说，在未来，与其说某事“不工作”，不如说清楚代码在做什么，以及你期望它做什么。）

标签： javascript fullcalendar fullcalendar-4 rrule

【解决方案1】：

您需要确保包含 rrule Javascript 库文件和 fullCalendar rrule 插件文件，并将插件包含在您的日历配置中。

您还需要从 rrule 中删除“duration”属性，因为这不是有效的 rrule 选项，并且会导致错误。

在撰写本文时，您可以从https://cdn.jsdelivr.net/npm/rrule@2.6.2/dist/es5/rrule.min.js 获取 rrule 文件

这是一个工作演示：https://codepen.io/ADyson82/pen/poJWLzB

演示代码，供参考：

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

【讨论】：

是的，我没有包含 javascript 库，只包含完整的日历 rrule 库。那是问题。在我包含 javascript rrule 库之后，它现在运行良好。感谢您的支持.. 祝您好运。

【解决方案2】：

我遇到了这个问题！我正在使用@fullcalendar/@5.1.0（即@fullcalendar/core、@fullcalendar/rrule 等），没有显示重复事件。然后我将我所有的完整日历依赖项（@fullcalendar/）更改为@5.2.0，并使用了 rrule @2.6.4。它工作正常！

【讨论】：

【解决方案3】：

您可以使用下面的代码显示一天、每天、每周、每两周和每月事件，并带有鼠标悬停事件的工具提示。

在此示例中，您可以看到我们如何在 FullCalendar 中设置 rrule。

访问这里-https://stackoverflow.com/a/68770685/9673996

【讨论】：