【发布时间】：2020-05-14 19:45:36
【问题描述】：
我在使用 REST API 在共享点中使用 jQuery Full Calendar 将日期范围设置为我的重复事件时遇到问题。下面我提供了我用来实现目标的脚本。如您所见，我使用的是“道氏”方法，因为它提供了最好的结果。重复发生的事件显示在日历上，但它在未来和过去无限显示。有没有办法将事件限制在特定日期范围内？任何帮助或想法将不胜感激。
[编辑]
我正在更新我的原始帖子，因为我能够弄清楚如何设置重复事件问题的范围（无限运行）。我研究并发现我必须使用“eventRender”设置范围。添加此方法解决了未来和过去无限显示的事件。现在我遇到的问题是；第一的。我无法显示不同事件的正确开始时间。当事件的开始时间发生在不同的时间时，它们都显示相同的开始时间。第二。日历现在只显示重复事件而不显示单个事件。我可以通过操纵在 SharePoint 列表中输入的日期来伪造它，但这似乎不是一个好的做法，尤其是当有人在我身后工作时。我发布了一个更新的脚本，如果您看到上述问题的修复，您将不胜感激。
当我运行日历时，结果的屏幕截图，它在所有重复事件上显示相同的日期，而对于每个不同的重复事件，日期假设是不同的日期。
var events = [];
var ele = [];
var listUrl = "../_vti_bin/listdata.svc/";
$(document).ready(function() {
Retreive();
////Close Modal Window
jQuery(document).on("click", ".closeBtn", function(){
jQuery('#myModal').fadeOut();
});
jQuery("[data-fancybox]").fancybox({
thumbs: false,
hash: false,
loop: true,
keyboard: true,
toolbar: false,
animationEffect: false,
smallBtn: "false",
arrows: true,
clickContent: false
});
});
function Retreive() {
var listUrl = "../_vti_bin/ListData.svc/ExecSecCalendarList";
$.ajax({
url: listUrl,
type: "GET",
data: {
$select: "Title,Description,StartTime,EndTime,AllDayEvent,Recurrence,RecurStartDate,RecurEndDate,ThemeColor,EventId,URL"
},
headers: {
accept: "application/json;odata=verbose"
},
success: function(data) {
$.each(data.d.results, function(i, value) {
currObj = this;
var fADE = currObj.AllDayEvent;
if (fADE != null) {
if (fADE == 0) {
thisADE = false
} else thisADE = true;
}
var thisID = currObj.EventId;
var thisTitle = currObj.Title;
var thisRecurrence = currObj.Recurrence;
var thisDesc = currObj.Description;
var thisURL = currObj.URL;
ele.push({
title: currObj.Title,
id: currObj.EventId,
start: value.StartTime,
end: value.EndTime,
description: currObj.Description,
color: value.ThemeColor,
allDay : true,
url:currObj.URL,
start: '13:00:00',//How to set dynamically ????
end: '22:00:00',//How to set dynamically ????
dow: [currObj.Recurrence],///Works - what date of the week to show event
ranges: [{ //repeating events are only displayed if they are within at least one of the following ranges.
start: currObj.RecurStartDate, //next two weeks
end: currObj.RecurEndDate
}]
/**/
});
});
BindCalendar();
}
});
}
function BindCalendar() {
var calendarioDiv = $('#calendar');
var fullCalendar = calendarioDiv.fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay,agenda'
},
events: ele,
eventRender: function(event, element, view){
//console.log(dow);
return (event.ranges.filter(function(range){
return (event.start.isBefore(range.end) &&
event.end.isAfter(range.start) );
}).length)>0;
},
/**/
eventClick: function (calEvent, jsEvent, view) {
jsEvent.preventDefault();
$('#myModal a').remove();
$('#myModal #eventTitle').text(calEvent.title);
var $description = $('<div/>');
$description.append($('<p/>').html('<b>Start:</b>' + calEvent.start.format("DD-MMM-YYYY HH:mm a")));
if (calEvent.end != null) {
$description.append($('<p/>').html('<b>End:</b>' + calEvent.end.format("DD-MMM-YYYY HH:mm a")));
}
$description.append($('<p/>').html('<b>Description:</b>' + calEvent.description));
$('#myModal #pDetails').empty().html($description);
$('#myModal').css({left: event.pageX});
$('#myModal').css({top: event.pageY});
$('#modalURL span').html('<a data-fancybox data-type="iframe" data-src="'+ calEvent.url +'" href="javascript:;" title="Select to e-mail" >'+ calEvent.url +'</a>');
//Open in new window without fancybox
//$('#modalURL').append($('<p/>').html('<a href="'+calEvent.url+'" title="Select to e-mail" target="_blank">'+calEvent.title+'</a>'));
$('#myModal').fadeIn();
},
error: function() {
alert('Error');
},
editable: false,
draggable: true,
firstDay: 0,
monthNames: ['JANUARY', 'FEBRUARY','MARCH', 'APRIL', 'MAY','JUNE', 'JULY', 'AUGUST', 'SEPTEMBER','OCTOBER', 'NOVEMBER', 'DECEMBER'
],
dayNames: ['Sunday', 'Monday', 'Tuesday','Wednesday', 'Thursday', 'Friday', 'Saturday'
],
dayNamesShort: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
allDay: true
});
}
【问题讨论】：
标签： javascript jquery sharepoint fullcalendar