TimefoldxBryntum - Employee Shift Scheduling Example

This repository contains an simplified example of how you can implement shift scheduling using Bryntum and Timefold.

Important

This example directly integrates Bryntum with Timefold. While this is ok for demo like this, it comes with serious downsides. Read our integration article to learn more: https://bryntum.com/blog/how-timefold-and-bryntum-work-together-an-overview/

Important

We are still cleaning up this repository, as it was previously part of another project.

How to run

Prerequisites

Note that both Timefold and Bryntum require a license to use. These can be requested from the following locations:

• Bryntum: https://bryntum.com/download/
• Timefold: https://timefold.ai/talk-to-us

Running the frontend

Setup NPM with a Bryntum trial user:

$ npm config set "@bryntum:registry=https://npm.bryntum.com" $ npm login --registry=https://npm.bryntum.com Username: <YOUR_USER> Password: <YOUR_PASS> Email: (this IS public) @timefold.ai

• npm install
• npm run dev

Your frontend should be visible now.

Setting up your Timefold API key

You can make your own tenant by:

• registering on: https://app.timefold.ai/
• activating your Employee Shift Scheduling or Field Service Routing API trial
• getting an API key, enabled for Employee Shift Scheduling or Field Service Routing
  • Click your tenant name
  • Go to tenant settings
  • API keys tab

Adjust the appropriate proxy settings in the vite.config.js file. Variables have been created on the top of the config file.

Loading test data

You can find the "demo" button right next to the "Schedule with AI" button. This opens a popup which allows you to either load the Demo data (from the Timefold Platform) or load up a custom JSON file.

Notes

Known limitations

This template does not showcase all the possible datapoints usable with the Timefold API in the visualization. Notable missing pieces:

• Timefold allows users to limit the applicability of availability by specifying tags. This concept is not included in this UI, which could result in shifts appearing as if they have been scheduled in "unavailable" timespans.
• The following are not visualized: Shift locations and travel, risk factors and pairing.

The other missing element will be available in the "Problems" section.

Next Steps

• Check out the accompanying blog post .
• Learn more about Timefold's Employee Shift Scheduling API.
• Check out Bryntum's Scheduler documentation and examples for more inspiration.