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?
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.
I am not exactly sure if I understand you correctly, but what I do is:
Having a form which has the dataSource property set to a db table, like .rooms
Put the FullCalendar2 component onto the body part of the form
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.
Fetching the events in the dataset and push them in to the variable events, like
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;
Init the calendar like with following function
function initCalendar() {
getCalendar().fullCalendar(getCalenderOtions());
var eventSource = getCalendarEventSource();
eventSource['events'] = fetchEvents;
getCalendar().addEventSource(eventSource);
}
Calendar options look something like this
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;
}
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;
Create Event Source & connect it to the FullCalendar
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.
Create Event Source & connect it to the FullCalendar
Convert database table records into Event objects
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.
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:
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?
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.
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’?
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.
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.
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:
//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:
for (var i = 1; i <= foundset.getSize(); i++) {
var record = foundset.getRecord(i);
elements.calendar.addEvent({ title: record.title, start: record.startDate })
}
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:
/** @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.
Hi Paolo,
As an easily downloadable sample for TiNG has not been linked to, how does one easily ‘convert’ the files you linked to (& likewise for the Kanban component) in to an importable ‘.servoy’ solution file??
Even better, PLEASE can decent example/sample solution files be created for all these lovely web components we can import via Servoy Package Manager (& FULL documentation in Wiki on all parts of modules, like svyUtils etc.)??
It’s frustrating and time consuming to have to try to decipher how to build stuff without adequate documentation or examples…
As an easily downloadable sample for TiNG has not been linked to, how does one easily ‘convert’ the files you linked to (& likewise for the Kanban component) in to an importable ‘.servoy’ solution file??
From gitHub page you can download the whole sourcecode as a .zip file ( https://github.com/Servoy/fullcalendarc … master.zip )
Once downloaded as a zip, you can copy the project folder you want to import into your workspace and then use File → Import… → General > Existing project into wokspace.
paronne:
Hi Rafig,
From gitHub page you can download the whole sourcecode as a .zip file ( https://github.com/Servoy/fullcalendarc … master.zip )
Once downloaded as a zip, you can copy the project folder you want to import into your workspace and then use File → Import… → General > Existing project into wokspace.
Paolo
