Adding scheduler to the fullcalendarcomponent

Forum to discuss the new web client version of Servoy.

Adding scheduler to the fullcalendarcomponent

Postby swingman » Fri Oct 25, 2019 12:24 pm

Hi all,

I have downloaded the fullcalendarcomponent. I would like to use the fullcalendar-scheduler and have bought a license for it. How do I add it to the component?
My guess is to
- unzip it.
- add scheduler.min.js and scheduler.min.css to the lib folder.
- add declarations in the .spec file for the two new files I have added
Code: Select all
{
   "name": "svy-fullcalendar",
   "displayName": "FullCalendar",
   "icon" : "fullcalendarcomponent/fullcalendar/fullcalendar.png",
   "definition": "fullcalendarcomponent/fullcalendar/fullcalendar.js",
   "serverscript": "fullcalendarcomponent/fullcalendar/fullcalendar_server.js",
   "libraries": [{
         "name":"moment",
         "version":"2.19.1",
         "url": "fullcalendarcomponent/fullcalendar/lib/moment.min.js",
         "mimetype":"text/javascript"
      },{
         "name": "fullcalendar.css",
         "version": "2.9.1",
         "url": "fullcalendarcomponent/fullcalendar/lib/fullcalendar.min.css",
         "mimetype": "text/css"
      },{
         "name": "fullcalendar.js",
         "version": "2.9.1",
         "url": "fullcalendarcomponent/fullcalendar/lib/fullcalendar.min.js",
         "mimetype": "text/javascript"
      },{
         "name": "scheduler.css",
         "version": "1.9.4",
         "url": "fullcalendarcomponent/fullcalendar/lib/scheduler.min.css",
         "mimetype": "text/css"
      },{
         "name": "scheduler.js",
         "version": "1.9.4",
         "url": "fullcalendarcomponent/fullcalendar/lib/scheduler.min.js",
         "mimetype": "text/javascript"
      },{
         "name": "gcal.js",
         "version": "2.9.1",
         "url": "fullcalendarcomponent/fullcalendar/lib/gcal.js",
         "mimetype": "text/javascript"
      },{
         "name": "fullcalendar.lang.js",
         "version": "2.9.1",
         "url": "fullcalendarcomponent/fullcalendar/lang/lang-all.js",
         "mimetype": "text/javascript"
      }],
   "version": 1,
   
   "model":
   {
      "hasToDraw": {"type":"boolean", "pushToServer" : "allow", "tags": {"scope": "private"}},
      "renderOnCurrentView": {"type":"boolean", "pushToServer" : "allow", "tags": {"scope": "private"}},
      "calendarOptions" : {"type":"FullCalendarOptions", "pushToServer" : "allow", "tags": {"scope": "private"}},
      "view" : {"type" : "object", "pushToServer": "allow", "tags" : {"scope" : "private"}},
      "events": {"type": "EventType[]", "tags" : {"scope" : "private"}},
      
      "eventSources" : {"type": "ArrayEventSourceType[]", "tags" : {"scope" : "private"}},
      
      "arrayEventSources" : {"type": "ArrayEventSourceType[]", "tags" : {"scope" : "private"}},
      "functionEventSources" : {"type": "FunctionEventSourceType[]", "tags" : {"scope" : "private"}},
      "gcalEventSources" : {"type": "GoogleCalendarEventSourceType[]", "tags" : {"scope" : "private"}},
      "styleClass" : {"type": "styleclass"},
      "tooltipExpression" : {"type": "tagstring"},
      
       "location" : {"type" :"point", "pushToServer": "deep"},
      "size": {
         "type": "dimension",
         "default": {
            "width": 600,
            "height": 400
         }
      }
   },
   "handlers": {
      "onSelectMethodID": {
         "parameters" : [{
               "type": "date",
                "name": "start"
             }, {
               "type": "date",
               "name": "end"
             }, {
                "type": "JSEvent",
                "name": "event"
             }, {
                "type": "ViewType",
                "name": "view"
             }, {
                "type": "ResourceType",
                "name": "resource",
                "optional" : true
            }]
      },
      "onDayClickMethodID": {
         "parameters" : [{
               "type": "date",
                "name": "date"
             }, {
                "type": "JSEvent",
                "name": "event"
             }, {
                "type": "ViewType",
                "name": "view"
             }, {
                "type": "ResourceType",
                "name": "resource",
                "optional" : true
            }]
      },
      "onEventClickMethodID": {
         "parameters" : [{
               "type": "EventType",
                "name": "eventObject"
             }, {
                "type": "JSEvent",
                "name": "event"
             }, {
                "type": "ViewType",
                "name": "view"
            }]
      },
      "onEventRightClickMethodID": {
         "parameters" : [{
               "type": "EventType",
                "name": "eventObject"
             }, {
                "type": "JSEvent",
                "name": "event"
             }, {
                "type": "ViewType",
                "name": "view"
            }]
      },
      "onEventResizeMethodID": {
         "parameters" : [{
               "type": "EventType",
                "name": "eventObject"
             }, {
               "type": "int",
               "name": "delta"
             }, {
                "type": "JSEvent",
                "name": "event"
             }, {
                "type": "ViewType",
                "name": "view"
            }]
      },
      "onEventDropMethodID": {
         "parameters" : [{
               "type": "EventType",
                "name": "eventObject"
             }, {
               "type": "int",
               "name": "delta"
             }, {
                "type": "JSEvent",
                "name": "event"
             }, {
                "type": "ViewType",
                "name": "view"
            }]
      }
   },
   "api": {
      "fullCalendar" : {
         "parameters" : [{
            "name": "calendarOptions",
            "type": "FullCalendarOptions"
            }, {
            "name": "renderOnCurrentView",
            "type": "boolean",
            "optional" : true
            }]
      },
      "getFullCalendarOptions" : {
         "returns": "FullCalendarOptions"
      },
      "updateFullCalendar" : {
         "parameters" : [{
                        "name":"option",
                                "type":"string"
                                }, {                                                               
                                "name":"value",
                                "type":"object"
                                }
         ]
      },
            "select": {
               "parameters": [{
                                "name":"startDate",
                                "type":"date"
                                }, {                                                               
                                "name":"endDate",
                                "type":"date",
                                "optional" : true
                                }, {                                                               
                                "name":"allDay",
                                "type":"boolean",
                                "optional" : true
                                }, {
                                "name":"resourceId",
                                "type":"object",
                                "optional" : true
                              }],
                 "delayUntilFormLoad": true
            },
            "unselect": {
               "delayUntilFormLoad": true
            },
            "getView": {
               "returns": "ViewType",
               "delayUntilFormLoad": true
            },
            "changeView": {
                       "parameters":[{                                                               
                                "name":"viewName",
                                "type":"string"
                              }],
                "delayUntilFormLoad": true
            },
           
            "option": {
                      "parameters":[{                                                               
                                "name":"option",
                                "type":"string"
                              }, {                                                               
                                "name":"value",
                                "type":"object"
                              }],
                "delayUntilFormLoad": true
            },
           
            "next": {
               "delayUntilFormLoad": true
            },
            "prev": {
               "delayUntilFormLoad": true
            },
            "prevYear": {
               "delayUntilFormLoad": true
            },
            "nextYear": {
               "delayUntilFormLoad": true
            },
            "today": {
               "delayUntilFormLoad": true
            },
            "getDate": {
               "returns": "date",
               "delayUntilFormLoad": true
            },
            "gotoDate": {
                      "parameters":[{
                                "name":"date",
                                "type":"date"
                                }],
                "delayUntilFormLoad": true
            },
            "incrementDate": {
                "parameters":[{                                                               
                                "name":"years",
                                "type":"int",
                                "optional": true
                                }, {                                                               
                                "name":"months",
                                "type":"int",
                                "optional": true
                                }, {                                                               
                                "name":"days",
                                "type":"int",
                                "optional": true
                                }],
                "delayUntilFormLoad": true
            },

           
            "clientEvents": {
                  "returns" : "EventType []",
                   "parameters":[{                                                               
                                "name":"id",
                                "type":"string",
                                "optional": true
                                }],
                    "delayUntilFormLoad": true
            },
            "renderEvent": {
               "parameters":[{                                                               
                                "name":"event",
                                "type":"EventType"
                                }, {                                                               
                                "name":"stick",
                                "type":"boolean",
                                "optional": true
                             }],
                    "returns" : "boolean",
                    "delayUntilFormLoad": true         
             },
            "updateEvent": {
                  "parameters":[{                                                               
                                "name":"event",
                                "type":"EventType"
                                }],
                    "returns" : "boolean",
                    "delayUntilFormLoad": true     
            },
            "removeEvents": {
                  "parameters":[{                                                               
                                "name":"id",
                                "type":"object"
                             }],
                    "delayUntilFormLoad": true 
            },
            "addEventSource": {
                    "parameters":[{                                                               
                                "name":"eventSource",
                                "type":"EventSourceType"
                                }]
            },
            "removeEventSource": {
                   "parameters":[{                                                               
                                "name":"id",
                                "type":"object"
                              }],
                    "delayUntilFormLoad": true
            },
            "rerenderEvents": {
               "delayUntilFormLoad": true
            },
            "refetchEvents": {
               "delayUntilFormLoad": true
            },
            "render" : {
               "delayUntilFormLoad": true
            },
            "addResource": {
                    "parameters":[{                                                               
                                "name":"resource",
                                "type":"ResourceType"
                                }]
            },
            "removeResource": {
                   "parameters":[{                                                               
                                "name":"id",
                                "type":"object"
                              }],
                    "delayUntilFormLoad": true
            }
      },
   "types": {
      "EventType": {
         "id" : "object",
         "title": "tagstring",
         "start": "date",
         "end": "date",
         "allDay" : "boolean",
         "className" : "object",
         "editable" : "boolean",
         "startEditable" : "boolean",
         "durationEditable" : "boolean",
         "rendering" : "string",
         "overlap" : "boolean",
         "constraint" : "BusinessHours",
         "color": "color",
         "backgroundColor": "color",
         "borderColor": "color",
         "textColor" : "color",
         "resourceIds" : "object",
         "data" : "object"
       },
       "ResourceType": {
         "id" : "object",
         "title" : "tagstring",
         "eventColor": "color",
         "eventBackgroundColor": "color",
         "eventBorderColor": "color",
         "eventTextColor" : "color",
         "eventClassName" : "styleclass",
         "children" : "object",
         "parentId" : "object",
         "parent" : "object"
       },
       "EventSourceType" : {
           "id"  : "object",       
           "events" : "object",
            "googleCalendarId": "string",
            "googleCalendarApiKey": "string",
            "className" : "string[]",
            "allDayDefault" : "boolean",
         "editable" : "boolean",
         "startEditable" : "boolean",
         "durationEditable" : "boolean",
         "rendering" : "string",
         "overlap" : "boolean",
         "constraint" : "BusinessHours",
         "color": "color",
         "backgroundColor": "color",
         "borderColor": "color",
         "textColor" : "color",
         "data" : "object"
       },    
         "ArrayEventSourceType": {
            "id"  : "object",
            "events": "EventType[]",
            "className" : "string[]",
            "allDayDefault" : "boolean",
         "editable" : "boolean",
         "startEditable" : "boolean",
         "durationEditable" : "boolean",
         "rendering" : "string",
         "overlap" : "boolean",
         "constraint" : "BusinessHours",
         "color": "color",
         "backgroundColor": "color",
         "borderColor": "color",
         "textColor" : "color",
         "data" : "object"
         },
         "FunctionEventSourceType": {
             "id"  : "object",
            "events": "function",
            "className" : "string[]",
            "allDayDefault" : "boolean",
         "editable" : "boolean",
         "startEditable" : "boolean",
         "durationEditable" : "boolean",
         "rendering" : "string",
         "overlap" : "boolean",
         "constraint" : "BusinessHours",
         "color": "color",
         "backgroundColor": "color",
         "borderColor": "color",
         "textColor" : "color",
         "data" : "object"
        },
        "GoogleCalendarEventSourceType": {
            "id"  : "object",       
            "googleCalendarId": "string",
            "googleCalendarApiKey": "string",
            "className" : "string[]",
            "allDayDefault" : "boolean",
         "editable" : "boolean",
         "startEditable" : "boolean",
         "durationEditable" : "boolean",
         "rendering" : "string",
         "overlap" : "boolean",
         "constraint" : "BusinessHours",
         "color": "color",
         "backgroundColor": "color",
         "borderColor": "color",
         "textColor" : "color",
         "data" : "object"
        },
        "ViewType": {
            "name": "string",
           "title": "string",
           "start": "date",
           "end": "date",
           "intervalStart": "date",
          "intervalEnd": "date",
          "defaultDate": {"type": "date", "tags": {"scope" : "private"}}
        },
        "Header": {
           "left": "string",
           "center": "string",
           "right" : "string"
        },
        "BusinessHours" : {
              "start": "string",
              "end": "string",
          "dow": "int[]"
        },
        "FullCalendar": {
           "options" : "FullCalendarOptions"
        },
        "FullCalendarOptions" : {
           "allDayText": {"type" :"tagstring"},
           "allDaySlot": {"type" :"boolean"},
           "allDayDefault": {"type" :"boolean"},
           "aspectRatio": {"type" :"double"},
           "businessHours": {"type" :"BusinessHours"},
           "buttonText": {"type" :"object"},
           "columnFormat": {"type" :"object"},
           "contentHeight": {"type" :"object"},
           "defaultAllDayEventDuration": {"type" :"object"},
           "defaultTimedEventDuration": {"type" :"string"},
           "defaultDate": {"type" :"date"},
           "defaultView": {"type" :"string"},
           "dayNames": {"type" :"string[]"},
           "dayNamesShort": {"type" :"string[]"},
           "displayEventEnd": {"type" :"boolean"},
           "displayEventTime": {"type" :"boolean"},
           "dayPopoverFormat": {"type" :"string"},
           "dragOpacity": {"type" :"float"},
           "dragRevertDuration": {"type" :"int"},
           "dragScroll": {"type" :"boolean"},
         "editable": {"type" :"boolean"},   
         "eventDurationEditable": {"type" :"boolean"},
         "eventStartEditable": {"type" :"boolean"},
         "eventConstraint": {"type" :"object"},           
           "eventLimit" : {"type" :"int"},
           "eventLimitClick" : {"type" :"string"},
           "eventLimitText" : {"type" :"string"},
           "eventOverlap": {"type" :"boolean"}, 
           "eventSources" : {"type" :"EventSourceType[]"},
         "firstDay": {"type" :"int"},
         "fixedWeekCount": {"type" :"boolean"},
         "forceEventDuration": {"type" :"boolean"},
           "handleWindowResize": {"type" :"boolean"},          
           "header" : {"type" :"object"},
           "hiddenDays" : {"type" : "int[]"},
           "lang": {"type" :"string"},
           "lazyFetching": {"type" :"boolean"},
           "isRTL": {"type" :"boolean"},
           "longPressDelay" : {"type" : "int"},
         "minTime": {"type" :"string"},
         "maxTime": {"type" :"string"},
         "monthNames": {"type" :"string[]"},
         "monthNamesShort": {"type" :"string[]"},
         "nowIndicator": {"type" :"boolean"},
         "unselectAuto": {"type" :"boolean"},
         "unselectCancel": {"type" :"string"},
         "scrollTime": {"type" :"string"},
         "selectable": {"type" :"boolean"},
         "selectConstraint": {"type" :"object"},
         "selectHelper": {"type" :"boolean"},
         "selectOverlap": {"type" :"boolean"},
         "slotDuration": {"type" :"string"},
         "slotLabelFormat": {"type" :"string"},
         "slotLabelInterval": {"type" :"string"},
         "slotEventOverlap": {"type" :"boolean"},
         "snapDuration": {"type" :"string"},
         "timeFormat": {"type" :"object"},
         "titleFormat": {"type" :"object"},
         "weekends": {"type" :"boolean"},
         "weekNumbers": {"type" :"boolean"},
         "weekNumberCalculation": {"type" :"string"},
         "weekNumberTitle": {"type" :"string"},
         "views": { "type" : "object"},
      
         "resources" : {"type" :"ResourceType[]"},
         "resourceAreaWidth" : {"type" :"string"},
         "resourceLabelText" : {"type" :"string"},
         "resourceOrder" : {"type" :"string"},
         "resourceGroupField" : {"type" :"string"},
         "groupByResource" : {"type" :"boolean"},
         "groupByDateAndResource" : {"type" :"boolean"},
         "slotWidth" : {"type" :"string"}
         
        }
   }
}

- zip it.
Servoy no longer sees the fullcalendarcomponent if I do this.

Any ideas?
Christian Batchelor
Certified Servoy Developer
Batchelor Associates Ltd, London, UK
http://www.batchelorassociates.co.uk

http://www.postgresql.org - The world's most advanced open source database.
User avatar
swingman
 
Posts: 1472
Joined: Wed Oct 01, 2003 10:20 am
Location: London

Re: Adding scheduler to the fullcalendarcomponent

Postby sean » Fri Oct 25, 2019 6:36 pm

Hi Christian,

Thanks for using the FullCalendar extension.

I think it's answered in another thread:
viewtopic.php?f=69&t=22593

Does that help?
Software Engineer
Servoy USA
sean
 
Posts: 370
Joined: Mon May 21, 2007 6:26 pm
Location: USA

Re: Adding scheduler to the fullcalendarcomponent

Postby swingman » Fri Oct 25, 2019 6:56 pm

Thanks Sean,

Yes, I'm on that thread too -- that is how far I got last time I tried.
With the fix for 'addJSFileDepandency' it loads...
Now I have to work out how to get the scheduler views to work...

Christian
Christian Batchelor
Certified Servoy Developer
Batchelor Associates Ltd, London, UK
http://www.batchelorassociates.co.uk

http://www.postgresql.org - The world's most advanced open source database.
User avatar
swingman
 
Posts: 1472
Joined: Wed Oct 01, 2003 10:20 am
Location: London

Re: Adding scheduler to the fullcalendarcomponent

Postby swingman » Fri Oct 25, 2019 8:44 pm

I'm trying to get the view to group by resource by setting
Code: Select all
groupByDateAndResource: true


As shown here:

https://fullcalendar.io/docs/v3/timelin ... -view-demo

or here

https://fullcalendar.io/docs/datesAboveResources-demo

Have anyone got this working?
Christian Batchelor
Certified Servoy Developer
Batchelor Associates Ltd, London, UK
http://www.batchelorassociates.co.uk

http://www.postgresql.org - The world's most advanced open source database.
User avatar
swingman
 
Posts: 1472
Joined: Wed Oct 01, 2003 10:20 am
Location: London

Re: Adding scheduler to the fullcalendarcomponent

Postby paronne » Tue Oct 29, 2019 9:53 am

Hi,

in the fullcalendar demo available in GitHub there is a form which can be used to show the fullcalendar with resource view.
Such form is called "demoScheduler"; it extends the "demoCalendar" form and override some properties/methods to get it to work as a Resource View.
https://github.com/Servoy/fullcalendarc ... heduler.js
You may test it using the demo solution available in GitHub

It requires the scheduler.js lib to work as a Resource View, will show as plain calendar if the scheduler.js is not available.
Please note, as mentioned in the other thread suggested by Sean, the fullcalendar component is using version 2.9.1 of fullcalendar. The scheduler.js must be a compatible version (v 1.3.3 https://github.com/fullcalendar/fullcal ... tag/v1.3.3 ).

Regards,
Paolo
paronne
 
Posts: 202
Joined: Fri Nov 02, 2012 3:21 pm

Re: Adding scheduler to the fullcalendarcomponent

Postby swingman » Tue Oct 29, 2019 7:12 pm

Hi Paolo,

I can't get this to work either. I think I'm going to start over again with your sample, make the modifications again and if it does not work send you to the Servoy project so you can take a look to see what is missing...
Christian Batchelor
Certified Servoy Developer
Batchelor Associates Ltd, London, UK
http://www.batchelorassociates.co.uk

http://www.postgresql.org - The world's most advanced open source database.
User avatar
swingman
 
Posts: 1472
Joined: Wed Oct 01, 2003 10:20 am
Location: London

Re: Adding scheduler to the fullcalendarcomponent

Postby swingman » Thu Oct 31, 2019 4:37 pm

Hi Paolo,

I have made a sample solution showing the problem and tried to send it to you via the messaging on the forum, but the message seems stuck in the Outbox...
Christian Batchelor
Certified Servoy Developer
Batchelor Associates Ltd, London, UK
http://www.batchelorassociates.co.uk

http://www.postgresql.org - The world's most advanced open source database.
User avatar
swingman
 
Posts: 1472
Joined: Wed Oct 01, 2003 10:20 am
Location: London

Re: Adding scheduler to the fullcalendarcomponent

Postby paronne » Thu Oct 31, 2019 4:51 pm

Hi Christian,

are you coming to Servoy World next week ?
I will be there, we can have a look at it together.

Regards,
Paolo
paronne
 
Posts: 202
Joined: Fri Nov 02, 2012 3:21 pm

Re: Adding scheduler to the fullcalendarcomponent

Postby swingman » Thu Oct 31, 2019 11:47 pm

Yes, I will be there for the hackathon and the conference...
Christian Batchelor
Certified Servoy Developer
Batchelor Associates Ltd, London, UK
http://www.batchelorassociates.co.uk

http://www.postgresql.org - The world's most advanced open source database.
User avatar
swingman
 
Posts: 1472
Joined: Wed Oct 01, 2003 10:20 am
Location: London


Return to Servoy NGClient

Who is online

Users browsing this forum: Google [Bot] and 5 guests

cron