Develop Reference

Show all date outside validarange in fullcalender

I am using fullcalender where I have added validRange property.
After adding user won't be able to navigate outside given daterange also fullcalender will show disable those blocks.
But I want to see Date in those disabled colums.
CodePen Demo
calender options:
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'dayGrid' ],
timeZone: 'UTC',
height: 'auto',
events: 'https://fullcalendar.io/demo-events.json?overload-day',
validRange: {
start: '2021-05-01',
end: new Date()
},
});
Current Output:
Expected Output:

Since you set up the end date with today, so it's normal.
Just remove the end: new Date() of validRange:.
You can refer to this codepen.
Good Luck:)

setOption startParam works weird in fullcalendar v5

I was trying to set startParam option dynamically.
But it seems working weird by updating the key rather update value.
calendarEvents.setOption('startParam', moment().format());
calendarEvents.refetchEvents();
If I run the methods and check the form data, then the startParam will be look like the following.
2021-02-15T19:09:13-07:00: 2021-01-01T00:00:00-07:00
end: 2030-01-01T00:00:00-07:00
I guess the setOption method updates the key not value for the start params.
Why does this happen and how to fix this?
UPDATE: My calendar code
calendarEvents = new FullCalendar.Calendar(calendarEventsEl, {
headerToolbar: false,
contentHeight: 300,
initialView: 'listAll',
views: {
listAll: {
type: 'listYear',
duration: { years: 9 },
},
},
navLinks: false,
eventDidMount: function (arg) {
...
},
eventTimeFormat: {
hour: 'numeric',
minute: '2-digit',
meridiem: 'short'
},
eventSources: [{
method: 'POST',
url: '/calendar/get_all_by_id/' + id,
}],
eventSourceSuccess: function(content, xhr) {
...
return events;
}
});
calendarEvents.render();
})

It's working properly.
The startParam option sets the name of the parameter which fullCalendar sends to the server for the start value, when fetching events. It doesn't set the value. The value which is sent is always the start date of the range which the user has just navigated to. You don't need to change that value yourself, and anyway it makes no sense to try and give it a fixed value - it is adjusted dynamically by fullCalendar every time events need fetching.
What are you actually trying to achieve with this code? Are you trying to change the current date on the calendar programmatically? If so then use https://fullcalendar.io/docs/Calendar-gotoDate

Events are duplicated when switching months in Fullcalendar v4

I'm using Fullcalendar v4 like this. Events are loaded correctly, but when I manually add a new one (it is also saved to SQL database via ajax call), then I change month and return back, this event is rendered twice. I'm not sure what cause this, because when I change months again, event is still doubled only, not trippled.
I've tried set lazyLoading or cache to false and also, for example, remove all events before rendering with $('.fc-event').remove(); but it did not help.
var calendar = new FullCalendar.Calendar(document.getElementById('calendar'), {
defaultView: 'resourceTimeline30',
views: {
resourceTimeline30: {
type: 'resourceTimeline',
duration: { days: 30 }
}
},
editable: false,
selectable: true,
resources: [ ... ],
events: 'https://www.example.com/?fullcalendar=load',
/*
// did not help
lazyLoading: true,
events: {
url: 'https://www.example.com/?fullcalendar=load',
cache: false,
extraParams: function() {
return {
cachebuster: new Date().valueOf()
};
}
}
*/
});
calendar.render();

So, if anybody needs it, according comments above, the working solution is:
Replace:
events: 'https://www.example.com/?fullcalendar=load',
With
eventSources: [{
'id': 1,
'url': 'https://www.example.com/?fullcalendar=load'
}],
And use that ID as second parameter in addEvent()
calendar.addEvent(event, 1);

Fullcalendar : Duplicates on agendaWeek view

I'm trying to use FullCalendar v2.4.0 (with jQuery 1.10.2 and moment.js 2.1) in order to display events that are stored in a database.
I'm using json to send events to FullCalendar.
I have some problems of duplicated events in the 'agendaWeek' view.
Everything is working properly for the other views ('month', 'basicWeek', 'basicDay', 'agendaDay').
As i read on stackoverflow, I tried to remove the event source, to remove events,... but i'm still facing the problem.
Here's how the code looks like :
$('#calendar').fullCalendar({
header: {
left: 'prev,next,today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '<?=date("Y-m-d")?>',
defaultView: 'agendaDay',
timeFormat: 'HH:mm',
displayEventEnd: true,
events: {
url: '/events_getlist_json.php',
type: 'GET',
cache: false,
error: function() {
alert('there was an error while fetching events!');
},
success: function(data) {
$(data).each(function(index) {
console.log( index + ": " + data[index].start );
})
}
}
});
$(document).ready(function() {
setTimeout(function(){
$('#calendar').fullCalendar('render');
}, 100);
});
The console log returns 2 events : "0: 2015-08-24T11:00:00" and "1: 2015-08-26T12:30:00" but i can see 4 of them on the calendar.
If you have any idea why duplicates happen in 'agendaWeek' view only, and how to remove them, it would be really nice to help.
Thank you in advance.
edit : added version of the 3 scripts

This was worked out in the comment between the OP and I.
Fullcalendar 2.4.0 conflicts with momentjs 2.1 causing duplicate events to appear in the agendaWeek view. Upgrade to the latest momentsjs to fix the issue.

Fullcalendar : disableResizing is only working on month view

I put three views in my fullcalendar : month, agendaWeek and agendaDay.
I need to activate drag & drop and forbidden events resizing.
I use this following solution to do that on each render event :
$("#calendar").fullCalendar(
'renderEvent',
{
title: "event name",
editable: true,
disableResizing: true
},
true
);
It's only working in the month view, that is I can drag & drop and resize events in agendaWeek and agendaDay views.
How can I remove resizing in this views ?
Thanks.

I try to use the calendar option durationEditable:false but it did not work. The workaround was to use CSS and hide the resize element:
.fc-resizer.fc-end-resizer {
display: none;
}

place eventStartEditable: false as shown here:
initialView: 'resourceTimeline',
slotMinWidth:1,
eventDurationEditable: false, // Disable Resize
eventStartEditable: false, // disable dreage drop
eventTimeFormat: {
hour: '2-digit',
minute: '2-digit',
hour12: true
},
Its Working,
for More
https://fullcalendar.io/docs/v1/disableResizing

disableResizing is available only as a global setting in FullCalendar. So if you want to disable resizing of all events in the calendar, you simply set the setting when you initialize FullCalendar:
var $calendar = $('#calendar').fullCalendar({
[...]
disableResizing: true,
[...]
});
If you want to disable resizing of specific events, you could take a look at this pull request.

place editable:false as shown here:
header:{
left:'prev,next today',
center:'title',
right: 'agendaWeek, list, rrule'//'month,agendaWeek,agendaDay'
},
editable:false, // place it under header. it worked for me
Works for Version 3