Develop Reference

FullCalendar - drag between 2 calendars

I am trying to use this example -- https://fullcalendar.io/docs/other-calendar-dragging -- to create a page that shows 2 FullCalendar calendars and allows the user to drag events from one calendar to the other. I am able to render both calendars, and pull events for each via ajax from a php page. However, the events only display on the first calendar. If I comment out this line:
events: 'ajax/calendar.php?action=get_monthly_patrol_calendar'
from calendar1, then the events will display on calendar2 only. I'd really appreciate help to enable events to display on BOTH calendars.
FYI, here is my code:
HTML:
<div id="kt_calendar"></div>
<div id="kt_calendar2" ></div>
JS:
var todayDate = moment().startOf('day');
var show_now_indicator=true;
var YM = todayDate.format('YYYY-MM');
var YEAR = todayDate.format('YYYY');
var MONTH = todayDate.format('MM');
var YESTERDAY = todayDate.clone().subtract(1, 'day').format('YYYY-MM-DD');
var TODAY = todayDate.format('YYYY-MM-DD');
var TOMORROW = todayDate.clone().add(1, 'day').format('YYYY-MM-DD');
var NEXT_MONTH = todayDate.clone().add(1, 'month').format('YYYY-MM-DD');
var cal = document.getElementById('kt_calendar');
var calendar = new FullCalendar.Calendar(cal, {
plugins: [ 'bootstrap', 'interaction', 'dayGrid', 'dayGridPlugin', 'timeGrid', 'list' ],
themeSystem: 'bootstrap',
events: 'ajax/calendar.php?action=get_monthly_patrol_calendar',
showNonCurrentDates:false,
isRTL: KTUtil.isRTL(),
contentHeight: 'auto',
//aspectRatio: 3, // see: https://fullcalendar.io/docs/aspectRatio
nowIndicator: show_now_indicator,
now: TODAY,
defaultDate: TODAY,
initialDate: TODAY,
defaultView: 'dayGridMonth',
eventOrder: 'order_by',
eventLimit: false, // true to allow "more" link when too many events
navLinks: true,
eventResizableFromStart: false, //Whether the user can resize an event from its starting edge.
eventDurationEditable: false, //Allow events’ durations to be editable through resizing.
eventResourceEditable: reschedule,//Determines whether the user can drag events between resources.
droppable:reschedule,//Determines if external draggable elements or events from other calendars can be dropped onto the calendar.
eventStartEditable: reschedule,//Allow events’ start times to be editable through dragging.
editable: reschedule, //Determines whether the events on the calendar can be modified.
eventDrop: function(info) {
reschedule_event(info);
},
eventClick: function(info) {
do_event_click(info);
},
eventRender: function(info) {
var element = $(info.el);
},
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,dayGridWeek,dayGridDay'
},
views: {
dayGridMonth: { buttonText: 'monthly' },
dayGridWeek: { buttonText: 'weekly' },
dayGridDay: { buttonText: 'daily' }
},
});
calendar.render();
var cal2 = document.getElementById('kt_calendar2');
var calendar2 = new FullCalendar.Calendar(cal2, {
plugins: [ 'bootstrap', 'interaction', 'dayGrid', 'dayGridPlugin', 'timeGrid', 'list' ],
themeSystem: 'bootstrap',
events: 'ajax/calendar.php?action=get_monthly_patrol_calendar',
showNonCurrentDates:false,
isRTL: KTUtil.isRTL(),
contentHeight: 'auto',
//aspectRatio: 3, // see: https://fullcalendar.io/docs/aspectRatio
nowIndicator: show_now_indicator,
now: NEXT_MONTH,
defaultDate: NEXT_MONTH,
initialDate: NEXT_MONTH,
defaultView: 'dayGridMonth',
eventOrder: 'order_by',
eventLimit: false, // true to allow "more" link when too many events
navLinks: true,
eventResizableFromStart: false, //Whether the user can resize an event from its starting edge.
eventDurationEditable: false, //Allow events’ durations to be editable through resizing.
eventResourceEditable: reschedule,//Determines whether the user can drag events between resources.
droppable:reschedule,//Determines if external draggable elements or events from other calendars can be dropped onto the calendar.
eventStartEditable: reschedule,//Allow events’ start times to be editable through dragging.
editable: reschedule, //Determines whether the events on the calendar can be modified.
eventDrop: function(info) {
reschedule_event(info);
},
eventClick: function(info) {
do_event_click(info);
},
eventRender: function(info) {
var element = $(info.el);
},
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,dayGridWeek,dayGridDay'
},
views: {
dayGridMonth: { buttonText: 'monthly' },
dayGridWeek: { buttonText: 'weekly' },
dayGridDay: { buttonText: 'daily' }
},
});
calendar2.render();

Figured it out! The second call was failing bec it was running before the first call completed. I added a delay before loading the 2nd calendar, and now both months load fine:
setTimeout(function() { loadCal2(); }, 3000);

My FullCalendar will not parse JS object(array) which is returned from controller when there is dayofWeek

I want to create a calendar with scheduled event, so I fetched the data from my database into controller, process them into the format as it needed, and return an Json array of event object.However, the calendar do not show the event with daysofWeek.
//events is an array of primary key, which will later been used to retrieve data from database in controller
var a = JSON.stringify(events);
$(function () {
$.post('/SchedulingManager/SetVariable',
{ key: a, value: "Test" }, function (result) {
GenerateCalendar(result);
});
});
}));
function GenerateCalendar(array) {
$('#calendar'). fullCalendar({
//theme: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
buttonText: {
today: 'Today',
month: 'Month',
week: 'Week',
day: 'Day',
},
timeFormat: 'hh:mm a',
selectable: true,
defaultView: 'month',
editable: true,
allDaySlot: true,
selectable: true,
slotMinutes: 15,
events:array,
})
}
})();
This is the JSON array that is return from the controller
However, the calendar only shows the event with fix date, but not the events that is with daysofWeek property.( And the time displayed is wrong too for another case).But , when I copy the exactly same code
{ dow: '[1,2,3,4,5]', title: 'OFA-0001 : (test event log)', start: ' 10:00:00 ', end: '11:00:00 ' }
the event is showned .
Event is shown if I create the array in view
No weekly event is showed if the object with daysofWeek is in the array that is retrieved from controller
Can anynone help me with this I am stuck.Thank you.

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?

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.