Fullcalendar Demo Doesn't Work

Discuss all problems you have with Servoy here. It might help to mention the Servoy version and Operating System version you are using

Fullcalendar Demo Doesn't Work

Postby john1598360627 » Thu Feb 22, 2024 1:08 am

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
fullcalendar-error_20240221.png (75.96 KiB) Viewed 745 times


fullcalendar-broken_20240221.png
fullcalendar-broken_20240221.png (48.07 KiB) Viewed 745 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?
john1598360627
 
Posts: 175
Joined: Tue Aug 25, 2020 3:03 pm

Re: Fullcalendar Demo Doesn't Work

Postby sean » Thu Feb 22, 2024 4:25 pm

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
Software Engineer
Servoy USA
sean
 
Posts: 370
Joined: Mon May 21, 2007 6:26 pm
Location: USA

Re: Fullcalendar Demo Doesn't Work

Postby john1598360627 » Sat Feb 24, 2024 1:18 am

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?
john1598360627
 
Posts: 175
Joined: Tue Aug 25, 2020 3:03 pm

Re: Fullcalendar Demo Doesn't Work

Postby huber » Mon Feb 26, 2024 10:53 am

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,
Robert Huber
7r AG, Switzerland
SAN Developer
http://www.seven-r.ch
User avatar
huber
 
Posts: 518
Joined: Mon May 14, 2012 11:31 pm

Re: Fullcalendar Demo Doesn't Work

Postby john1598360627 » Thu Feb 29, 2024 1:42 am

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.
john1598360627
 
Posts: 175
Joined: Tue Aug 25, 2020 3:03 pm

Re: Fullcalendar Demo Doesn't Work

Postby robert.edelmann » Thu Feb 29, 2024 3:57 am

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.
mit freundlichen Grüßen
Robert Stefan Edelmann
User avatar
robert.edelmann
 
Posts: 92
Joined: Wed Aug 14, 2013 6:12 pm

Re: Fullcalendar Demo Doesn't Work

Postby mboegem » Thu Feb 29, 2024 11:08 am

Hi John,

john1598360627 wrote: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
Marc Boegem
Solutiative / JBS Group, Partner
Servoy Specialist
• Servoy Certified Developer
• Servoy Valued Professional
• Freelance Developer

Image
User avatar
mboegem
 
Posts: 1748
Joined: Sun Oct 14, 2007 1:34 pm
Location: Amsterdam

Re: Fullcalendar Demo Doesn't Work

Postby huber » Thu Feb 29, 2024 11:26 am

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.
Robert Huber
7r AG, Switzerland
SAN Developer
http://www.seven-r.ch
User avatar
huber
 
Posts: 518
Joined: Mon May 14, 2012 11:31 pm

Re: Fullcalendar Demo Doesn't Work

Postby john1598360627 » Thu Mar 14, 2024 2:13 am

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
 
Posts: 175
Joined: Tue Aug 25, 2020 3:03 pm

Re: Fullcalendar Demo Doesn't Work

Postby john1598360627 » Thu Mar 14, 2024 2:16 am

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'?
john1598360627
 
Posts: 175
Joined: Tue Aug 25, 2020 3:03 pm

Re: Fullcalendar Demo Doesn't Work

Postby paronne » Thu Mar 14, 2024 9:48 am

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
paronne
 
Posts: 202
Joined: Fri Nov 02, 2012 3:21 pm

Re: Fullcalendar Demo Doesn't Work

Postby john1598360627 » Sat Mar 16, 2024 2:07 am

paronne wrote: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
 
Posts: 175
Joined: Tue Aug 25, 2020 3:03 pm

Re: Fullcalendar Demo Doesn't Work

Postby john1598360627 » Sat Mar 16, 2024 2:08 am

Does anyone have any example of how to setup the fetch function for the Calendar?
john1598360627
 
Posts: 175
Joined: Tue Aug 25, 2020 3:03 pm

Re: Fullcalendar Demo Doesn't Work

Postby tnguyen » Tue Mar 19, 2024 8:03 pm

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 })
   }
tnguyen
 
Posts: 16
Joined: Mon Sep 29, 2014 8:40 am

Re: Fullcalendar Demo Doesn't Work

Postby paronne » Wed Mar 20, 2024 9:07 am

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
paronne
 
Posts: 202
Joined: Fri Nov 02, 2012 3:21 pm

Next

Return to Discuss possible Issues and Bugs

Who is online

Users browsing this forum: No registered users and 5 guests