Develop Reference

events with rrule plugin is not updating after drag/drop on change view grid fullcalendar v4

I am currently working on Fullcalendar v4 with rrule plugin
I have this code
var calendarEl = document.getElementById('calendardemo');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: ['interaction', 'dayGrid', 'timeGrid', 'momentTimezone', 'rrule', 'list'],
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
editable: true,
events: [
{ // standard property
title: 'This is sample event',
start: '2019-12-29',
end: '2019-12-31'
},
{
title: 'event with rrule plugin',
rrule: {
freq: 'weekly',
interval: 5,
byweekday: [ 'mo', 'fr' ],
dtstart: '2019-12-29T10:30:00',
until: '2020-12-31'
}
}
]
});
calendar.render();
please note:
{ // this is the standard (No issues)
title: 'This is sample event',
start: '2019-12-29',
end: '2019-12-31'
}
{ // Not updating on change view
title: 'event with rrule plugin',
rrule: {
freq: 'weekly',
interval: 5,
byweekday: [ 'mo', 'fr' ],
dtstart: '2019-12-29T10:30:00',
until: '2020-12-31'
}
}
Link to a demo
Now when I drag & drop "This is sample event" then change view grid or click < > it stays updated. but when I drag & drop "event with rrule plugin" then change view grid or click < > it's not updated. it just stays where it was loaded in first load. Please help. Thanks !

You might have to add a form that would allow a user to change repeated rules when they begin to drag them. Otherwise, could you describe expected behaviour after the user drops repeated event on another date. What changes would be applied to a rule?

FullCalendar rrule "Until" not being inclusive

The spec for the rrule plugin says that Until dates are Inclusive. I'm not seeing that. Am I mis-reading?
https://github.com/jakubroztocil/rrule
If given, this must be a Date instance, that will specify the limit of the recurrence. If a recurrence instance happens to be the same as the Date instance given in the until argument, this will be the last occurrence.
I have this test:
calendaring.testRecur = function(dayOrWeek){
var rruleDataWeekly = {
freq: 'WEEKLY',
interval: 1,
byweekday: [ 'MO', 'WE', 'FR' ],
dtstart: '2019-11-01T10:30:00',
until: '2019-11-15'
};
var rruleDataDaily = {
freq: 'DAILY',
interval: 1,
count: 5,
dtstart: '2019-11-04T09:30:00',
};
var rruleData = dayOrWeek === "day" ? rruleDataDaily : rruleDataWeekly;
var title = dayOrWeek === "day" ? "Test Daily" : "Test Weekly";
var newEvent = {
title: title,
duration: "00:45",
rrule: rruleData
};
calendaring.calendar.addEvent(newEvent);};
And this is my config for the calendar:
calendaring.calendar = new Calendar(calendarEl, {
events: '/myurl',
plugins: ['rrule', 'interaction', 'dayGrid', 'timeGrid', 'bootstrap', 'list'],
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay, listDay',
},
defaultView: 'timeGridWeek',
slotDuration: '00:15',
slotLabelInterval: '01:00',
minTime: '06:00',
maxTime: '21:00',
allDaySlot: false,
slotEventOverlap: false,
buttonText: {
today: 'Today',
month: 'Month',
week: 'Week',
day: 'Day',
list: 'List',
},
themeSystem: 'bootstrap',
editable: true,
selectable: true,
droppable: true,
fixedWeekCount: false,
hiddenDays: [ 0, 6 ],
eventLimit: 6,
});
calendaring.calendar.render();};

The issue was I didn't have a time associated with my UNTIL. So, it assumes midnight, not 23:59:59. Phew. Thanks #ADyson for the help.

You can use the code below to show a day, daily, weekly, every two weeks and monthly events with a tooltip on mouse hover event.
In this example you can see how we can set up rrule in FullCalendar.
Visit here- https://stackoverflow.com/a/68770685/9673996

Full Calendar slow rendering

I'm working with a legacy codebase that uses full calendar (2.3.1) in a react based portal to display a resource view as seen in the picture attached.
The calendar starts to get very slow whenever i move a date forwards or backwards or select a date from date picker. However this problem arises only when there are a lot of columns in resource view and when there are less columns like 4 or 5, the calendar works perfectly.
Is there a way to improve the performance on this view?
Here's the code that initalizes the calendar:
$('#calendar').fullCalendar({
themeSystem: 'bootstrap3',
header: false,
events: [],
views: {
multiColAgendaDay: {
type: 'multiColAgenda',
duration: { days: 1 },
numColumns: employees.length,
columnHeaders: employees,
},
},
defaultView: defaultView,
eventMouseover: this.eventMouseover,
//eventMouseout: this.eventMouseout,
eventClick: props.onSelectEvent,
nowIndicator: true,
dayClick: this.selectTimeSlot,
eventDrop: this.eventDrop,
changeView: this.changeView,
eventResize: this.eventResize,
windowResize: this.windowResize,
slotDuration: '00:15',
axisFormat: 'h:mmA',
viewRender: this.viewRender,
allDaySlot: false,
eventRender: this.eventRender,
minTime: convert12To24(openingTime, 'hh:mma'),
maxTime: convert12To24(closingTime, 'hh:mma'),
businessHours: {
dow: [0, 1, 2, 3, 4, 5, 6],
start: convert12To24(openingTime, 'hh:mma'),
end: convert12To24(closingTime, 'hh:mma'),
},
});
Change View:
changeView = view => {
this.calendarComponent.fullCalendar('changeView', view);
};
I CAN'T CHANGE THE CURRENT CALENDAR LIBRARY AND HAVE MAKE DO WITH THIS ONLY

FullCalendar Recurring Events not working properly

I am using FullCalendar to try and display both a year list of events and a calendar view of events. Both are having problems with the same code structure. (So I am using the list one as my example.
I am trying to set an end date on my recurring events. They can be displayed on multiple days of the week (this example is only Saturdays). I have 2 possible solutions that don't meet my needs.
Solution one is the following:
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
defaultView: 'listYear',
views: {
listYear: { buttonText: 'Diary Dates' }
},
header: {
left: '',
center: '',
right: 'prev title next'
},
events: [{
title : "Shoalhaven Heads Seafood and Fresh Produce Fair",
url: 'https://dev.allswell.com.au/event/shoalhaven-heads-seafood-and-fresh-produce-fair/',
backgroundColor: '#dd4242',
borderColor: '#dd4242',
start: '08:00',
end: '13:00',
dow: [6],
ranges: [{
start: '2018-04-21T08:00:00',
end: '2018-11-03T13:00:00',
}],
},
{
title : "BOWIE UNZIPPED at the BOWLO!",
url: 'https://dev.allswell.com.au/event/bowie-unzipped-at-the-bowlo/',
backgroundColor: '',
borderColor: '',
start: '2018-04-27',
allDay: true,
}]
});
});
</script>
This successfully produces recuring events on the days I wanted. However the ranges do not reem to work, as they are printed for every Saturday until the end of time (Should only go until November this year).
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
defaultView: 'listYear',
views: {
listYear: { buttonText: 'Diary Dates' }
},
header: {
left: '',
center: '',
right: 'prev title next'
},
events: [{
title : "Shoalhaven Heads Seafood and Fresh Produce Fair",
url: 'https://dev.allswell.com.au/event/shoalhaven-heads-seafood-and-fresh-produce-fair/',
backgroundColor: '#dd4242',
borderColor: '#dd4242',
start: '2018-04-21T08:00:00',
end: '2018-11-03T13:00:00',
dow: [6],
},
{
title : "BOWIE UNZIPPED at the BOWLO!",
url: 'https://dev.allswell.com.au/event/bowie-unzipped-at-the-bowlo/',
backgroundColor: '',
borderColor: '',
start: '2018-04-27',
allDay: true,
}]
});
});
</script>
I then tried another option, adding the date to the start/end parameters. This did the opposite, It was able to limit the events to the date range specified, however they would not be on specific days, but rather it would stretch over all dates.
I have attached images of both outcomes below.
1st Solution 2018:
1st Solution 2019:
2nd Solution 2018:
2nd Solution 2019:

Show days and events only of the current month in the fullcalendar.io

In the 'Month' view of the fullcalendar.io I would like to display the current month only, with the current month events. However, currently what is being showed is a month counting from the current date.
E.g: If today's date was 2016-20-03...
- What fullcalendar display: From: 2016-20-03 To: 2016-19-04
- What I would like to display: From 2016-01-03 To: 2016-31-03
After reading the documentation and looking up around I couldn't find any variable or set up for the fullcalendar to achieve this so I thing that I will have to modify the fullcalendar.js
Has someone already done this?
View
$('#' + engineerId).fullCalendar({
header: false,
views: {
plainMonth: {
type: 'basic',
duration: { days: 31 },
buttonText: 'Month'
},
plainWeek: {
type: 'basic',
duration: { days: 7 },
buttonText: 'Week'
}
},
firstDay: 1,
dayNamesShort: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
defaultView: 'plainWeek',
theme: true,
viewRender: function (view, element) {
$('#CalendarViewObject').val(view.name);
viewName = view.name;
},
aspectRatio: ratio,
editable: true,
eventLimit: false, // allow "more" link when too many events
events: {
startEditable: false,
durationEditable: false,
url: window.location.href.toString().split(window.location.host)[1] + '/GetEmployeeEvents',
type: 'POST',
data: function () { // a function that returns an object
$("[id^=qtip-]").empty();
$("[id^=qtip-]").remove();
return {
serviceAreaId: serviceAreaId,
employeeId: engineerId,
calendarViewObject: $('#CalendarViewObject').val()
};
},
error: function () {
alert('there was an error while fetching events!');
}
},...
Controller
public JsonResult GetEmployeeEvents(DateTime start, DateTime end, string queueName, string employeeId, string calendarViewObject)
The 'start' and 'end' dates are set up by the fullcalendar.io, and those dates are the ones that I would like to change.
Thank you very much in advance,
Alvykun

After some more research in the fullcalendar documentation, I ended up by setting the following:
$(\'.calendarClass\').fullCalendar(\'gotoDate\',new Date(y, m, 1));
This did the trick and works!