I am having issues setting the date range to my recurring events using jQuery Full Calendar in sharepoint using REST API. Below I provide the script I am using to achieve my goal. As you can see, I am using the ‘dow’ method because it rendered the best results. The recurring the events displays on the calendar, but it displays infinitely in the future as well as the past. Is there a way to constraint the events within a specific date range? Any help or ideas will greatly be appreciated.
[EDIT]
I'm updating my original post because I was able to figure out how to set the range for the recurring events issue (running infinitely). I researched and found that I had to set the range using the "eventRender". Adding this method solved the events showing infinitely in both the future and the past. Now the issue I'm having are; First. I can't show the correct start time for the different event. They all shows the same start time when the start times of the event occurs at different time. Second. The calendar now only displays recurring events and not show a single event. I can fake it by manipulating the date entered in the SharePoint List, but it don't seem like a good practice, especially when someone is working behind me. I posted an updated script and if you see a fixs for the mentioned issue, you would be greatly appreciated.
Screen capture of the results when I run the calendar, it displays the same dates on all the recurring events, when the dates are suppose to be different dates for each of the different recurring events.
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
});
}
