02. xSchedule
- KKozue
02. xSchedule
The xSchedule BlackBox is used to display an interactive calendar, pulling in items from FileMaker data - and writing back when applicable.. It utilises the dhtmlxScheduler library.
https://dhtmlx.com/docs/products/dhtmlxScheduler/
(Please scroll down to the bottom of the above link to view licensing details)
Our BlackBox xSchedule demo utilises the Free GNU GPL v2 license, which provides the following:
Day, Week and Month views
The ability to move items, and add/edit/delete, using an interactive edit box
There is a Pro license available, that allows such things as multiple calendars on a single page and the ability to export to PDF/PNG.
It has a Month, Week and Day view. The following interactions are included:
Creating an appointment record by double clicking onto empty area
Modifying an appointment record (including deletion) by double clicking onto any appointment, it opens a dialog where you can change the description, and start/end timestamps (see screenshot below)
Switching between Day/Week/Month views, and moving forward/back in time
Appointments can be dragged to change date/time
Parameters
The parameters are as follows:
xSchedule ( id_field ; startdate_field ; enddate_field ; description_field ; sort_field ; colour_field ; chart_start_date { ; chart_options_js } )
Parameter | Description |
id_field | A unique identifier used for each appointment record Eg, |
startdate_field | A field indicating the start date/time of an appointment record, can be a Date or Timestamp field Eg, |
enddate_field | A field indicating the end date/time of an appointment record, can be a Date or Timestamp field Eg, |
description_field | A field with some text content that will appear as the label for the appointment Eg, |
sort_field | A field with a number that represents its order when appointments take place at the same time Eg, |
colour_field | A field that determines the colour an appointment is given on the calendar, contents can be text (eg, Eg, |
chart_start_date | A FileMaker date that tells the calendar where to start Eg, |
chart_options_js | Text content with javaScript that applies additional settings to the calendar (optional) Eg, |
Example
xSchedule (
"bb_data_schedules::id" ;
"bb_data_schedules::tstamp_start" ;
"bb_data_schedules::tstamp_end" ;
"bb_data_schedules::description" ;
"bb_data_schedules::sort" ;
"bb_data_schedules::bar_color" ;
GetAsDate ( Min ( bb_data_schedules::tstamp_start ) ) ;
"scheduler.config.readonly = false;"
)
The chart_options_js parameter can be used to apply additional settings to the calendar. In our example above we are setting the chart to be read-only. The full set of chart properties is available here:
https://docs.dhtmlx.com/scheduler/api__refs__scheduler_props.html
You can set multiple properties by separating them with a semicolon. For example:
"scheduler.config.drag_lightbox = false; scheduler.config.full_day = true;"
Relationship
The appointment records included in the calendar will be constrained by the relationship to the table occurrence of your parameter fields. Multi-line keys can be used, but only on the left-hand side of the relationship. In other words, you can use multi-line keys only if they’re on the table that your current context is based on.
Polling
Reactor can poll for any new, deleted or updated records - and those changes will be reflected on the calendar in real-time. To do so, your appointment table must have a a zModID field, with an auto-enter set to the modification timestamp.
Style Customisations
You can customise the CSS of the calendar by using Reactor Core to edit the following CSS document:
You will need to recompile the BlackBox to apply any changes you make.