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
Related
I am trying to use this example -- https://fullcalendar.io/docs/other-calendar-dragging -- to create a page that shows 2 FullCalendar calendars and allows the user to drag events from one calendar to the other. I am able to render both calendars, and pull events for each via ajax from a php page. However, the events only display on the first calendar. If I comment out this line:
events: 'ajax/calendar.php?action=get_monthly_patrol_calendar'
from calendar1, then the events will display on calendar2 only. I'd really appreciate help to enable events to display on BOTH calendars.
FYI, here is my code:
HTML:
<div id="kt_calendar"></div>
<div id="kt_calendar2" ></div>
JS:
var todayDate = moment().startOf('day');
var show_now_indicator=true;
var YM = todayDate.format('YYYY-MM');
var YEAR = todayDate.format('YYYY');
var MONTH = todayDate.format('MM');
var YESTERDAY = todayDate.clone().subtract(1, 'day').format('YYYY-MM-DD');
var TODAY = todayDate.format('YYYY-MM-DD');
var TOMORROW = todayDate.clone().add(1, 'day').format('YYYY-MM-DD');
var NEXT_MONTH = todayDate.clone().add(1, 'month').format('YYYY-MM-DD');
var cal = document.getElementById('kt_calendar');
var calendar = new FullCalendar.Calendar(cal, {
plugins: [ 'bootstrap', 'interaction', 'dayGrid', 'dayGridPlugin', 'timeGrid', 'list' ],
themeSystem: 'bootstrap',
events: 'ajax/calendar.php?action=get_monthly_patrol_calendar',
showNonCurrentDates:false,
isRTL: KTUtil.isRTL(),
contentHeight: 'auto',
//aspectRatio: 3, // see: https://fullcalendar.io/docs/aspectRatio
nowIndicator: show_now_indicator,
now: TODAY,
defaultDate: TODAY,
initialDate: TODAY,
defaultView: 'dayGridMonth',
eventOrder: 'order_by',
eventLimit: false, // true to allow "more" link when too many events
navLinks: true,
eventResizableFromStart: false, //Whether the user can resize an event from its starting edge.
eventDurationEditable: false, //Allow events’ durations to be editable through resizing.
eventResourceEditable: reschedule,//Determines whether the user can drag events between resources.
droppable:reschedule,//Determines if external draggable elements or events from other calendars can be dropped onto the calendar.
eventStartEditable: reschedule,//Allow events’ start times to be editable through dragging.
editable: reschedule, //Determines whether the events on the calendar can be modified.
eventDrop: function(info) {
reschedule_event(info);
},
eventClick: function(info) {
do_event_click(info);
},
eventRender: function(info) {
var element = $(info.el);
},
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,dayGridWeek,dayGridDay'
},
views: {
dayGridMonth: { buttonText: 'monthly' },
dayGridWeek: { buttonText: 'weekly' },
dayGridDay: { buttonText: 'daily' }
},
});
calendar.render();
var cal2 = document.getElementById('kt_calendar2');
var calendar2 = new FullCalendar.Calendar(cal2, {
plugins: [ 'bootstrap', 'interaction', 'dayGrid', 'dayGridPlugin', 'timeGrid', 'list' ],
themeSystem: 'bootstrap',
events: 'ajax/calendar.php?action=get_monthly_patrol_calendar',
showNonCurrentDates:false,
isRTL: KTUtil.isRTL(),
contentHeight: 'auto',
//aspectRatio: 3, // see: https://fullcalendar.io/docs/aspectRatio
nowIndicator: show_now_indicator,
now: NEXT_MONTH,
defaultDate: NEXT_MONTH,
initialDate: NEXT_MONTH,
defaultView: 'dayGridMonth',
eventOrder: 'order_by',
eventLimit: false, // true to allow "more" link when too many events
navLinks: true,
eventResizableFromStart: false, //Whether the user can resize an event from its starting edge.
eventDurationEditable: false, //Allow events’ durations to be editable through resizing.
eventResourceEditable: reschedule,//Determines whether the user can drag events between resources.
droppable:reschedule,//Determines if external draggable elements or events from other calendars can be dropped onto the calendar.
eventStartEditable: reschedule,//Allow events’ start times to be editable through dragging.
editable: reschedule, //Determines whether the events on the calendar can be modified.
eventDrop: function(info) {
reschedule_event(info);
},
eventClick: function(info) {
do_event_click(info);
},
eventRender: function(info) {
var element = $(info.el);
},
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,dayGridWeek,dayGridDay'
},
views: {
dayGridMonth: { buttonText: 'monthly' },
dayGridWeek: { buttonText: 'weekly' },
dayGridDay: { buttonText: 'daily' }
},
});
calendar2.render();
Figured it out! The second call was failing bec it was running before the first call completed. I added a delay before loading the 2nd calendar, and now both months load fine:
setTimeout(function() { loadCal2(); }, 3000);
I am using FullCalendar v3.9.0 and need to show rows if it has any events only for week and day view. Pleas see the below image:
As you can see, above calendar showing rows of 8 AM to 12 PM. but it only has events from 9 to 11 AM. Thus I just want to show calendar from 9 AM to 11 AM.
I have tried it using filterResourcesWithEvents: true, but it didnt worked. Please see my code below:
$('#calendar').fullCalendar({
header: {
left: '',
center: 'prev, title, next',
right: 'today, month,agendaWeek,agendaDay,listWeek'
},
views: {
agendaWeek: {
columnHeaderFormat: 'ddd D/M',
}
},
minTime: "08:00:00", //I have tried by commenting this as well.
maxTime: "23:00:00", //I have tried by commenting this as well.
defaultDate: output,
filterResourcesWithEvents: false,
slotEventOverlap : false,
contentHeight: 2000,
navLinks: false,
editable: false,
eventLimit: true,
height: "auto",
events: course_data,
defaultView: 'agendaWeek'
});
Looking hopefully to have some suggestions or answer, Thanks!!
This is very confusing。。why event on 2017-09-02 before 9AM doesn't show while event after 9AM is effictive 。 is there any options can control this?
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listWeek'
},
defaultDate: '2017-09-12',
events: [
{
title: 'test11111',
start: '2017-09-01T16:00:00',
end: '2017-09-02T09:00:00'
},
{
title: 'test22222',
start: '2017-09-01T16:00:00',
end: '2017-09-02T08:00:00'
},
],
timeFormat: 'HH(:mm)',
displayEventEnd: {
month: true,
default: true
}
});
how can i make 2017-09-02 display in view?
You need to specify the nextDayThreshold. By default, it is set to 9am, and that means that any event ending before that will not be rendered on that day.
In your case you have an event ending at 8am, so you need a nextDayThreshold of 8am or earlier if you want that even to show up on that day:
nextDayThreshold: '08:00:00'
Working JSFiddle.
Fullcalendar nextDayThreshold docs
So I have spent the past 2 weeks trying to figure this out and tried all other previously proposed answers. I'm still not able to get it right.
I'm trying to setup a calendar where the recurring events are filtered within the specified date range.
Example: "My event" - every Thursday at 2:15PM - Between 2017/06/01 and 2017/06/30.
I've unsuccessfully tried the solutions proposed on this link:
Recurring Events in FullCalendar
In the end end I decided to follow this route:
https://github.com/c-trimm/moment-recur
It's a moments.js plugin (moment-recur) that should process the date range filter.
Please help!
My json feed returns:
[{
"title":"my event",
"start":"2017-06-01T14:15",
"dow":"4",
"recurrence":"moment().recur[{
start:\"2017-06-01\",
end:\"2017-06-30\"}]"
}]
My calendar works except for the fact that it will not stop publishing the event on Thursdays forever. I don't want to have to manually duplicate the event.
<link rel="stylesheet" type="text/css" href="/fullcalendar.css">
<script src='/jquery.min.js'></script>
<script src='/moment.min.js'></script>
<script src='/moment-recur.js'></script>
<script src='/fullcalendar.js'></script>
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,listWeek,listDay'
},
validRange: function(nowDate) {
return {
start: nowDate.clone().subtract(2, 'months'),
end: nowDate.clone().add(2, 'months')
};
},
// customize the button names,
// otherwise they'd all just say "list"
views: {
listDay: { buttonText: 'Day' },
listWeek: { buttonText: 'Week' },
},
hiddenDays: [ 5 ], // hide Fridays
editable: true,
eventLimit: true, // allow "more" link when too many events
businessHours: [ // specify an array instead
{
dow: [ 1 ], // Monday,
start: '12:30', // 8am
end: '22:00' // 6pm
},
{
dow: [ 2, 3 ], // Tuesday, Wednesday
start: '9:30', // 8am
end: '22:00' // 6pm
},
{
dow: [ 4, ], // Thursday
start: '13:00', // 10am
end: '22:00' // 4pm
},
{
dow: [ 7 ], // Sunday
start: '11:00', // 10am
end: '18:30' // 4pm
}],
events: 'my-event/feed',
//THIS IS WHERE I GET STUCK!!!!!
// I'm trying to implement this:
eventRender:
recurrence = moment().recur({
start: "01/01/2014",
end: "01/01/2015"
});
});
});
</script>
<div id='calendar'></div>
I believe i'm suppose to write it as a function but no mater what I try it either brakes the calendar or doesn't return any results. Thanks in advance to you all!
Below is the fiddler link for recurring events in fullcalendar.
http://jsfiddle.net/slicedtoad/duu0dx2t/1/
You need to specify dow property in event as specified in example.
$('#calendar').fullCalendar({
defaultDate: moment(),
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultView: 'month',
events: [{
title:"My repeating event",
start: '10:00', // a start time (10am in this example)
end: '14:00', // an end time (6pm in this example)
dow: [ 1, 4 ] // Repeat monday and thursday
}],
});
I'm using the jquery fullCalendar for a project. I only show the MONTH view and the WEEK view. In the month view, I only want to show max 4 events per day, but in the week view I want to display all the events for that day.
Does anyone know how to do that?
Here is a Fiddle: http://jsfiddle.net/qe53etk5/6/
Here's how I call the plugin:
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,agendaDay'
},
eventLimit: 1,
defaultDate: '2014-06-12',
defaultView: 'basicWeek',
editable: true,
events: []
});
As you can see, I put a limit but it's more for the month view...
Check the docs here and here. You can do this with the view option hashes.
$('#calendar').fullCalendar({
eventLimit: {
'month': 4, // adjust to 4 only for months
'default': false // display all events for other views
}
});
for fullCalendar 2.x use the following:
views: {
month: {
eventLimit: 2
},
agenda: {
eventLimit: {
default: false
}
}
},
see View-Specific Options for details