Develop Reference

FullCalendar doesn't render last day of event on calendar

I am having problem with showing last day of event on calendar itself, i searched all Stack Overflow and google and but didn't found any working solution to this.
Format of date is YYYY-MM-DD, ex. 2021-03-20
JSON output on calendar for "dddddddddddddddd" event, this is just for example, issue of last day not showing is on all events not just one.
allDay: true
color: "#f9cb9c"
description: ""
end: "2021-03-21"
event_employees: "2,5,6,7,38"
event_vehicle: "2"
id: "35"
start: "2021-03-15"
title: "dddddddddddddddd"
Here is calendar code
document.addEventListener('DOMContentLoaded', function() {
calendarEl = document.getElementById('calendar');
calendar = new FullCalendar.Calendar(calendarEl, {
themeSystem: 'bootstrap',
headerToolbar: {
left: 'prev today',
center: 'title',
right: 'next'
},
locale: 'hr',
initialView: 'dayGridMonth',
editable: true,
selectable: true,
droppable: true, // this allows things to be dropped onto the calendar
dayMaxEvents: true, // when too many events in a day, show the popover
eventDidMount: function(info) {
$(info.el).tooltip({
title: info.event.extendedProps.description,
container: 'body',
placement: 'top',
trigger: 'hover',
html: true,
template: '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'
});
},
events: 'get_events.php',
views: {
dayGridMonth: {
titleFormat: {
month: 'long',
year: 'numeric'
}
}
}
});
calendar.render();
});
get_events.php
$query = $pdo->prepare("SELECT * FROM events");
$query->execute();
$result = $query->fetchAll(PDO::FETCH_ASSOC);
$data = array();
foreach ($result as $val) {
$data[] = array(
'id' => $val['id'],
'title' => $val['title'],
'start' => date('Y-m-d', strtotime($val['start_event'])), // date output format 2021-03-20
'end' => date('Y-m-d', strtotime($val['end_event'])), // date output format 2021-03-20
'color' => $val['event_color'],
'description' => $val['event_description'] == null ? '' : $val['event_description'],
'event_vehicle' => $val['event_vehicle'],
'event_employees' => $val['event_employees'],
'allDay' => true // all day is true for every event
);
}
echo json_encode($data);
Here is image with json output in console

Event with specific day gets render in all days

I'm using fullcalendar and i want to add an event to an specific day and hour but the event get render on all of the days. (time slot works)
I went through all the documentation but couldn't find any error.
My code:
var calendar = new FullCalendar.Calendar(calendarEl, {
events: [{ // My event
title: 'The Title',
start: '2020-08-05',
end: '2020-08-06',
startTime: '09:00:00',
endTime: '10:00:00',
allDay: false
}],
contentHeight: 'auto',
initialDate: new Date('2020-08-01'),
validRange: {
start: '2020-08-01',
end: '2020-08-18'
},
titleFormat: { year: 'numeric', month: 'long', day: 'numeric' },
headerToolbar: {
start: 'title',
center: '',
end: 'prev,next'
},
initialView: 'timeGridWeek',
slotDuration: '01:00:00',
slotMinTime: '09:00:00',
slotMaxTime: '18:00:00',
weekends: false,
locale: 'es',
allDaySlot: false,
});
Here is my codepen with the error and the code im using!
https://codepen.io/alfijuan/pen/yLeqwer?editors=1010
Hope anyone can help!
Thanks!

You've specified it as a recurring event. Remove the startTime and endTime properties and merge the time data into the start and end properties together with the date.
{
title: 'The Title',
start: '2020-08-05 09:00:00',
end: '2020-08-06 10:00:00',
allDay: false
}
Demo: https://codepen.io/ADyson82/pen/ZEQMEvY
See https://fullcalendar.io/docs/v5/event-object and https://fullcalendar.io/docs/v5/recurring-events to understand the difference and the properties required for a single event vs a recurring one

Issue: Fullcalendar shows 24 as midnight instead of 00:00

For some reason, Fullcalendar is showing events that start past midnight as e.g. '24:15'. We want it to show '00:15'. I think this is a new issue, because we have had the calendar for a year, and this is the first I'm hearing of it. But I can't find anything about how to solve it.
We are using fullcalendar v4.2.0. I did not write the original code, but I'm fairly familiar with it. We fetch events using a REST API, and we're using ServiceNow. When using the 12-hour format (am/pm), it shows 12a15. I tried changing the eventTimeFormat, but had no luck. This is part of the client script:
/* Calendar */
c.funcs.loadCalendar = function() {
var calendarEl = document.getElementById('calendar');
c.calendar = new FullCalendar.Calendar(calendarEl, {
contentHeight: 'auto',
plugins: [ 'dayGrid','timeGrid', 'list'],
header: {
left: 'prev next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek,listMonth'
},
buttonText: {
dayGridMonth: 'Month',
timeGridWeek: 'Week',
timeGridDay: 'Day',
listWeek: 'List Week',
listMonth: 'List Month',
today: 'Today'
},
editable: false,
eventTimeFormat: {
hour: '2-digit',
minute: '2-digit',
hour12: false
},
eventOverlap: false,
firstDay: 1,
weekNumbers: true,
// Scripted REST API which sends Start and End date-time of current view as parameters and gets current events.
//events: '/api/tnas/fullcalendar_fetch_data',
events: function(info, successCallback, failureCallback) {
$http({
method: 'GET',
url: '/api/tnas/fullcalendar_fetch_data',
headers: {
'X-UserToken': window.g_ck // Authorization
},
params: {
systems: c.vars.selectedSystems.map(function(system) { return system.value; }).toString(),
excludedTypes: c.vars.types.filter(function(type) {return !type.checked}).map(function(type) { if(!type.checked) return type.type }).toString(),
start: info.start,
end: info.end
}
}).success(function(data, status) {
successCallback(data.result.events);
}).error(function(data, status) {failureCallback(data)});
},
loading: function(isLoading) {
c.vars.calendarIsLoading = isLoading;
$scope.$evalAsync();
},
// When event is rendered and put into the DOM, add a tippy.js tooltip to that element.
eventRender: function(info) {
tippy(info.el, {
theme: 'light-border',
content: info.event.extendedProps.tooltipContent,
arrow: true,
animation: 'fade',
flip: false,
boundary: 'window'
});
},
eventClick: function(info){
info.jsEvent.preventDefault();
var p = $scope.data.page_id || 'form';
var url = '/sp?id=' + p + '&table=' + info.event.extendedProps.table + '&sys_id=' + info.event.id + '&view=sp';
window.open(url, "_blank");
},
navLinks: true,
navLinkDayClick: function(date, jsEvent) {
//c.calendar.gotoDate(date);
c.calendar.changeView('timeGridDay', date);
}
});
c.calendar.render();
}
/* Calendar End */
JSON of the event:
title: "Metro IN-Applikasjoner - test"
number: "SREL0004789"
start: "2020-04-15 00:15:00"
end: "2020-04-16 14:00:00"
downtime_start: ""
downtime_end: ""
className: "SystemRelease"
type: "system_release"
table: "release"
id: "4a393c2b298c54903eaa786081948e7c"
state: "New"
state_reason: null
downtime_type: "Soft"
color: "rgb(163, 222, 255, 0.5)"
tooltipContent: "<div style='text-align:left; font-size:1.5em'><p>Metro IN-Applikasjoner - test</p><p><strong>Start:</strong> 00:15, 15. apr 20</p><p><strong>End:</strong> 14:00, 16. apr 20</p></div>"
Hopefully someone has experienced the same issue before. Any help is greatly appreciated!

Fixed: Replacing the hour12 property with hourCycle: 'h23' in eventTimeFormat did the trick!
eventTimeFormat: {
hour: '2-digit',
minute: '2-digit',
hourCycle: 'h23'
},

Fullcalendar show events when drag

I'm trying to make events copy when I drag them into the calendar. I have managed to copy the event and write it to the database but until I reload the page the original is not shown. That is: Even if the information is copied, the event appears "moved" until you reload the page.
When dragging this happens (which is normal):
When you reload the page, it looks like this:
What I need is to always display like this, without reloading the page. It does not seem that the event has moved. This is necessary in case I want to copy the same event in several days, without having to reload the page.
The code:
document.addEventListener('DOMContentLoaded', function() {
var calendar = document.getElementById('calendar');
var calendarTodo = new FullCalendar.Calendar(calendar, {
plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list' ],
header: {
left: 'prev,next today',
center: 'title',
right: 'myCustomButton dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},
locale: 'es',
nowIndicator: true,
allDaySlot: false,
minTime: "08:00:00",
maxTime: "19:00:00",
height: 'auto',
columnHeaderFormat: {
weekday: 'long',
day: 'numeric',
omitCommas: true },
hiddenDays: [6,0],
slotEventOverlap: false,
defaultTimedEventDuration: '00:45',
slotDuration: '00:15:00',
slotLabelInterval: '00:45:00',
defaultDate: '<?php echo date('Y-m-d');?>',
defaultView: 'timeGridDay',
views: {
month: {
editable: true
}
},
eventDrop: function(info) {
if (!confirm("Se va a duplicar " + info.event.title + " al " + info.event.start.getDate() + " de " + monthNames[info.event.start.getMonth()] + ", ¿estás seguro?")) {
info.revert();
}else{
grabarDuplicado(info.event);
}
},
editable: false,
eventTimeFormat: {
hour: '2-digit',
minute: '2-digit',
meridiem: false,
hour12: false
},
slotLabelFormat: {
hour: '2-digit',
minute: '2-digit',
meridiem: false,
hour12: false
},
customButtons: {
myCustomButton: {
text: 'Añadir festivo',
click: function() {
event.preventDefault();
window.open("./index.php?view=newholiday", "popupWindow", "width=600,height=600,scrollbars=yes");
}
}
},
eventLimit: true,
eventRender : function(info) {
const props = info.event.extendedProps,
rendering = info.event.rendering;
if(rendering == "background") {
$(info.el).html("<a href='./?view=editholiday&id="+info.event.id+"' style='color:#555'>"+info.event.title+"</a>");
}
},
events: <?php echo json_encode(array_merge((array)$thejson,(array)$dias_festivos)); ?>
});
calendarTodo.render();
});
function grabarDuplicado(event) {
var d = event.start;
var month = d.getMonth() + 1;
if(month <= 9)
month = '0'+month;
var day= d.getDate();
if(day <= 9)
day = '0'+day;
var fecha = d.getFullYear() + "-" + month + "-" + day;
var hora = (d.getHours()<10?'0':'') + d.getHours() + ":" + (d.getMinutes()<10?'0':'') + d.getMinutes();
var titulo = "";
if(event.extendedProps.paciente_id == 9){
titulo = event.title;
}
$.ajax({
type:"POST",
url:"./?action=addreservation",
data:{"pacient_id":event.extendedProps.paciente_id,
"medic_id":event.extendedProps.medic_id,
"date_at":fecha,
"time_at":hora,
"status_id":1,
"title":titulo},
traditional:true,
success:function(msg){
//console.log(msg);
//alert('Cita duplicada correctamente');
},
error:function(msg){
//console.log(msg);
alert('No se ha podido duplicar la cita');
}
});
}

FullCalendar not events curl up

Why are my full calendar event does not curl up. If I have more than three events should curl up and show at the bottom of the "more events". FullCalendar downloaded from the repository adesigns / calendar-bundle. I have this:
I need this:
This is my code.I added a piece of code at the end of the function but is not working:
$(document).ready(function () {
$(function () {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$('#calendar-holder').fullCalendar({
header: {
left: 'prev, next',
center: 'title',
right: 'month, agendaWeek, agendaDay, add_event'
},
lazyFetching: true,
timeFormat: {
// for agendaWeek and agendaDay
agenda: 'H:mm', // 5:00 - 6:30
// for all other views
'': 'H:mm' // 7p
},
eventSources: [
{
url: Routing.generate('fullcalendar_loader'),
type: 'POST',
// A way to add custom filters to your event listeners
data: {
},
error: function () {
//alert('There was an error while fetching Google Calendar!');
}
}
],
monthNames: ['Styczeń', 'Luty', 'Marzec', 'Kwiecień', 'Maj', 'Czerwiec', 'Lipiec', 'Sierpień', 'Wrzesień', 'Październik', 'Listopad', 'Grudzień'],
monthNamesShort: ['Sty', 'Luty', 'Marz', 'Kwie', 'Maj', 'Czer', 'Lip', 'Sier', 'Wrze', 'Paź', 'Lis', 'Gru'],
dayNames: ['Niedziela', 'Poniedziałek', 'Wtorek', 'Środa', 'Czwartek', 'Piątek', 'Sobota'],
dayNamesShort: ['Niedziela', 'Poniedziałek', 'Wtorek', 'Środa', 'Czwartek', 'Piątek', 'Sobota'],
buttonText: {
month: 'Miesiąc',
week: 'Tydzień',
day: 'Dzień'
},
eventLimit: true,
views: {
agenda: {
eventLimit: 3
}
},
});
});

So, I never heard of the plugin, I googled for the documentations, I opened the documentation and this was the first page I found that resembled your problem: https://fullcalendar.io/docs/display/eventLimit/
You need to add an event limit to your options that limit the amount of events on a day. Like so:
$('#calendar').fullCalendar({
eventLimit: true, // for all non-agenda views
views: {
agenda: {
eventLimit: 6 // adjust to 6 only for agendaWeek/agendaDay
}
}
});
If this does not solve your problem, please post the javascript code you are using. If this did solve your problem, please read the docs of this plugin before asking questions about it here.