gpt4 book ai didi

javascript - 带 rrule 的全日历重复事件不起作用

转载 作者:行者123 更新时间:2023-12-02 21:34:44 25 4
gpt4 key购买 nike

我正在使用 fullcalendar 4.4.0,除了 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;
}

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

我正在分享我的日历的显示方式 enter image description here

这里没有重复发生的事件。

事件数据示例:

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

最佳答案

您需要确保包含 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 的全日历重复事件不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60532519/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com