Cape Scheduler
Overview
📆 Cape Scheduler
Cape scheduler is the most powerful resource scheduler available on Mendix platform.
Resource scheduling involves the identification and allocation of the necessary resources to accomplish a particular task within a specified timeframe. This process enables you to assign tasks based on the skills and availability of team members, thereby preventing either underutilization or overutilization of resources.
Demo Application
https://capescheduler-sandbox.mxapps.io/index.html?profile=Responsive
Features 🚀
- Customizable event layout.
- Adjustable time resolution & grouping. Show schedule in minutes, hours, daily
- Time header can be in row or in column.
- Capable of showing working hours and holidays.
- 2nd level Resource grouping.
- Add your own context menu, outside and inside event!
- Optional capabilities to Drag & Drop, & resize to adjust time.
- Row & Column freezing
- Easy to use CSS class to completely change the widget look and feel.
Using the Cape Scheduler
The basic concept
- ResourceGroup Header row
- Resource Header row
- Date column
- Time / TimeGroup column
- Event
- Event Title
- Event Content
- Resize handle Start
- Resize handle End
- Hover text
- Holiday / freeday
Used open source Libraries
- Jose (MIT) https://github.com/panva/jose/blob/main/LICENSE.md
- date-fns (MIT) https://github.com/date-fns/date-fns/blob/main/LICENSE.md
- lodash (MIT) https://github.com/lodash/lodash/blob/main/LICENSE
- memoze-one (MIT) https://github.com/alexreardon/memoize-one/blob/master/LICENSE
- nanoid (MIT) https://github.com/ai/nanoid/blob/main/LICENSE
- rbush (MIT) https://github.com/mourner/rbush/blob/master/LICENSE
- use-effect-reducer (MIT) https://github.com/davidkpiano/useEffectReducer/blob/master/LICENSE
- foxglove/avl (MIT) https://github.com/foxglove/avl/blob/main/LICENSE
Documentation
Using the Cape Scheduler
The basic concept
- ResourceGroup Header row
- Resource Header row
- Date column
- Time / TimeGroup column
- Event
- Event Title
- Event Content
- Resize handle
Start
- Resize handle
End
- Hover text
- Holiday / freeday
The first step
- Download the
Cape Scheduler
module from Mendix store. The module contain the essential mendix side block to use the widget. Important: The module does not contain the widget! - Ask Cape Groep servicepoint@capegroep.nl for access to the widget.
The module structure
When you downloaded the module, you will be presented with the following structure in your Marketplace modules
. The most important part is inside the USE_ME folder. You can copy the DateChanger
folder, Initialize_Scheduler
and Scheduler_Snippet
to your own module.
DateChanger
folder is neccessary to customize if you want custom timeframe.- Adjusting
Initialize_Scheduler
might be required for advance features. Scheduler_Snippet
contain the basic structure to use the widget.
The Domain Model
You can either create generalization of the model, use as-is or copy the model into another module.
The benefit of using Generalization or copy the model is separation of concern. furthemore you can can customize the domain model with custom attributes. You will not have to worry when it's time to update the module.
In this example (and on the provided Scheduler_Snippet
) we will use the module as is.
The most important part of the domain model is
- ResourceGroup (Not required if you disable Resource group function)
Name
*: The name of the resource groupOrder
*: The display order of the resource group. lower number will be displayed more left that higher number.- Resource*
Name
*: The name of the resourceOrder
*: The display order of the resource. lower number will be displayed more left that higher number.- Event*
From
*: The start time a resource will be used by the event.To
*: The end time a resource will be used by the eventTitle
*: The name of the event.Content
*: Additional information related to the event.CSSClass
*: Dynamically inject CSSClass to the scheduler.HoverText
*: What to shown when user- Holiday*
Date
*: When the holiday occurredDescription
*: The name of the holiday. Will be shown as hover text
You will need to create microflows to fill in the entities described. Resource is Mandatory and cannot be empty.
Using the snippet
You can customize the look of the widget by modifying the snippet
- The root of the snppet must be the scheduler entity
- The widget control use the DateChange entity
- You can add / remove control as you like.
- Is the main CapeScheduler Widget.
- Customise the content of the scheduler by adding / removing additional widget.
- When you click a content, by default the widget will show event detail. You can remove this if necessary.
Example pages using the snippet
- Use the
Initialize_Scheduler
nanoflow to create the scheduler object - Pass the
Scheduler
object into the snippet
Advance usages
Add recurrent non working days
With this feature, you can mark certain day as non working days.
- Open The Non Working days tab in the widget configuration
2. Click new 3. Add the day name and the day description. The description will be shown as hover text.
Add custom context menu
- Open the Action configuration
- Click new
If you want the context menu available when the user right click the event, choose event. If you want the context menu available when the user click outside the event, choose empty row. if you want the menu always shown, choose both. You can put arbitrary value in event key. However, it must be unique. We suggest to put the following format [ACTIONNAME]_CONTEXTMENU
. Display value is what will be displayed under the context menu.
- The onEvent microflow will be triggered when you click the context menu. You need to implement the
[ACTIONNAME]_CONTEXTMENU
handler there.
- Route to the action
[ACTIONNAME]_CONTEXTMENU
will be in EventType- Your custom event handler.
Modify Date / Time format
If you like to customize the date/time format, got to the Time Configuration tab and change the date format. If you need to change it dynamically, you can add Date / time format as new properties in scheduler object. use the following documentation to view available format https://date-fns.org/v2.16.1/docs/format
Modify working hours
The default is 9 to 5. If you need different working hours you can change it in the time configuration page of the widget.
Show resource group
You can enable or disable second level resource by going to the resourcegroup tab. Important! If you enable resource group, all of your resource must be a member of a group. Resource group cannot be empty.
Modify Dimensions
You can change the row & column dimensions by going to the dimensions tab. Be aware that some configuration only works when in TIME_IN_ROW
mode or in TIME_IN_COLUMN
mode.
Custom SCSS
This widget is also an UI resources module. you can add custom sccs to change the widget look and feel
The most important part is the color.scss
. You can add custom color for event there. Furthermore if you need to change the look and feel of the entire widget, you can modify scheduler.scss
. Basic coloring options is available as SCSS variables there.