Develop Reference

How to use json in a variable

I'm trying to use FullCalendar.js in my application, the problem is that I'm going to add events to the calendar from db, and I don't know how to pass the json to it, example:
The way that works:
$(document).ready(function() {
$('#calendar').fullCalendar({
events: [
{
title: 'Event 1',
start: '2021-08-01'
},
{
title: 'Event 2',
start: '2021-08-07',
end: '2021-08-10'
},
],
selectable: true,
editable: true,
});
What I need to do is to manipulate the json to add my events to the calendar, I tried to do in this way, but it did not work:
var obj = [{title: 'Event 1',start: '2021-08-01'},{title: 'Event 2',start: '2021-08-07',},];
var json = JSON.stringify(obj);
$(document).ready(function() {
$('#calendar').fullCalendar({
events: json,
selectable: true,
editable: true,
});
Can someone help me with that ? Thanks a lot!

How can I show a popup with description for fullcalendar

I am using fullcalendar and my goal is to have a simple pop up on the event click but for some reason I cannot get it to pull in the description in the alert.
Am I missing some JS to include or something? I tried to use the examples from their site but it was not working. I am sure it is something stupid I am missing.
<script src='../assets/calendar/packages/core/main.js'></script>
<script src='../assets/calendar/packages/interaction/main.js'></script>
<script src='../assets/calendar/packages/daygrid/main.js'></script>
<script src='../assets/calendar/packages/timegrid/main.js'></script>
<script src='../assets/calendar/packages/list/main.js'></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var d = new Date();
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list' ],
height: 'parent',
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},
defaultView: 'dayGridMonth',
defaultDate: d,
eventClick: function(info) {
alert('Event: ' + info.description);
},
navLinks: true, // can click day/week names to navigate views
editable: false,
eventLimit: true, // allow "more" link when too many events
events:
[
{
title: 'All Day Event<br>second line',
description: 'description for Long Event',
start: '2020-05-01'
},
{
title: 'Session',
start: '2020-05-12T10:30:00',
description: 'description for Long Event',
end: '2020-05-12T12:30:00'
},
{
title: 'Practical',
start: '2020-05-27T10:30:00',
description: 'description for Long Event',
end: '2020-05-27T12:30:00'
}
]
});
calendar.render();
});
</script>

You need to write
alert('Event: ' + info.event.extendedProps.description);
because
1) the info object isn't the event, the event is a sub-property of that info object - this is described at https://fullcalendar.io/docs/eventClick
and
2) description is a non-standard field as far as fullCalendar is concerned, and all non-standard fields are placed inside the extendedProps sub-property of the event object which fullCalendar generates based on the data you provide it - this is described at https://fullcalendar.io/docs/event-parsing

FullCalendar list view - how to hide "all-day"

I have a FullCalendar List view.
All of the entries in the view will always be "all day" events. Therefore I don't really need the "all-day" that appears in the left column. Is there a way to remove this from the list?
$(document).ready(
function() {
var calendarEl = document.getElementById('date_list');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'list' ],
defaultView: 'listThirtyDay',
height: 'auto',
views: {
listThirtyDay: {
type: 'list',
duration: { days: 30 },
buttonText: '30 days'
},
listDay: { buttonText: 'Day' },
listWeek: { buttonText: 'Week' }
},
header: {
left: 'prev,next',
center: 'title',
right: 'listDay,listWeek,listThirtyDay',
},
time: false,
eventSources: [
{
url: $('.KeyDatesURL').val()
}
]
});
calendar.render();
}
);

If you inspect the rendered HTML elements using your browser's Developer Tools you'll see the time text in a List view is kept inside a HTML element with the class "fc-list-item-time".
Therefore you can set a simple CSS rule to hide it:
.fc-list-item-time {
display:none;
}
Live demo: https://codepen.io/ADyson82/pen/GRJByop

You can use this:
allDaySlot: false
See this link here - https://fullcalendar.io/docs/allDaySlot
also you can refer this:
How to remove allDay from view in fullcalender JS?

events with rrule plugin is not updating after drag/drop on change view grid fullcalendar v4

I am currently working on Fullcalendar v4 with rrule plugin
I have this code
var calendarEl = document.getElementById('calendardemo');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: ['interaction', 'dayGrid', 'timeGrid', 'momentTimezone', 'rrule', 'list'],
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
editable: true,
events: [
{ // standard property
title: 'This is sample event',
start: '2019-12-29',
end: '2019-12-31'
},
{
title: 'event with rrule plugin',
rrule: {
freq: 'weekly',
interval: 5,
byweekday: [ 'mo', 'fr' ],
dtstart: '2019-12-29T10:30:00',
until: '2020-12-31'
}
}
]
});
calendar.render();
please note:
{ // this is the standard (No issues)
title: 'This is sample event',
start: '2019-12-29',
end: '2019-12-31'
}
{ // Not updating on change view
title: 'event with rrule plugin',
rrule: {
freq: 'weekly',
interval: 5,
byweekday: [ 'mo', 'fr' ],
dtstart: '2019-12-29T10:30:00',
until: '2020-12-31'
}
}
Link to a demo
Now when I drag & drop "This is sample event" then change view grid or click < > it stays updated. but when I drag & drop "event with rrule plugin" then change view grid or click < > it's not updated. it just stays where it was loaded in first load. Please help. Thanks !

You might have to add a form that would allow a user to change repeated rules when they begin to drag them. Otherwise, could you describe expected behaviour after the user drops repeated event on another date. What changes would be applied to a rule?

Fullcalendar: how to show multiple resources with multiple events

I am trying to use the Fullcalendar where I need to show multiple resources with respective multiple events. The same source may have more events, including the situation of overbooking.
In the front-end I use Ajax to retrieve the datas for the resources and the events separately.
The following is my code; but it does not work. It fetches the resources and the events, shows the resources but unable to show the respective events.
How can I do it? Thanks a lot.
var calendar = new FullCalendar.Calendar(calendarEl, {
schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
plugins: [ 'interaction', 'resourceTimeline' ],
timeZone: 'Europe/Rome',
defaultDate: today,
locale: 'it',
views: {
timelineFourDays: {
type: 'timeline'
//,duration: { months: 4 }
}
},
defaultView: 'resourceTimelineMonth',
lang: 'it',
aspectRatio: 1.5,
header: {
left: 'prev,next',
center: 'title',
right: 'resourceTimelineDay,resourceTimelineWeek,resourceTimelineMonth,resourceTimelineYear'
},
footer: {
left: 'prev,next',
center: 'title',
right: 'resourceTimelineDay,resourceTimelineWeek,resourceTimelineMonth,resourceTimelineYear'
},
resourceAreaWidth: '30%',
resourceLabelText: 'IMPIANTI',
resourceGroupField: 'nome_tipologia',
resourceOrder: 'id',
resourcesInitiallyExpanded: true,
resourceText: 'title',
refetchResourcesOnNavigate: true,
resourceColumns: [
{
labelText: 'IMPIANTO',
field: 'id_impianto',
width: '5%'
},
{
labelText: 'IDENTIFICATIVO',
field: 'impianto_codifica',
width: '15%'
}
,
{
labelText: 'COMUNE',
field: 'nome_comune',
width: '15%'
},
{
labelText: 'ARTICOLO',
field: 'nome_articolo',
width: '15%'
}
],
resources:{
url: '/listallimpiantos',
method: 'get',
_token: CSRF_TOKEN
},
resourceRender: function(renderInfo) {
renderInfo.el.style.backgroundColor = 'green';
renderInfo.el.style.color = '#ffffff';
},
eventSources:{
url: '/listimpiantosperofferta',
method: 'get',
_token: CSRF_TOKEN,
resourceIds:'title'
},
eventRender: function(event, element) {
$(element).tooltip({title: event.title});
if (event.statovendita == 'VENDUTO') {
element.css("background-color", '#378006');
}
if (event.statovendita == 'OPZIONATO') {
element.css("background-color", '#FFA500');
}
},
eventColor: '#378006',
eventBackgroundColor: event.color,
editable: true,
eventStartEditable: true,
eventResizableFromStart: true,
eventDurationEditable: true,
eventResize: function(info) {
alert("Per il cliente " + info.event.title + " dal " + info.event.start.toISOString() + " al " + info.event.end.toISOString());
if (!confirm("Confermi?")) {
info.revert();
} else {
alert('Aggiornamento sul db!');
}
},
selectable: true,
selectAllow: function(select) {
return moment().diff(select.start) <= 0
},
});
}
});
calendar.render();
});

Your eventSources definition is incorrect.
The documentation for eventSources it states that you must provide an array for this option. However, you have provided an object instead.
Since you are only providing one event source, you can either
a) change eventSources to events (because that option will accept a single object), i.e.
events: {
url: '/listimpiantosperofferta',
method: 'get',
_token: CSRF_TOKEN,
resourceIds:'title'
},
or
b) give eventSources an array containing a single item:
eventSources: [{
url: '/listimpiantosperofferta',
method: 'get',
_token: CSRF_TOKEN,
resourceIds:'title'
}],
The other issue you might have is a similar data-type error: The resourceIds option of the event source object expects an array (again you should check the documentation carefully), not a string.
So again to fix that you can either a) use the singular resourceId option instead:
resourceId: 'title'
or continue to use resourceIds but give it an array containing a single item:
resourceIds: ["title"]
Always remember to study the documentation closely and ensure you're matching the relevant syntax, data types, option names etc. Since JavaScript doesn't have compile-time type checking it's easy to overlook this kind of issue, and it will also often fail silently. That's why you have to pay close attention to examples and specifications beforehand.