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",
},

FullCalendar Some Events (not all) on Wrong Dates

I am listing dates on FullCalendar and as you can see in the image, some dates show up correctly and some don't. I cannot find any reason that this is the case. The only thing the incorrect events have in common is that they have a start time of 8pm or later.
I selected the August 17th, which has two events. Only one shows correctly on the calendar.
Event data for the two events shown:
[2020-08-21 13:12:32,250] [INFO] [views : log_report] 20776 : 140579017103168 : {'_state': <django.db.models.base.ModelState object at 0x7fdb0e8f5518>, 'id': 140, 'created_date': datetime.datetime(2020, 8, 12, 19, 59, 42, 969082, tzinfo=<UTC>), 'modified_date': datetime.datetime(2020, 8, 17, 2, 33, 1, 101542, tzinfo=<UTC>), 'author_id': 324, 'session': '', 'event_type': 'lfp_event_paid', 'recipient_id': None, 'parent_hub_id': '3f42ec9e-8f42-4d0a-94ca-c4a6e98b01d6', 'event_title': 'Rise of the Runelords, a Pathfinder Adventure Path', 'unique_id': UUID('27268185-f906-49b0-b760-704bc2f9e3ef'), 'start_time': datetime.datetime(2020, 8, 17, 0, 15, tzinfo=<UTC>), 'end_time': datetime.datetime(2020, 8, 17, 3, 15, tzinfo=<UTC>), 'budget_amount': 10, 'budget_details': 'No Budget Details', 'min_players': 2, 'max_players': 5, 'lfg_state': 'LFP', 'game_played_id': 27, 'other_game': '', 'session_type': 'One-Shot', 'location': 'Roll20 and Discord', 'location_link': 'https://app.roll20.net/campaigns/details/7386210/rise-of-the-runelords-anniversary-edition', 'req_status': 'inactive', 'paid_success': False, 'is_recurring': False, 'is_closed': False, 'is_full': False, 'is_private': False, 'is_paid': False, 'is_deleted': False}
[2020-08-21 13:12:32,249] [INFO] [views : log_report] 20776 : 140579017103168 : {'_state': <django.db.models.base.ModelState object at 0x7fdb0e8f5358>, 'id': 145, 'created_date': datetime.datetime(2020, 8, 14, 0, 51, 42, 543054, tzinfo=<UTC>), 'modified_date': datetime.datetime(2020, 8, 17, 23, 2, 51, 389649, tzinfo=<UTC>), 'author_id': 324, 'session': '', 'event_type': 'lfp_event_free', 'recipient_id': None, 'parent_hub_id': 'a038e240-6a86-47b3-aa6c-5409edbb4362', 'event_title': 'Monday Night Age of Worms', 'unique_id': UUID('c4edb4c8-6fcd-4bb7-9c17-2be96c15f0bf'), 'start_time': datetime.datetime(2020, 8, 17, 23, 0, tzinfo=<UTC>), 'end_time': datetime.datetime(2020, 8, 18, 2, 0, tzinfo=<UTC>), 'budget_amount': 0, 'budget_details': 'No Budget Details', 'min_players': 3, 'max_players': 4, 'lfg_state': 'LFP', 'game_played_id': 1, 'other_game': '', 'session_type': 'One-Shot', 'location': 'Foundry', 'location_link': 'http://71.179.132.53:30000', 'req_status': 'inactive', 'paid_success': False, 'is_recurring': False, 'is_closed': False, 'is_full': False, 'is_private': False, 'is_paid': False, 'is_deleted': False}
Here is my event code:
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
height: 560,
plugins: [ 'interaction', 'dayGrid', 'timeGrid' ],
defaultView: 'dayGridMonth',
defaultDate: '{% now "Y-m-d" %}',
eventRender: function(info) {
$(info.el).tooltip({
title: info.event.title,
placement: "bottom",
trigger: "hover",
container: "body"
});
},
header: {
left: 'title',
center: '',
right: 'prev, next'
},
events: [
{% for event in connected_events %}
{
title: "{{event.event_title}}",
start: "{{event.start_time|date:'c'}}",
end: "{{event.end_time|date:'c'}}",
url: "{% url 'events:event-detail' event.unique_id %}",
details: "test",
{%if event.budget_amount > 0 and event.lfg_state == 'LFGM' %}color : "#ff8f07"{%elif event.budget_amount <= 0 and event.lfg_state == 'LFGM' %}color : "#d943c5"{%elif event.budget_amount > 0 and event.lfg_state == 'LFP'%}color : "#1ad914"{%else%}color:"#38b3ff"{%endif%},
},
{% endfor %}
],
});
calendar.render();
});

It's important to realise that 2020-08-17 00:15 in UTC is 2020-08-16 20:15 in EST/EDT - because EST is 4 hours behind UTC - so it's actually 8:15pm the previous day. See https://savvytime.com/converter/utc-to-est/12-15am to convert between the timezones easily.
That's why Rise of the Runelords shows on the 16th in fullCalendar. So the calendar is correct and the cards on the right-hand-side are wrong. (And your observation is about events after 8pm is entirely correct - but now you know why!)
The relevant code isn't shown in the question, but you mentioned that upon investigation you discovered that the date shown in the cards was being loaded as a string without doing a timezone conversion (whereas the times were converted correctly, as was the whole datetime object passed to fullCalendar), and that once you sorted this out the date showed in the card correctly. A similar fix will also need to be applied to the code (also not visible) which decides which cards to display when a date is clicked in the calendar.

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";
}

Add event time to the day - Fullcalendar

In calendar, dates are fetched from the database and displayed onto the calendar as follows:
var events_array = [
{
title: 'Test1',
start: new Date(2014, 8, 1),
end: new Date(2014, 8, 3),
allDay: false},
{
title: 'Test2',
start: new Date(2014, 9, 2),
allDay: true}
];
$('#calendar').fullCalendar({
// put your options and callbacks here
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultView: 'month',
events: events_array
})
});
My question is how can I add the event timing when fetched from the database? is there something like new Time for example as to avoid conflict when having multiple events per day?
thank you in advance.

how can I add the event timing when fetched from the database?
What do you mean by 'event timing' ?
is there something like new Time for example as to avoid conflict when having multiple events per day?
You can have multiple events in the same day with the same hour, time, duration, etc, as long as their id's are different or null, they are treated as individual events, so there should not be any conflicts regarding dates.

I meant to display the timing of each one in the day. For example, 1:00 pm event, 4:30 event...etc.
I have figured out how this can be done as follows:
eventsArray.push({title: "{{$e->event_name}}",
start: new Date(start.substring(0,4),start.substring(5,7)-1, start.substring(8,10),
startTime.substring(0,2), startTime.substring(3,5)),
end: new Date(end.substring(0,4),end.substring(5,7)-1, end.substring(8,10),
endTime.substring(0,2)-2, endTime.substring(3,5)),
url: "events/"+eventID});
Hours and minutes can be added to the new Date array and displayed correctly.

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,