×
Menu
Index
Zoekopdracht
 
   
   
   
 
  (c) ABO Service bv, 2022

5.3. Sheduler Calendar form

 
With BOA creating a sheduler with all the possibilities you need is rather easy. You can use the sheduler as agenda for multiple persons, appointment system, reservations, ...
 
Sheduler as reservation system for meeting rooms.
 
 
A sheduler can be used as a menu item or can be a form as the result of the action of a button.
 
{
"title": "Sheduler demo",
"endpoint": "/files/calendar",
"pagetype": "sheduler",
"pageview": "month",
"id": "sheduler",
"buttons": [
"add",
"exit"
],
"onclick": {
"endpoint": "/files/calendar",
"buttons": [
"save",
"exit"
]
}
}
 
 
  • title: description of the menu item.
  • endpoint: url where to find the data for the sheduler.
  • pagetype: sheduler or modalsheduler.
  • pageview: day, week, month or agenda. Default is week.
  • pagesize: sm, md, lg or xl when using modalsheduler.
  • id: unique name
  • buttons: array of buttons.
  • onclick: object to define the action when there is a click in the sheduler.
  • endpoint: onclick endpoint. this is to get, post or put of one appointment. a form will be opened.
  • buttons: array of buttons to use in the form of the sheduler.
 
 
You can click in the legend to hide / show the events of a person.
 
 
At the startup of the sheduler BOA will send this request to your iAPI. You need to send all the data in your response, so the sheduler can be filled with your data.
 
Request: url/onclick.endpoint?labels=1&from=xxx&to=yyy
 
Sample: /files/calendar?labels=1&from=05/05/19 20:37&to=11/05/19 20:37
 
Result: data to create the sheduler.
 
Parameters:
 
BOA will add some parameters to the endpoint. These parameters have a specific meaning:
 
labels=1: this is added at the time of the first request. This way the iAPI can provide information about the definition of content of each event that must be shown in the sheduler. This way BOA will ask this only once. It well keep this in memory.
 
from=xxx&to=yyy: at startup BOA will request for the data of the current week. This way we will not overload the sheduler with past or future data we probably don't need. At the time you scroll in the sheduler, BOA will request data for new dates.
 

Response with labels and data:

 
{"file": "calendar",
"labels": [
{
"display": "",
"fieldname": "id",
"length": 8,
"inputtype": "hidden",
"block": 1
},
{
"display": "Subject:",
"tooltip": "",
"fieldname": "subject",
"length": 50,
"inputtype": "text",
"widgettype": "subject",
"block": 1,
"newline": true,
"labelwidth": 2,
"fieldwidth": 8
},
{
"display": "Location:",
"tooltip": "",
"fieldname": "location",
"length": 50,
"inputtype": "text",
"widgettype": "location",
"block": 1,
"newline": true,
"labelwidth": 2,
"fieldwidth": 8
},
{
"display": "Startdate:",
"tooltip": "",
"fieldname": "startdate",
"length": 8,
"inputtype": "date",
"widgettype": "fromdate",
"block": 1,
"newline": true,
"labelwidth": 2,
"fieldwidth": 4
},
{
"display": "Time:",
"tooltip": "",
"fieldname": "starttime",
"length": 5,
"inputtype": "time",
"widgettype": "fromtime",
"block": 1,
"newline": false,
"labelwidth": 2,
"fieldwidth": 4
},
{
"display": "Enddate:",
"tooltip": "",
"fieldname": "enddate",
"length": 8,
"inputtype": "date",
"widgettype": "todate",
"block": 1,
"newline": true,
"labelwidth": 2,
"fieldwidth": 4
},
{
"display": "Time:",
"tooltip": "",
"fieldname": "endtime",
"length": 5,
"inputtype": "time",
"widgettype": "totime",
"block": 1,
"newline": false,
"labelwidth": 2,
"fieldwidth": 4
},
{
"display": "Person:",
"tooltip": "",
"fieldname": "label",
"length": 2,
"inputtype": "combobox",
"widgettype": "resourceId",
"block": 1,
"newline": true,
"labelwidth": 2,
"fieldwidth": 4,
"options": [
{
"option": "Abo",
"value": 0
},
{
"option": "Peter",
"value": 1
},
{
"option": "Fran",
"value": 2
},
{
"option": "Timon",
"value": 3
},
{
"option": "Chris",
"value": 4
},
{
"option": "Katrien",
"value": 7
},
{
"option": "Febe",
"value": 8
},
{
"option": "Pavel",
"value": 9
}
]
},
{
"display": "Allday:",
"tooltip": "",
"fieldname": "allday",
"length": 1,
"inputtype": "checkbox",
"widgettype": "allDay",
"block": 1,
"newline": false,
"labelwidth": 2,
"fieldwidth": 4
},
{
"display": "Details:",
"tooltip": "",
"fieldname": "body",
"length": 0,
"inputtype": "multiline",
"widgettype": "description",
"block": 1,
"newline": true,
"labelwidth": 2,
"fieldwidth": 8,
"fieldheight": 4
}
],
"blocks": [
{
"width": 12
}
],
"data": [
{
"id": "635",
"subject": "verzekering ",
"location": " ",
"startdate": "08/05/19",
"starttime": "10:00",
"enddate": "08/05/19",
"endtime": "10:30",
"label": 8,
"allday": false,
"body": "test"
},
{
"id": "652",
"subject": "test ",
"location": " ",
"startdate": "09/05/19",
"starttime": "20:25",
"enddate": "09/05/19",
"endtime": "20:55",
"label": 2,
"allday": false,
"body": ""
},
{
"id": "642",
"subject": "Bart WP ",
"location": " ",
"startdate": "10/05/19",
"starttime": "11:00",
"enddate": "10/05/19",
"endtime": "12:00",
"label": 8,
"allday": false,
"body": ""
}
]
}
 
 
The response you need to send for the sheduler is about the same as BOA needs to create a form. BOA takes care of all the other functionalities without any effort.
 
  • labels: An array of objects to define all the elements of a form. This is needed to add or edit an event in the sheduler. This works the same way as with forms. All elements of a label can be used.
  • widgettype: with this you can define some specific info for the sheduler. This way BOA knows which fields are important to use in the sheduler view. How to build the legend, which time an event starts and ends, ... This is specific for the sheduler. The following widgettypes are possible:
  • subject
  • location
  • fromdate
  • fromtime
  • todate
  • totime
  • resourceId
  • allDay
  • description
     
After the information about the labels the data is send. The data is the standard array of objects as you have with a grid. You can find all the information about the grid data in the documentation.