We Keep Coding

FullCalendar - How can I disable and grey out certain days

Is there a way in FullCalendar to disable & grey out certain days (for example weekends and national holidays)?
I tried something like this:
events: [
{
allDay: true,
title: "disabled",
editable: false,
id: "3",
start: "2022-11-15",
end: "2022-11-16",
color: "grey",
},

how to alert next month date

I'm using "fullcalendar" plug- https://fullcalendar.io/ in order to display tours on calendar
when user click next/pre button, how do i ALERT the next/pre full date?
for instant, if the calendar show me the current day (2019-06-03) and i click "next" then alert will display 2019-07-01. clicking "pre" will display 2019-05-01
my code:
<div id="calendar"></div>
<script>
$(document).ready(function() {
var initialLocaleCode = 'en';
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listMonth'
},
eventLimit: true,
editable: false,
events: [
{
title: 'tour 1',
start: '2019-05-05',
end: '2019-05-11',
className: 'bg-warning'
},{
title: 'title for tour num 2',
start: '2019-05-19',
end: '2019-05-25',
className: 'bg-purple'
},{
title: '3td tour title',
start: '2019-05-16',
end: '2019-05-21',
className: 'bg-info'
}
]
});
});
</script>

I'm not sure why you'd need to do this, since the new date will already be displayed at the top of your calendar.
However, putting that aside, one way to achieve it is to handle the viewRender event. This will occur anytime either the date range or the type of view is changed on the calendar, and fires just before the new view is actually displayed on the screen. As per the documentation, the view object supplied in the callback contains the the start and end dates which are about to be displayed.
You could write something like this:
viewRender: function( view, element )
{
alert(view.start.format("YYYY-MM-DD"));
}
Here's a working demonstration: http://jsfiddle.net/8bxqzfev/

fullcalendar eventmouseover with no reaction

In my FullCalendar I have configured 2 simple listeners: eventMouseover and eventClick.
eventClick works fine.
eventMouseover doesn't work. Any reaction. No alert is triggered and nothing appears on console log.
Fullcalendar 4.0.2;
JQuery 3.3.1;
Bootstrap 4.3.1;
I have tried with different web browsers with no result.
New test: i made an even simpler test. I used only the fullcalandar zip file provided (https://github.com/fullcalendar/fullcalendar/releases) for old version 3.10 and current version 4.0.2.
In one of the demo html files in the directory, i added my 2 listeners (eventClick and eventMouseover) like in the code above. Each listener make a simple console.log().
For version 3.10: the 2 listeners work fine.
For version 4.0.2: eventClick work fine and eventMouseover DOESN'T WORK.
document.addEventListener('DOMContentLoaded', function () {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: ['interaction', 'dayGrid', 'timeGrid', 'list'],
locale: 'fr',
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},
defaultDate: '2019-04-12',
navLinks: true, // can click day/week names to navigate views
weekNumbers: true,
weekNumbersWithinDays: true,
weekNumberCalculation: 'ISO',
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [
{
id: 1,
title: 'All Day Event',
start: '2019-04-01'
},
{
id: 2,
title: 'Long Event',
start: '2019-04-07',
end: '2019-04-10',
textColor: 'orange'
},
{
id: 11,
title: 'Dinner 2',
start: '2019-04-12T22:00:00'
},
{
id: 16,
title: 'Grand ménage',
start: '2019-04-18',
end: '2019-04-20'
}
],
eventClick: function (event_data) {
console.log('Clic');
alert('Clic: ' + event_data.event.id);
},
eventMouseover: function (event_data) {
console.log('Mouse over.');
alert('Mouse over.');
}
});
calendar.render();
});

Solved: With Fullcalandar v4, there is no more eventMouseover. It's replaced by 2 new listeners: eventMouseEnter and eventMouseLeave that works fine.

allow eventOverlap for background events only in fullcalendar

Is there a way to avoid event overlapping;
like the eventOverlap: false inside the fullcalendar config,
but on other hand allow overlap for background events?
I want to render some events as background events into my calendar, just as info (that there are already some events in other calendars) but allow me to create, move or resize my new event on top.
But all other events are not allowed to overlap inside this calendar.
I just try this, without success:
calendar:{
editable: true,
contentHeight: 'auto',
theme: true,
firstDay: 1,
eventOverlap: false,
nowIndicator: true,
allDaySlot: false,
slotDuration: '01:00:00',
snapDuration: '00:00:01',
axisFormat: 'HH:mm',
timeFormat: 'HH:mm',
timezone: 'local',
views: {
listThreeDay: {
type: 'list',
duration: { days: 3 },
buttonText: 'list 3 day'
},
listOneWeek: {
type: 'list',
duration: { weeks: 1 },
buttonText: 'list week'
}
},
businessHours: {
start: '06:00', // a start time (6am in this example)
end: '18:00', // an end time (6pm in this example)
dow: [ 1, 2, 3, 4, 5 ] // days of week (here monday till friday)
},
events: [
{
start: '00:00:00+02:00',
end: '08:00:00+02:00',
color: 'red',
rendering: 'background',
dow: [1],
overlap: true,
}
],
...
Following picture shows what I need:
background events (the red)
normal events (blue) overlapping background events
normal events (blue) do not overlap on other normal events

You can use quite a simple custom function on the eventOverlap callback to achieve this. Simply test whether the event that is being overlapped onto is a background event or not:
eventOverlap: function(stillEvent, movingEvent) {
return stillEvent.rendering == "background";
}
You also don't need to specify overlap: true on any of your individual background events.
A working example can be seen here: http://jsfiddle.net/sbxpv25p/18/
https://fullcalendar.io/docs/event_ui/eventOverlap/ explains about the use of a custom function for this callback.
N.B. You may already realise this, but it's worth pointing out: if you plan to save the newly dragged/resized events back to your database, you'll need to double-check the overlap rules on the server as well, since any rules written in JavaScript can be easily disabled or bypassed by anyone with a knowledge of the browser's developer tools. These kind of front-end rules are useful for user-friendliness only - they can't be 100% relied upon to validate your data.

Extending ADyson answer, on FullCalendar 5 you need to change "rendering" by "display":
eventOverlap: function(stillEvent, movingEvent) {
return stillEvent.display == "background";
}

Disable Event resizing in Angular-UI calendar / fullcalender

We don't have any duration for our events that we visualize using angular-ui-calendar, so we don't want the user to do any resizing, while still being able to drag&drop the events to move them to another date and time. Where can I configure this?
$scope.uiConfig = {
calendar: {
height: 450,
editable: true,
// here?! resizable: false won't work
$scope.events = [
{
// or here? resizable: false won't do anything
title: "Test", start: new Date(2014, 0, 1, 12, 0), end: new Date(2014, 0, 1, 12, 30), allDay: false}
];
Of course I could just revert the resize in the event handler (eventResize), but I think that results in a bad user experience.
Also: We would like to hide the end date of an event, since we don't have any (skipping the endDate property will just result in a two hour duration, so using half an hour will at least keep the size small)
Thanks!

Depends on your version of fullcalendar. The latest is eventDurationEditable (since 1.6.3).
http://arshaw.com/fullcalendar/docs/event_ui/eventDurationEditable/
Example:
$('#calendar').fullCalendar({
editable: true,
eventDurationEditable: false, ...
Deprecated version
$('#calendar').fullCalendar({
editable: true,
disableResizing: true, ...

Current version of full calendar has depreciated disableResizing: true option.
You could simply alter the code from following:
$('#calendar').fullCalendar({
editable: true,
eventDurationEditable: false, ...
To:
$('#calendar').fullCalendar({
editable: false,