[英]YIi2 FullCalendar and working with event instances from rrule post processing
[英]Fullcalendar recurring event with rrule is not working
我正在使用 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;
}
這里有什么問題? 如果有人有經驗,請幫助我。
這里沒有重復發生的事件。
事件數據示例:
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();
});
我遇到過這個問題!我正在使用@fullcalendar/@5.1.0(即@fullcalendar/core、@fullcalendar/rrule 等),重復事件沒有顯示。 然后我將所有 fullcalendar 依賴項 (@fullcalendar/) 更改為 @5.2.0 並使用 rrule @2.6.4。 它工作正常!
您可以使用下面的代碼顯示一天、每天、每周、每兩周和每月的事件,並帶有鼠標懸停事件的工具提示。
在這個例子中,你可以看到我們如何在 FullCalendar 中設置規則。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.