Fullcalendar does not render correctly onload - javascript

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>

Related

How to add remove event option with cross sign in fullcalendar.io ? asp.net mvc core

I am going to add remove cross sign with each event of calendar which are getting from database. But how to add this and i want when click on cross sign(delete) then specific url will be triggered and i want to delete event from database. Please let me know how can i do this? How to add delete event with cross sign.
call-init.js
!function($) {
"use strict";
var CalendarApp = function() {
this.$body = $("body")
this.$calendar = $('#calendar'),
this.$event = ('#calendar-events div.calendar-events'),
this.$categoryForm = $('#add-new-event form'),
this.$extEvents = $('#calendar-events'),
this.$modal = $('#my-event'),
this.$saveCategoryBtn = $('.save-category'),
this.$calendarObj = null
};
/* Initializing */
CalendarApp.prototype.init = function() {
this.enableDrag();
/* Initialize the calendar */
var events = [];
$.ajax({
type: 'POST',
async: false,
url: '/Booking/GetBookings',
success: function (mems) {
//states contains the JSON formatted list
//of states passed from the controller
$.each(mems, function (_, member) {
debugger;
events.push({
title: member.guestname,
start: new Date(member.checkindatetime),
end: new Date(member.checkoutdatetime),
allDay: true,
url: '/Booking/Booking/' + member.encryptedId,
className: member.classnamecolor
});
});
},
error: function (ex) {
alert('Buchungen konnten nicht geladen werden.');
}
});
var $this = this;
$this.$calendarObj = $this.$calendar.fullCalendar({
defaultView: 'month',
handleWindowResize: true,
header: {
left: 'prev,next today',
center: 'title',
right: ''
},
navLinks: false, // can click day/week names to navigate views
events: events
//eventStartEditable: false // disable drag&drop of events
});
},
//init CalendarApp
$.CalendarApp = new CalendarApp, $.CalendarApp.Constructor = CalendarApp
}(window.jQuery),
//initializing CalendarApp
function($) {
"use strict";
$.CalendarApp.init()
}(window.jQuery);
other calendar view is
#model FewoVerwaltung.Models.Booking.BookingListModel
<div id="calendar"></div>
<!-- Calendar JavaScript -->
<script src="~/plugins/calendar/dist/locale/de.js"></script>
<script src="~/plugins/calendar/dist/fullcalendar.min.js"></script>
<script src="~/plugins/calendar/dist/cal-init.js"></script>

Loading events using a function in FullCalendar

I'm using ExtJS 3.4 and fullcalendar#5.10.2 ( using jsdelivr CDN ).
My config Object :
var config = {
events : eventsLoader,
initialView: 'dayGridMonth',
height : 500,
nowIndicator : true ,
editable: false,
locale : "fr",
showNonCurrentDates: false,
headerToolbar: {
right: 'dayGridMonth,timeGridWeek,timeGridDay list',
center: 'title',
left: 'today prev,next'
},
footerToolbar: {
right: "prevYear,nextYear"
},
buttonText : {
today: "Aujourd'hui",
month: 'Mois',
week: 'Semaine',
day: 'Jour',
list: 'Liste'
}
}
The eventsLoader function :
var eventsLoader = function(fetchInfo, successCallback, failureCallback) {
Ext.Ajax.request({
url : gpao.OF.url,
method : "POST",
params : {
action : 'getEvents',
idCentreDeCharge : id,
},
success : function(result,response) {
var jsonData = Ext.util.JSON.decode(result.responseText);
var jsonRes = jsonData.results;
var events = jsonRes.map(function(eventEl) {
return {
title : eventEl.title,
start : eventEl.start,
end : eventEl.end
}
})
console.log("events : ",events);
successCallback(events);
},
failure : function() {
console.error('there was an error with the Ajax request to '+gpao.CentreCharge.url);
failureCallback("failed");
}
});
}
The fetchInfo object :
var now = new Date();
var startDate = new Date();
startDate.setYear(now.getFullYear() - 3);
var endDate = new Date();
endDate.setYear(now.getFullYear() + 3);
var fetchInfo = {
start : startDate.toISOString().split('T')[0],
end : endDate.toISOString().split('T')[0]
}
console.log("fetchInfo : ",fetchInfo);
Example of the events array passed to successCallback(events) looks like this :
I used a dummy events array just to test, and my calendar renders with no errors.
The Problem :
I'm rendering the calendar on a Tab Panel, this time using a function instead of a dummy array, the first time a user selects it the calendar looks all messed up ( week days all clummed up in the top left corner on top of each other ), untill i either resize the page CTRL + MouseWheel, switch views, or click any button like prev,next,prevYear,nextYear,today, i'm stuck on this, any help appreciated.
If you are hiding the container in which the calendar element belongs, then you need to call the calendar's render() method when you re-display it, otherwise it can be messed up by being in a hidden container.

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.

Fullcalendar refetch eventsource

As the title says, I have a question regarding EventSource in the fullcalendar.
At the moment I can load 1 google calendar in the fullcalendar. And know how to add multiple google calendars.
However, I want to use checkboxes (linked to their own google calendar), I dynamically create an array with the googleCalendarIds, all this works, but I can't get the calendar to "refetch" all the event from the google calendars in the array.
At the moment, this is the code I use to populate the calendar:
document.addEventListener('DOMContentLoaded', function() {
var selected = [];
$('.badgebox:checked').each(function() {
selected.push({
'googleCalendarId' : $(this).val(),
'className' : $(this).data('color')
});
});
$('.badgebox').on('click', function() {
if($(this).prop('checked')) {
selected.push({
'googleCalendarId' : $(this).val(),
'className' : $(this).data('color')
});
$('#calendar').fullCalendar('refetchResources');
}else{
index = selected.findIndex(obj => obj.googleCalendarId === $(this).val());
selected.splice(index, 1);
$('#calendar').fullCalendar('refetchResources');
}
});
var calendarEl = document.getElementById('calendar');
calendar = new FullCalendar.Calendar(calendarEl, {
header: {
center: 'dayGridMonth,timeGridWeek'
},
views: {
dayGridMonth: {
titleFormat: { year: 'numeric', month: '2-digit', day: '2-digit' }
}
},
plugins: [ 'dayGrid', 'timeGrid', 'bootstrap', 'googleCalendar' ],
googleCalendarApiKey: 'api key',
eventSources: selected,
eventClick: function(info) {
info.jsEvent.preventDefault();
},
defaultView: 'timeGridWeek',
weekNumbers: true,
locale: 'nl',
themeSystem: 'bootstrap',
nowIndicator: true
});
calendar.render();
});
But what I am getting is an error:
TypeError: $(...).fullCalendar is not a function
I have loaded all the files needed (and can see they are loaded).
Edit current code
This is the code I use now, but still not sure how to fix the resources part (refreshing):
document.addEventListener('DOMContentLoaded', function() {
var curSource = [];
$('.badgebox:checked').each(function() {
curSource.push({
'googleCalendarId' : $(this).val(),
'className' : $(this).data('color')
});
});
var newSource = [];
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
schedulerLicenseKey: 'key',
header: {
center: 'dayGridMonth,timeGridWeek'
},
views: {
dayGridMonth: {
titleFormat: { year: 'numeric', month: '2-digit', day: '2-digit' }
}
},
plugins: [ 'dayGrid', 'timeGrid', 'bootstrap', 'googleCalendar', 'resourceTimeGrid', 'resourceDayGrid' ],
googleCalendarApiKey: 'apikey',
eventSources: curSource,
eventClick: function(info) {
info.jsEvent.preventDefault();
},
defaultView: 'timeGridWeek',
weekNumbers: true,
locale: 'nl',
themeSystem: 'bootstrap',
nowIndicator: true
});
$('.badgebox').on('change', function() {
if($(this).prop('checked')) {
newSource.push({
'googleCalendarId' : $(this).val(),
'className' : $(this).data('color')
});
}else{
index = newSource.findIndex(obj => obj.googleCalendarId === $(this).val());
newSource.splice(index, 1);
}
curSource = newSource;
calendar.getEventSources().forEach(eventSource => {
eventSource.remove()
});
calendar.addEventSource(curSource);
});
calendar.render();
});
Any idea?
Your logic for adding and removing event sources is flawed - it'll remove all the previous sources, but only ever add the currently selected one (well, except that you never clear newSource so it'll contain all sorts of duplication after a while). The other problem is that when you write calendar.addEventSource(curSource); you're adding an array of event sources (even though it only ever contains one item) but adding it as if it was a single event source object. Therefore it's not in the format fullCalendar expects, so it doesn't add anything.
Instead you can just use the same logic you use when you first declare the calendar, to loop through all the currently selected checkboxes and set all of them as the current sources. This is the simplest way to do it. Just move that logic into a function so you can re-use it. It also removes the necessity for global objects containing the list of sources. Something like this:
function getEventSources() {
var sources = [];
$(".badgebox:checked").each(function() {
sources.push({
id: $(this).val(),
'googleCalendarId' : $(this).val(),
className: $(this).data("color")
});
});
return sources;
}
Then in the calendar config, set the initial event sources by calling the function:
eventSources: getEventSources(),
And handle the "change" event on the checkboxes like this:
$(".badgebox").on("change", function() {
//remove event sources
calendar.getEventSources().forEach(eventSource => {
eventSource.remove();
});
//get currently selected sources
var sources = getEventSources();
//add each new source to the calendar
sources.forEach(eventSource => {
calendar.addEventSource(eventSource);
});
});
I made a live demo here: https://codepen.io/ADyson82/pen/Jjoovym. I couldn't use google calendars for the demo obviously so I've done it with hard-coded lists of events, but the overall logic of the process is identical.

AngularJS and Fullcalendar: eventClick works only first time

I'm using the Angular module based on fullcalendar: https://github.com/angular-ui/ui-calendar along with the dialog module from ng-bootstrap. I configured the calendar to show a dialog for editing an event on eventClick action. It works fine only once. After closing first dialog and clicking again on any event new dialog doesn't show. But when I click on any other link on page, all desired dialogs shows one by one like they're queued somewhere some way.
Here's snippet from my controller:
$scope.showEditVisitDialog = function (event) {
var editVisitDialogOpts = {
backdropClick: false,
templateUrl: 'views/addEditVisitDialog.html',
controller: 'AddEditVisitDialogController',
resolve: {
patientId: function () {
return event.patientId;
},
visitId: function () {
return event.id;
}
}
};
var editVisitDialog = $dialog.dialog(editVisitDialogOpts);
editVisitDialog.open().then(function (updatedVisit) {
//some action
});
};
$scope.calendar = {
height: 450,
editable: true,
header: {
left: 'month agendaWeek ',
center: 'title',
right: 'today prev,next'
},
eventClick: $scope.showEditVisitDialog
};
$scope.events = [];
$scope.eventSources = [$scope.events]
Events are fetched from REST later in the controller.
In html:
<div ui-calendar="calendar" config="calendar" ng-model="eventSources"/>
No errors in console, what am I doing wrong?
Code on plunker: http://plnkr.co/edit/89sQfsU85zN4uxauFI2Y?p=preview
As always, things are simpler and more obvious when there's a fiddle/plnkr available. You need to place your call to showEditVisitDialog inside the $apply function:
...
$scope.calendar = {
editable: true,
eventClick: function(){
$scope.$apply(function(){
$scope.showEditVisitDialog()
});
}
};
...
Working plnkr.
you need to declare you fnction before uiConfig for the calendar ;)

Categories