Fullcalendar Component not working in NG Titanium

Questions
1

As we have many menus using the Fullcalendar component, I’d like to ask about the state of the Fullcalendar Component working in NGTi. Even without any code, it is not even shown (on the form), whereas in NG1 it is shown as well as all my code works as expected (in NG1).

In Servoy Developer 2023.3.3.3845_LTS the latest version in the Servoy Package manger is still version 2.0.1, as it is in Servoy Developer 2022.6.0.3782.

Any news when there will be a new version working in NGTi?

Thanks and regards,

2

Hi Huber,

in TiNG there is a new component for the fullcalendar ( FullCalendar Component 2 ) https://github.com/Servoy/fullcalendarcomponent2 which is to be used instead. You can downloading from the Web Package Manager.
While it offeres the same functionality of the NG1 component, is shipped as a different component because the latest version of the FullCalendar has several breaking changes in it’s properties and API ( NG1 is using FullCalendar version 3.x while TiNG using FullCalendar version 6.x ).

Regards,
Paolo

3

Hi Paolo

Thanks for the reply and the details, very helpful. I got a first menu using the calendar somewhat to work. Up to now, I found the following errors/problems with fullcalendar2, i.e. version 6 of Fullcalendar.

The code

elements.calendar.addEventSource(eventSource);

gives in Servoy 2022.06 the following error and prevents the display of the calendar at all.

Exception

!hades.bas.dialog.msg.errorExceptionOccurred java.lang.RuntimeException: Error while executing client side code. Please see browser console for more info. Error: TypeError: null is not an object (evaluating 'callback.formname')!

Without the command, the calendar frame without events is displayed. The very same code line works in Developer 2023.03_LTS.

Then there seems to be a problem with some of the options. The options

options.allDaySlot = false

gives following warning

The property allDaySlot is undefined for the type CustomType<svy-
fullcalendar2.FullCalendarOptions>

whereas for example these

options.eventColor = '#f95';
options.eventTextColor = '#0f0';

do not give a warning but don’t work. The result is the same in both above mentioned versions of the Developer.

I am not sure about some other options like

options.handleWindowResize = true

but the calendar is not resizing in the vertical (y-axis). It does so on the x-asis, but may be the x-axis resizing is not dependent of this option.

Thanks for looking at it.

Best regards,

4

Hi Paolo

I forget to mention that each event is displayed twice in the calendar, doing just a Browser refresh removes the doubled displayed event. I have seen this behaviour on other menus of our application, but can’t remember right now where.

This effect seems to only occur in NG Titanium, not so in NG1.

Regards,

5

Hi,

there can be differences in API from the fullcalendar version1 compared to fullcalendar version 2.
About:

elements.calendar.addEventSource(eventSource);

What type of eventSource are you trying to add ? I see API spec is expecting a FunctionEventSource type: example

	var eventSource = {
		id: 'default',
		events: eventSourceCallback,
		editable: false,
		startEditable: false,
		durationEditable: false,
		allDayDefault: false
	}
function eventSourceCallback(start, end, params) {... }

About eventColor and eventTextColor, how can you see the effects if you have no events displayed due to error of addEventSource ?
About the options allDaySlot, indeed i see it missing. You can request a Feature to add that at support.servoy.com, so will go into our ticketing system. Similar for other issues, you can attach a sample solution demonstrating the issues so our experts can look at it.

Regards,
Paolo

6

Hi Paolo

A little hidden in my explanations (text after the second code frame), the following code works in Developer 2023.03_LTS (not so in Developer 2022.06.

elements.calendar.addEventSource(eventSource);

Because the displaying of events work in Developer 2023.03_LTS, I know about the other options/problems.

The allDaySlot works, but just gives a warning (yellow triangle) on the code line.

Best regards, Robert