We Keep Coding

Fullcalendar does not render correctly onload

We are using Fullcalendar V5 in Asp.net Core.
We are also using Kendo UI. Our fullcalendar is inside of a "kendo-tabstrip" -> "tabstrip-item" control, if that matters.
Our fullcalendar events are fetched from a controller using Axios(), then the callback renders the events etc...
The problem we have is that when the page loads the first time, the calendar renders in a 1x1mm area in the top left of the calendar div. Instead of full screen as it should.
If I click the previous month button or have a button that does a "calendar.render()", then the calendar renders correctly in a full screen and it renders correctly when going to next or previous months.
Basically, the calendar renders fine after I do a manual "calendar.render()".
What causes this? How can I fix or work around?
I have included my fullcalendar code and an image of how my fullcalendar renders when the page loads.
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
height: 'auto',
expandRows: true,
headerToolbar: {
right: "today",
center: "title",
left: "prevYear,prev,next,nextYear customButton1,customButton2"
},
customButtons: {
customButton1: {
text: 'customButton1'
},
customButton2: {
text: 'customButton2',
click: function() {
calendar.render();
}
}
},
initialView: 'dayGridMonth',
events: function (info, successCallback, failureCallback) {
var urlString = myapp.url.build("GetFCEvents", "MyController", id)
axios.get(urlString + "?Id=" + Id)
.then(function (response) {
successCallback(response.data);
})
},
eventContent: function (info) {
let idname = `chart-${info.event.id}`
const chartTag = `<div id="${idname}"></div>`;
return {html: chartTag};
},
eventDidMount: function(info) {
let idname = `chart-${info.event.id}`
const chartTag = `<div id="${idname}"></div>`;
generateMyChart(idname);
}
});
calendar.render();
});
......other functions......
</script>

FullCalendar not showing extraParams

I am having some problems retrieving these from my string
here is my script, taken from the website..
events: {
url: '/CalendarManager/Findall',
method: 'GET',
extraParams: {
custom_param1: 'customerName',
custom_param2: 'description'
},
failure: function () {
alert('there was an error while fetching events!');
},
eventRender: function (event, element) {
element.qtip({
content: event.custom_param1,
content: event.custom_param2
});
}
},
UPDATE: 12/24/2020
To answer questions below.. I am using 5.3.2 version. I can use this as well and it will bring back everything but the custom parameters.
events: '/CalendarManager/Findall',
I am using Json pulling from DB - Below is the code..
public ActionResult FindAll()
{
return Json(db.GetEvents.AsEnumerable().Select(e => new
{
id = e.CompanyId,
companyName = e.CompanyName,
title = e.Title,
description = e.Description,
allDay = e.AllDay,
start = e.StartDate.ToString("yyyy-MM-ddTHH:mm:ss"),
end = e.EndDate.ToString("yyyy-MM-ddTHH:mm:ss"),
color = e.Color
}).ToList(), JsonRequestBehavior.AllowGet);
}
I changed the version I was using and that is when the extras did not show up. So I added what I thought the documentation said to use.
Adding the extra Params after the url did not work..
UPDATE:
I read through the suggested. I guess I am still not understanding or maybe not getting "Where I am supposed to put the code".
I believe I need to use eventContent. I also did use the console.log(info.event.extendedProps.companyName); Which is great, it does show up in the console window, However i need it on the calendar not in the console window. FullCalendar's examples could be a little better!
Here is what I did but still does not show on the calendar.
eventDidMount: function (info) {
var tooltip = new Tooltip(info.el, {
title: info.event.extendedProps.description,
placement: 'top',
trigger: 'hover',
container: 'body'
});
console.log(info.event.extendedProps.companyName);
},
eventSources: [{
url: '/CalendarManager/Findall',
failure: function () {
alert('there was an error while fetching events!');
},
}],
eventContent: function (arg) {
html: arg.event.extendedProps.companyName
}
I did add some stuff in there to produce just a bubble when hovered over with this info but it does not work either.
Thank You!
UPDATE: 12/27/2020 Working Code
var calendar = new FullCalendar.Calendar(calendarEl, {
headerToolbar: {
left: 'prevYear,prev,next,nextYear today',
center: 'title',
right: 'dayGridMonth,dayGridWeek,dayGridDay,listWeek'
},
initialView: 'dayGridMonth',
navLinks: true, // can click day/week names to navigate views
editable: true,
dayMaxEvents: true, // allow "more" link when too many events
themeSystem: 'bootstrap',
selectable: true,
selectMirror: true,
//Random default events
//events: '/CalendarManager/Findall',
eventDidMount: function (info) {
var tooltip = new Tooltip(info.el, {
title: info.event.extendedProps.description,
placement: 'top',
trigger: 'hover',
container: 'body'
});
console.log(info.event.extendedProps.companyName);
},
events: {
url: '/CalendarManager/Findall',
failure: function () {
alert('there was an error while fetching events!');
},
},
eventContent: function (arg) {
return { html: arg.event.title + '<br>' + arg.event.extendedProps.companyName + '<br>' + arg.event.extendedProps.description };
}
});
calendar.render();
Thank you for all your help!

First, let me know what kind of version of fullcalendar you are using.
fullcalendar v5.5 doesn't provide eventRender.
And extraParams is not what you want to show. It is the query params which attach after the request url, like http://example.com/CalendarManager/Findall?custom_param1=customerName&....
If you want to use extend event props then you should parse them as extendProps.
And you should use Event Render Hooks rather than eventRender if you are using the latest version.
How to fix:
Anyway, you should use function, not an object.
You can use events (as a function)
function( fetchInfo, successCallback, failureCallback ) { }
You can also use events (as a json feed)
var calendar = new Calendar(calendarEl, {
events: '/myfeed.php'
});
If you are going to use object rather than function, then you can use eventSources
And if you want to handle the success response, then use eventSourceSuccess function
Here is an example (using fullcalendar v5.5):
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'listWeek',
loading: function(bool) {
if (bool) {
$("#dashboard-calendar-column .pre-loader").show();
} else {
$("#dashboard-calendar-column .pre-loader").hide();
}
},
// get all events from the source
eventSources: [{
url: '/CalendarManager/Findall',
method: 'GET',
failure: function() {
document.getElementById('script-warning').style.display = 'block'
}
}],
// convert the response to the fullcalendar events
eventSourceSuccess: function(content, xhr) {
var events = [];
content.events.value.map(event => {
events.push({
id: event.id,
allDay: event.isAllDay,
title: event.subject,
start:event.start.dateTime,
end: event.end.dateTime,
// The followings are what you want to add as extended
custom_param1: 'customerName',
custom_param2: 'description',
// Or you could add them to the extendedProps object
extendedProps: {
custom_param1: 'customerName',
custom_param2: 'description',
description: event.bodyPreview,
...
},
// You can check fullcalendar event parsing
...
})
})
return events;
},
eventDidMount: function (arg) {
// remove dot between the event titles
$(arg.el).find('.fc-list-event-graphic').remove();
// You can select the extended props like arg.event.custom_param1 or arg.event.extendProps.custom_param1
...
},
});
calendar.render();
})
Hope this would help you.

You can use extraParams using eventSources if you are using fullcalendar v5.
eventSources: [{
url: '/CalendarManager/Findall',
method: 'POST',
extraParams: {
custom_param1: 'customerName',
custom_param2: 'description'
}
...
}]
You should use POST rather use GET, then it will work.

eventClick not fired in custom view

I use Fullcalendar.js latest.
I tried to extend the list view and I was able to define my own and see it up to the display, but the eventClick does not fire.
How can I fix this?
{ sliceEvents, createPlugin, Calendar } = FullCalendar
CustomViewConfig = {
classNames: [ 'fc-list table-bordered fc-list-sticky fc-listDay-view fc-view' ],
type: 'list',
content: (props)->
segs = sliceEvents(props)
html = '<div class="fc-scroller fc-scroller-liquid">' +
'<table class="fc-list-table table-bordered">' +
'<tbody>'
...
return { html: html }
}
CustomViewPlugin = createPlugin({
views: {
customList: CustomViewConfig
},
eventClick: (arg)->
console.log(arg)
})
mainCalendar = new FullCalendar.Calendar(mainCalendarEl, {
...
plugins: [ CustomViewPlugin ],
initialView: 'customList',
...
eventClick: (arg)->
console.log(arg)
...
})

did you find the solution? I'm trying to do the same but I want to trigger the dateClick event. Right now, I've a dirty solution adding an "onClick" event.in jQuery but I want to improve it using the methods provided by the plugin

Can I style an eventClickLimit popover in FullCalendar

I'm using fullcalendar v2.3.1 and I have eventLimits set to 1, so more then 1 event will show up as a link. I click on the link and a popover shows displaying the events in it. Can I style this popover? or do I have to create my own popover and style it myself? I would like to change it's position from center of day to bottom and maybe change a few other things.
$('#fullcalendar').fullCalendar({
header: {
left: 'prev,next', //today',
center: 'title',
//right: 'month,agendaWeek,agendaDay'
right: ''
},
defaultView: 'month',
editable: true,
allDaySlot: false,
selectable: true,
slotMinutes: 15,
eventLimit: 1,
//eventLimit: true, // for all non-agenda views
//views: {
// agenda: {
// eventLimit: 2 // adjust to 6 only for agendaWeek/agendaDay
// }
//},
events: '/ManageSpaces/GetDiaryEvents/',
//eventLimitClick: function (cellInfo, jsEvent) {
// var s = cellInfo.segs;
//},
eventClick: function (calEvent, jsEvent, view) { //function (data, event, view) {
//var s = cellInfo.segs;
$("#eventDetails.collapse").collapse('toggle');
},
dayClick: function (data, event, view) {
$(this).popover({
html: true,
placement: 'bottom',
container: 'body',
title: function () {
return $("#day-popover-head").html();
},
content: function () {
return $("#day-popover-content").html();
}
});
$(this).popover('toggle');
if ($calPopOver)
$calPopOver.popover('destroy');
$calPopOver = $(this).popover('show');
}
});

Usually and that doesn't sound like it would be difficult. Unfortunately the js above doesn't tell us much as they obviously hook into the fullcalendar plugin which takes care of the html generation. You'll need to see what html it creates.
To figure this stuff out I usually use ie or firefoxe's dev tools or firebug (hit f12 when viewing the results on the site). They have element inspectors which will let you click on the generated html elements and see what css hooks are created and the styles that apply to the element from which style sheets or inline styles. Some basic familiarity with these get me through most of these kind of issues.
If you are able to extract the generated html at least for the section you're interested in or provide a link then that would help heaps.

disable eventClick to google events

Reading through the documentation on FullCalendar, I thought I could find a way to disable clicking an event, leading the browser to the original Google Calendar. But for unknown reasons the script I use does not disable the browser to open a new window.
I am quite new to script, so I may have easily made a mistake.
This is what I tried to use but does not function, yet...
<script>$(document).ready(function() {
// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
// put your options and callbacks here
weekNumbers: 'true',
header: {
left: 'title',
center: '',
right: 'today,prev,next,',
},
editable: 'true',
eventSources: [
{url: 'https://www.google.com/ca...',
className: 'tehuur',
},
{url: 'https://www.google.com/cale...',
className: 'verhuurd',
},
],
eventClick: function(event) {
if (event.url) {
window.open(event.url);
return false;
}
}
})
});
Can anybody point me in the right direction to disable the eventClick. Thanks for your help.
Ben

eventClick: function(event) {
if (event.url) {
if (event.url.includes('google.com')){
return false;
}
console.log(event.url.includes('google.com'));
}
}

Just remove the eventClick function. Fiddle here
This line was opening a new window to google calendar: window.open(event.url);
$(document).ready(function() {
$('#calendar').fullCalendar({
weekNumbers: 'true',
header: {
left: 'title',
center: '',
right: 'today,prev,next,',
},
editable: true,
events: 'http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic',
eventClick: function() {
return false;
}
});
});
Edit:
If you want to redirect instead of opening a new window you should use:
window.location.href = event.url;
instead of window.open(event.url).