Develop Reference

FullCalendar - Show dates in past

I am using FullCalendar and i want to make older dates visible but not clickable.
Also i am using validRange property and it is working well, but it only makes them not visible.
FullCalendar version 5.
Here my codes:
document.addEventListener('DOMContentLoaded', function () {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridWeek',
locale: 'de',
timeZone: 'Europe/Berlin',
hiddenDays: [0, 6],
validRange: {
start: tomorrow()
},
events: 'http://rendezvous.wm/api/available-times/<?php echo $departmentID; ?>',
headerToolbar: {
start: 'title', // will normally be on the left. if RTL, will be on the right
center: '',
end: 'today prev,next' // will normally be on the right. if RTL, will be on the left
},
displayEventEnd: true,
eventTimeFormat: {
hour: '2-digit',
minute: '2-digit',
hour12: false
},
eventClick: function (info) {
window.location.href = "<?php echo WP_HOME . '/terminvereinbaren-details?'; ?>department_id=<?php echo $departmentID
. '&event_start=';?>" + info.event.start.toISOString()+"&event_end="+info.event.end.toISOString()
},
});
calendar.render();
});
and here is the screenshot:

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

FullCalendar 4 - add / display additional values to the Event Object

I am importing here a from a JSON with this structure:
{
"title": "M 11 Zoe Weihnachtskurs ",
"klasse": "Klasse B",
"color": "Ebreichsdorf",
"standort": "Ebreichsdorf",
"start": "2020-01-02T08:00:00",
"end": "2020-01-02T09:40:00",
"description": "Theorie B 11"
}
All is working fine and i am seeing my events with their respective times and title, but i would need the standort to be displayed too.
I was reading the documentation and tried to initiate this like:
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('steinmonth');
var calendar = new FullCalendar.Calendar(calendarEl, {
schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
plugins: [ 'dayGrid', 'timeGrid' ],
defaultView: 'dayGridMonth',
weekNumberCalculation: 'ISO',
hiddenDays: [ 0 ],
views: {
dayGrid: {
// options apply to dayGridMonth, dayGridWeek, and dayGridDay views
displayEventEnd: true,
titleFormat: { day: 'numeric', month: 'short' },
eventTimeFormat: {
hour: 'numeric',
minute: '2-digit',
meridiem: false
}
},
timeGrid: {
// options apply to timeGridWeek and timeGridDay views
},
week: {
// options apply to dayGridWeek and timeGridWeek views
},
},
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,dayGridWeek,timeGridWeek',
},
eventSources: [
{
url: 'https://arcanas.at/wp-content/plugins/steincal/steinmonth.json',
method: 'POST',
title: 'name',
start: 'start',
end: 'end',
extendedProps: {
standort: 'standort',
color: 'color',
description: 'description'
},
color: 'white',
textColor: 'black'
}
],
eventRender: function (info) {
console.log(info.event.extendedProps)
if ( event.standort ) {
element.find('.fc-title').append('<br />' + event.standort);
//element.find('.fc-content').append('<span class="fc-standort">' + event.standort + '</span>');
}
},
});
calendar.setOption('locale', 'de-at');
calendar.render();
});
and the console output is
{klasse: "Klasse B", standort: "Ebreichsdorf", description: "Theorie GW 03"}
So how do i append the standort value for every event to the object? There must be something i overlooked.

Oh, this was too simple - closing, but perhaps someone will find this useful:
eventRender: function(info) {
info.el.querySelector('.fc-title').innerHTML = info.event.title + "</br>" + info.event.extendedProps.standort;
},

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.

Show days and events only of the current month in the fullcalendar.io

In the 'Month' view of the fullcalendar.io I would like to display the current month only, with the current month events. However, currently what is being showed is a month counting from the current date.
E.g: If today's date was 2016-20-03...
- What fullcalendar display: From: 2016-20-03 To: 2016-19-04
- What I would like to display: From 2016-01-03 To: 2016-31-03
After reading the documentation and looking up around I couldn't find any variable or set up for the fullcalendar to achieve this so I thing that I will have to modify the fullcalendar.js
Has someone already done this?
View
$('#' + engineerId).fullCalendar({
header: false,
views: {
plainMonth: {
type: 'basic',
duration: { days: 31 },
buttonText: 'Month'
},
plainWeek: {
type: 'basic',
duration: { days: 7 },
buttonText: 'Week'
}
},
firstDay: 1,
dayNamesShort: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
defaultView: 'plainWeek',
theme: true,
viewRender: function (view, element) {
$('#CalendarViewObject').val(view.name);
viewName = view.name;
},
aspectRatio: ratio,
editable: true,
eventLimit: false, // allow "more" link when too many events
events: {
startEditable: false,
durationEditable: false,
url: window.location.href.toString().split(window.location.host)[1] + '/GetEmployeeEvents',
type: 'POST',
data: function () { // a function that returns an object
$("[id^=qtip-]").empty();
$("[id^=qtip-]").remove();
return {
serviceAreaId: serviceAreaId,
employeeId: engineerId,
calendarViewObject: $('#CalendarViewObject').val()
};
},
error: function () {
alert('there was an error while fetching events!');
}
},...
Controller
public JsonResult GetEmployeeEvents(DateTime start, DateTime end, string queueName, string employeeId, string calendarViewObject)
The 'start' and 'end' dates are set up by the fullcalendar.io, and those dates are the ones that I would like to change.
Thank you very much in advance,
Alvykun

After some more research in the fullcalendar documentation, I ended up by setting the following:
$(\'.calendarClass\').fullCalendar(\'gotoDate\',new Date(y, m, 1));
This did the trick and works!