Fullcalendar Demo Doesn't Work

[john1598360627]

FULLCALENDAR
I want to learn how to use the Fullcalendar component. I noticed there was a demo solution for it dating back to 2018.

https://github.com/Servoy/fullcalendarcomponent/wiki

I downloaded it to try and see if I could set it up, however, it didn't work.

ERROR

fullcalendar-error_20240221.png (75.96 KiB) Viewed 5050 times

fullcalendar-broken_20240221.png (48.07 KiB) Viewed 5050 times

Since I'm on Titanium I downloaded Fullcalendar2, which wasn't compatible with the demo. Resulting in this.

I tried downloading Fullcalendar. Which atleast made the errors in console to go away... but since that seems to be made for NG Client it still didn't fix the demo.

HELP
Is there any other resources to help learn how to setup the Fullcalendar instead?

[sean]

Hi John,

You are correct. That sample was for FullCalendar v1 and will not be compatible with FullCalendar2.
We don't currently have a sample or step-by-step guide for this component, but I have added it to our documentation backlog.

In the meantime, you can at least find the reference docs here:
https://docs.servoy.com/reference/servo ... lcalendar2

However, this will only show what the properties, events and methods do. I encourage you to post any follow-ups on this thread.

Best,
Sean

[john1598360627]

I have a few questions then about Full Calendar 2, specifically about the setup of the Calendar and the event objects;

1. How do I connect the Calendar to a Table in a Database?
2. How do I create and add an Event to the Calendar?
3. fullcalendar.io showcases a drag and drop feature, is that possible in Servoy?

[huber]

Hi John

I am not exactly sure if I understand you correctly, but what I do is:

1. Having a form which has the dataSource property set to a db table, like <database>.rooms
2. Put the FullCalendar2 component onto the body part of the form
3. In the code, I do a query like SELECT lesson_date, untis_lesson_subject, … FROM … JOIN … GROUP BY … ORDER BY (of course whatever YOU need and put it in a dataset.
4. Fetching the events in the dataset and push them in to the variable events, like

Code: Select all

   var ds = databaseManager.getDataSetByQuery(scopes.coreConfiguration.defaultDataSourceServerName, query, null, -1);
   
   var events = [];
   for (var i = 1; i <= ds.getMaxRowIndex(); i++) {
      var startDate = new Date(ds.getValue(i, 1));
      var endDate = new Date(ds.getValue(i, 1));
      
      /** @type {String} */
      var startTime = ds.getValue(i, 2);
      startDate.setHours(startTime.substring(0, 2), startTime.substring(2, 4));
      
      /** @type {String} */
      var endTime = ds.getValue(i, 3);
      endDate.setHours(endTime.substring(0, 2), endTime.substring(2, 4));
      
      events.push({
         title: ds.getValue(i, 4) + '\n' + ds.getValue(i, 5) + '\n' + ds.getValue(i, 6),
         start: startDate,
         end: endDate,
         resourceId: 'default'
      })
   }

   return events;


5. Init the calendar like with following function

Code: Select all

function initCalendar() {
   getCalendar().fullCalendar(getCalenderOtions());
   
   var eventSource = getCalendarEventSource();
   eventSource['events'] = fetchEvents;
   
   getCalendar().addEventSource(eventSource);
}



6. Calendar options look something like this

Code: Select all

function timGetCalendarOptions2() {
   /** @type {CustomType<svy-fullcalendar2.FullCalendarOptions>} */
   var options = {};
   options.headerToolbar = {
      left: 'title',
      center: 'dayGridMonth timeGridWeek timeGridDay',
      right: 'today prev,next'
   }
   
   options.allDaySlot = false;
   options.contentHeight = 'auto'; // Avoid an empty row at the bottom of the calendar.
   options.displayEventTime = false;
   options.displayEventEnd = false;
   options.expandRows = true;
   options.editable = false;
   
   options.eventDisplay = 'block'; // Show lessen as rectangle in month view (dayGridMonth) like in the other views.
   options.expandRows = true;
   
   options.firstDay = 1; // Monday.
   options.handleWindowResize = true;
   options.height = 'auto';
   options.initialView = 'timeGridWeek';
   options.locale = scopes.coreConfiguration.defaultLanguage;
   options.nowIndicator = true;
   
   options.selectable = false;
   options.slotDuration = '00:15:00'; // 15 minutes.
   options.slotLabelFormat = 'H:mm';
   
   options.slotMinTime = '07:30';
   options.slotMaxTime = '18:30';
      
   options.weekends = false; // Do not show saturday, and sunday.
   options.weekNumbers = true;
   
   options.views = {
      timeGridWeek: {
         // options apply to timeGridWeek view.
         columnFormat: 'dd.D.M.',
         titleFormat: {month: 'short', year: 'numeric', day: 'numeric', weekday: 'short'}
      },
      timeGrid: {
         // options apply to basicDay and agendaDay views
      }
   }
   
   return options;
}


May be this helps a bit.

Regards,

[john1598360627]

Thank you huber!

I have some questions about your approach.
Is the idea that we must convert the records within a database table into objects called 'events'? This part makes sense, however what I'm confused about is the 'event source'.

You called a function 'getCalendarEventSource()', which you used to insert the event objects is what I'm understanding. I'm confused about the 'event source' aspect of all this. How do we create an event source? Why can't the event source just be the database table itself?

Is the idea here that;

1. Create Event Source & connect it to the FullCalendar
2. Convert database table records into Event objects
3. Add Event Objects into Event Source

So I'm curious how to create the Event Source.

[robert.edelmann]

I didn't try to use the component, I just looked at it, but as I understand it, the component has no data-binding, so you can't just connect to a table like you would use like, a grid.

To display data you have to take alle your calendar entries and create an array of event-objects + some more data.

The properties of the objects are described in the wiki of the component here: https://github.com/Servoy/fullcalendarcomponent/wiki/Fullcalendar-Events.

[mboegem]

Hi John,

Is the idea here that;
1. Create Event Source & connect it to the FullCalendar
2. Convert database table records into Event objects
3. Add Event Objects into Event Source

Step 3 is automatically handled by the component.
The event source will have an ID
The events will contain the ID of the event source.

The callback function for event sources which is attached to the calendar, will be triggered upon changes in the calendar (ie. add/remove event source, change view type/date range)
If you fetch your data through a query in the callback function, this will result in multiple queries to fetch the data for all the event sources.
This is not the most effective way and depending on the query can result in performance decrease.

Performance can be gained by doing 1 query per set of event sources per date range, then store this data and let the callback read from this storage.
Of course first step in the callback is to determine whether stored data is still applicable for the current set of event sources and datarange, if not: clear storage and rebuild the storage for the conditions.

Hope this helps

[huber]

Hi John

Robert already gave the answer. I iterate over the dataset, which was filled by a query, i. e. a SELECT … FROM … statement. The dataset then has to contain what you need, in my case it's driven by the daily time records for lessons, like lesson date, lesson start time, lesson end time, lesson class(es), lesson subject, and lesson teacher(s).

The method getCalendarEventSource() is just an abstract method and looks like this:

Code: Select all

/**
* @return         {RuntimeWebComponent<svy-fullcalendar.EventSourceType>|RuntimeWebComponent<svy-fullcalendar2.EventSourceType>}
*
* @abstract
*
* @properties={typeid:24,uuid:"D144507B-E64B-46B5-B3EE-934EF3F607F1"}
*/
function getCalendarEventSource() {
   return null;
}

You called a function 'getCalendarEventSource()', which you used to insert the event objects is what I'm understanding. I'm confused about the 'event source' aspect of all this. How do we create an event source? Why can't the event source just be the database table itself?

As Robert and Marc said.

Hopefully there is not too much confusion yet.

[john1598360627]

Thanks for the replies yall.

Though, I'm still confused on how to initialize the Calendar.

https://github.com/Servoy/fullcalendarc ... dar-Events

Using the github as my source I attempted to try and setup the Calendar to automatically fetch data using a Fetch Function to populate the Calendar. I got an error saying the options I passed couldn't be parsed by the Calendar.

ERROR

Code: Select all

ERROR com.servoy.j2db.util.Debug - cant parse variable 'option_calendar'

OPTIONS

Code: Select all

var option_calendar = {
   eventSources: [
   function_EventSource,
   array_EventSource
   ]
};
/**
* @type {svy-fullcalendar.EventSourceType}
*
* @properties={typeid:35,uuid:"F79A7DAB-D2F7-4447-A37E-9E2D93228963",variableType:-4}
*/
var function_EventSource = {
   events: fetch_Function,
   data: {search: 'Amsterdam'},
   color: 'green',
   ignoreTimezone: false
};

/**
*
* @type {svy-fullcalendar.EventSourceType}
*
* @properties={typeid:35,uuid:"C0468449-2EB7-4092-A90C-2106EE33BEE4",variableType:-4}
*/
var array_EventSource = {
   events: [{
      title: "source event",
      start: new Date(),
      allDay: true
   }],
   color: 'yellow'
};


Maybe I setup the fetch function wrong? I don't know

FETCH

Code: Select all


/**
*
* @param {Date} start
* @param {Date} end
* @param {Object} [data] optional object to be used as filter parameters in fetching events
*
*
* @return {Object}
*
* @properties={typeid:24,uuid:"ACA4AFA8-6266-432B-99A5-3A609CE5034B"}
* @AllowToRunInFind
*/
function fetch_Function( start, end, data ) {
   /** @type {JSFoundset<db:/fullcalendar/event_object>} */
    var fs_eventobject = databaseManager.getFoundSet("db:/fullcalendar/event_object");
    // search data based on your search criteria
       if (fs_eventobject.find()) {
//         if (data.search) fs_eventobject. = data.search
           fs_eventobject.start_date = '>= ' + utils.dateFormat(scopes.svyDateUtils.toStartOfDay(new Date(start)), 'dd/MM/yyyy HH:mm:ss') + '|dd/MM/yyyy HH:mm:ss';
          fs_eventobject.end_date = '<= ' + utils.dateFormat(scopes.svyDateUtils.toEndOfDay(new Date(end)), 'dd/MM/yyyy HH:mm:ss') + '|dd/MM/yyyy HH:mm:ss';
         fs_eventobject.search();
       }
      var events = []
       for (var i=1; i<=fs_eventobject.getSize(); i++ ) {
          /** @type {JSRecord<db:/fullcalendar/event_object>} */
         var rec = fs_eventobject.getRecord(i)
         // Note: is up to the developer map a datasource to an event object
         events.push({
            start : rec.start_date,
            end: rec.end_date,
            title :   rec.title_event
//            location: rec.location
         });
       }
      return events;
}


I was able to add a singular event object manually atleast.

[john1598360627]

Also, I forget if I asked this already, but I wanted to ask something about editing the objects.

Due to how populating this Calendar works, it means we create objects to put into the Calendar.... but how does it work the other way around?

If I edit an event on the Calendar, how do I make sure the corresponding record in the database in edited too? Is there some 'onEdit' event to grab to update the database too? Perhaps the 'onEventChange'?

[paronne]

Hi John,

there are calendar events onEventDrop, onEventResize which you can use to intercept the changes and store these changes in the DB yourself.
On a note; there has been a recent fix in the onEventResize event improving the event params ( https://support.servoy.com/browse/SVYX-808 ) is soon to be released with 2024.3.

Regards,
Paolo

[john1598360627]

Hi John,

there are calendar events onEventDrop, onEventResize which you can use to intercept the changes and store these changes in the DB yourself.
On a note; there has been a recent fix in the onEventResize event improving the event params ( https://support.servoy.com/browse/SVYX-808 ) is soon to be released with 2024.3.

Regards,
Paolo

That's good to hear there's ways of getting the event updates to the data. I'll have to experiment with that later then.

But currently having issues populating the Calendar all together.

[john1598360627]

Does anyone have any example of how to setup the fetch function for the Calendar?

[tnguyen]

What do you mean by a fetch function? If you have a dataset or foundset of data you simple need to iterate through it and create the object to add to the calendar component.

For example if i wanted to add 10 records you could do so via a for loop:

Code: Select all

//add ten events
   var d = new Date();
   for (var i = 1; i < 10; i++) {
      d.setHours(d.getHours()+1); // add a new event but increase the hours by one
      elements.calendar.addEvent({ title: "Event "+i, start: d })
   }


Using a standard foundset object ( a table that has two columns (title, and startDate) you could populate the calendar like so:

Code: Select all

for (var i = 1; i <= foundset.getSize(); i++) {
      var record = foundset.getRecord(i);
      elements.calendar.addEvent({ title: record.title, start: record.startDate })
   }


[paronne]

Hi John,

i guess as "fetch" you mean the calendar will be able to fetch events any time user navigate to a different week/month etc..
In that case you can use eventSource with a callback function. The callback function should return the list of events:

Code: Select all

   /** @type {CustomType<svy-fullcalendar2.EventSource>} */
   var eventSource = {
      id: 'myeventsource',
      events: resourceEventSourceCallback, // the callback method which is going to populate the calendar
      editable: true,
      startEditable: true,
      durationEditable: true,
      defaultAllDay: false
   }

   ...
   // assuming you have an option object to init the calendar
    options.eventSources = [eventSource];
    calendar.fullCalendar(options);

function resourceEventSourceCallback(start, end, params) {
   /** @type {JSFoundSet<mem:event_objects>} */
   var fs = databaseManager.getFoundSet("mem:event_objects");


   // search all events with the by resource_id between start and end time
   if (fs.find()) {
      fs.start_date = '>= ' + scopes.svyUtils.dateFormat(scopes.svyUtils.toStartOfDay(new Date(start)), 'dd/MM/yyyy HH:mm:ss') + '|dd/MM/yyyy HH:mm:ss';
      fs.end_date = '<= ' + scopes.svyUtils.dateFormat(scopes.svyUtils.toEndOfDay(new Date(end)), 'dd/MM/yyyy HH:mm:ss') + '|dd/MM/yyyy HH:mm:ss';
      fs.search();
   }

   var record;
   var retval = [];
   // return the EventParsing objects for each record in foundset
   for (var i = 1; i <= fs.getSize(); i++) {
      record = fs.getRecord(i);
      var event = getEvent(record);
      retval.push(event)
   }
   
   return retval;
}


By the way, have you looked already at the FullcalendarDemo v2 for TiNG in this repo https://github.com/Servoy/fullcalendarc ... nentSample ?
I know there are still some ongoing fixes and you will likely need Servoy 2024.3.

Regards,
Paolo