Develop Reference

How To Correctly Add Print Support To FullCalendar.IO

I have a premium version of this product, I am using the generic code they post on the site for this example. I have this code, which appears to be the correct way to implement the adaptive plugin, but I do not see a way to print the calendar?
What am I missing here?
jQuery.ajax({
type: "GET",
url: "index.php?option=com_ajax&plugin=getEmpData&format=json&ser="+ser+"&m_id="+m_id+"&formid="+formid+"&fdate="+fdate+"&tdate="+tdate,
success: function(data)
{
if (!data.data['0']) {
jQuery("#print-btn").hide();
jQuery("#geted-bschart").html('');
jQuery("#geted-results").html('No Data exist');
} else {
jQuery("#geted-results").html("");
const getEmpData = JSON.parse(data.data['0']);
let bs = getEmpData['0'];
getEmpData.shift();
var calendarEl = document.getElementById('geted-results');
var calendar = new FullCalendar.Calendar(calendarEl, {
schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
initialView: 'dayGridMonth',
views: {
dayGridMonth: {
type: 'dayGrid',
duration: { months: mths },
monthMode: true,
fixedWeekCount: false,
}
},
plugins: [
adaptivePlugin
],
headerToolbar: {
left: '',
center: 'title',
right: ''
},
initialDate: fdtArray['2']+'-'+fdtArray['0']+'-'+fdtArray['1'],
editable: false,
selectable: true,
businessHours: true,
dayMaxEvents: true,
events: getEmpData
});
jQuery("#geted-bschart").html(bs.calc);
calendar.render();
jQuery("#print-btn").show();
if (jQuery( ".res-legends" ) && jQuery( ".res-legends" ).length) {
jQuery(".res-legends").remove();
}
jQuery(lhtml).insertAfter(".fc-header-toolbar");
}
jQuery('#getEmpDataForm input, #getEmpDataForm button').prop('disabled', false);
},
error(xhr,status,error,data)
{
jQuery('#getEmpDataForm input, #getEmpDataForm button').prop('disabled', false);
}
});```

FullCalendar.io extend event object from JSON events

I've been using an older version of fullcalendar and am having trouble recreating my calendars in the current version of fullCalendar.
I have seen the documentation and understand the extendedProp created in the event object, but I'm having trouble recreating this action from a JSON result of events.
Old fullCalendar v3.9
function DoCalendar() {
var URX = document.getElementById('url').value;
var URL = AppUrl + "JSON/GetCalendar/" + URX;
$('#Calendar').fullCalendar("destroy");
$('#Calendar').fullCalendar("render");
$('#Calendar').fullCalendar({
header: {
left: 'prev,next',
center: 'title',
right: 'basicWeek,month'
},
defaultView: 'month',
//defaultDate:
height: 'auto',
fixedWeekCount: false,
allDay: false,
allDaySlot: false,
displayEventTime: false,
navLinks: false,
eventLimit: false,
events: { url: URL },
eventColor: 'yellow',
eventTextColor: 'black',
eventRender: function (event, element) {
element.find('.fc-title').html(event.title);
event.eventColor = event.color;
$(element).popover({
title: event.start,
content: event.popover,
trigger: 'hover',
placement: 'auto',
html: true,
container: 'body'
});
}
})
New fullCalendar v5
function TestCalendar() {
var calendarEl = document.getElementById('calendario');
var teamId = document.getElementById('teamId').innerText;
var eventsURL = "/api/Calendar/GetTeamCalendar?id=" + teamId;
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
events: {
url: eventsURL,
error: function () {
$('#script-warning').show();
}
},
eventColor: 'yellow',
eventTextColor: 'black',
eventClick: function (info) {
alert('Event: ' + info.event.extendedProp);
},
eventRender: function (event, element) {
console.log(event.extendedProp);
}
});
calendar.render();
}
The current JSON result
[{"id":"436969","title":"Practice","start":"2020-10-31T22:29:00","end":"2020-10-31T22:40:00","someField":"the field"},
{"id":"955138","title":"Practice","start":"2020-10-31T03:15:00","end":"2020-10-31T04:15:00","someField":"the field"},
{"id":"985289","title":"Practice","start":"2020-11-02T17:37:00","end":"2020-11-02T17:42:00","someField":"the field"]
eventClick: function (info) {
alert('Event: ' + info.event.someField);
}
continues to return undefined
Any help is appreciated

According to documentation here,
https://fullcalendar.io/docs/event-object
You can get those details in object as below. it works for me.
document.addEventListener('DOMContentLoaded', function () {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
events: [{
"id": "436969", "title": "Practice", "start": "2020-10-31T22:29:00", "end": "2020-10-31T22:40:00", "someField": "the field"
},
{ "id": "955138", "title": "Practice", "start": "2020-10-31T03:15:00", "end": "2020-10-31T04:15:00", "someField": "the field" },
{ "id": "985289", "title": "Practice", "start": "2020-11-02T17:37:00", "end": "2020-11-02T17:42:00", "someField": "the field" }],
eventColor: 'yellow',
eventTextColor: 'black',
eventClick: function (info) {
alert('Event: ' + info.event.extendedProps["someField"]);
},
eventRender: function (event, element) {
console.log(event.extendedProp);
}
});
calendar.render();
});
<script src="https://cdn.jsdelivr.net/npm/fullcalendar#5.3.2/main.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/fullcalendar#5.3.2/main.css" rel="stylesheet"/>
<div id='calendar'></div>

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 timegridweek don't show events time properly

I use fullcalendar to make a calendar with three view(dayGridMonth,timeGridWeek,listMonth) and they work fine except timeGridWeek that don't show events in proper time file, you can see in this image:
this is the code of calendar:
document.addEventListener('DOMContentLoaded', function() {
var calendarDiv = document.getElementById('calendar');
$.getJSON("/exams/events", function (data) {
var calendar = new FullCalendar.Calendar(calendarDiv, {
buttonText: {
today:'Hoy',
dayGridMonth:'Mes',
dayGridWeek: 'Semana',
listMonth: 'Lista'
},
firstDay: 1,
bootstrapFontAwesome:{
prev: 'fa-angle-left',
next: 'fa-angle-right'
},
themeSystem : 'bootstrap',
locales: 'es',
plugins: [ 'dayGrid', 'timeGrid', 'list', 'bootstrap'],
minTime: '08:00:00',
maxTime: '21:00:00',
slotDuration: '00:30:01',
nowIndicator: true,
displayEventTime: true,
timeFormat: 'H(:mm)',
slotLabelFormat: {
hour: 'numeric',
minute: '2-digit',
omitZeroMinute: false,
hour12: true,
meridiem: false,//no funciona
omitCommas: true
},
defaultView: 'dayGridMonth',
header: {
left: 'dayGridMonth,timeGridWeek,listMonth',
center: 'title',
right: 'today prev next'
},
allDayText: '',
height: 'auto',
editable: true,
events: data
});
calendar.addEventSource('/releases');
calendar.render();
changeCalendarView();
});
});
the day and time format that I set is with his format :
SimpleDateFormat("yyyy-MM-dd'T'HH:mm:ss.SSSXXX")
Am I doing something wrong?
Do I have to change the date format?
Thanks for all!!

I had a similar issue and I solve it changing the dates format following the fullcalendar documentation: https://fullcalendar.io/docs/events-json-feed , in the dates part.
I'm using Django as Framework. I'm getting the response "reservations_api" from an API in Json fromat:
<script>
document.addEventListener('DOMContentLoaded', function () {
var calendarUI = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarUI, {
initialView: 'dayGridMonth',
headerToolbar: {
left: 'dayGridMonth,timeGridWeek,listMonth',
center: 'title',
right: 'today prev next'
},
events: [
{% for reservation in reservations_api %}
{
title: 'helloooooo ',
start: '{{ reservation.start_date }}',
end: '{{ reservation.end_date }}',
},
{% endfor %}
]
});
calendar.render();
calendar.setOption('locale', 'fr')
});
</script>
this is an example of the Json response data:
[
{
"id": 0,
"start_date": "2021-05-05T09:00:00",
"end_date": "2021-05-07T18:00:00",
"enterprise": {
"name": "Enterprise1",
"id": 1
},
"user": {
"id": 0,
"name": "user0"
}
},
{
"id": 1,
"start_date": "2021-05-06T09:00:00",
"end_date": "2021-05-07T18:00:00",
"enterprise": {
"name": "Enterprise1",
"id": 1
},
"user": {
"id": 0,
"name": "user0"
}
}
]

FullCalendar rrule "Until" not being inclusive

The spec for the rrule plugin says that Until dates are Inclusive. I'm not seeing that. Am I mis-reading?
https://github.com/jakubroztocil/rrule
If given, this must be a Date instance, that will specify the limit of the recurrence. If a recurrence instance happens to be the same as the Date instance given in the until argument, this will be the last occurrence.
I have this test:
calendaring.testRecur = function(dayOrWeek){
var rruleDataWeekly = {
freq: 'WEEKLY',
interval: 1,
byweekday: [ 'MO', 'WE', 'FR' ],
dtstart: '2019-11-01T10:30:00',
until: '2019-11-15'
};
var rruleDataDaily = {
freq: 'DAILY',
interval: 1,
count: 5,
dtstart: '2019-11-04T09:30:00',
};
var rruleData = dayOrWeek === "day" ? rruleDataDaily : rruleDataWeekly;
var title = dayOrWeek === "day" ? "Test Daily" : "Test Weekly";
var newEvent = {
title: title,
duration: "00:45",
rrule: rruleData
};
calendaring.calendar.addEvent(newEvent);};
And this is my config for the calendar:
calendaring.calendar = new Calendar(calendarEl, {
events: '/myurl',
plugins: ['rrule', 'interaction', 'dayGrid', 'timeGrid', 'bootstrap', 'list'],
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay, listDay',
},
defaultView: 'timeGridWeek',
slotDuration: '00:15',
slotLabelInterval: '01:00',
minTime: '06:00',
maxTime: '21:00',
allDaySlot: false,
slotEventOverlap: false,
buttonText: {
today: 'Today',
month: 'Month',
week: 'Week',
day: 'Day',
list: 'List',
},
themeSystem: 'bootstrap',
editable: true,
selectable: true,
droppable: true,
fixedWeekCount: false,
hiddenDays: [ 0, 6 ],
eventLimit: 6,
});
calendaring.calendar.render();};

The issue was I didn't have a time associated with my UNTIL. So, it assumes midnight, not 23:59:59. Phew. Thanks #ADyson for the help.

You can use the code below to show a day, daily, weekly, every two weeks and monthly events with a tooltip on mouse hover event.
In this example you can see how we can set up rrule in FullCalendar.
Visit here- https://stackoverflow.com/a/68770685/9673996