Redesigned Scheduler UI

Example Schedule Creation Flow

Step 1: Create a new Schedule

A separate schedules list is not only a better known structure within the Icinga Web 2 context, but helps navigating and organising schedules. A preview of the final schedule should be included to get a rough idea, what the schedule looks like. To add a new schedule list use the button "New Schedule".

Frame 2

Step 2: Add a rotation

Starting with the schedule view featuring an empty state note. From there, the user can start adding Rotations by clicking the "Add rotation" button.

Frame 3

Step 3: Configure rotation for office hours

There are 3 different modes of rotations (See below for details). Creating the office hour rotation leverages the Partial day rotation mode. The Modal features a list of rotation members. The order of the members defines their rotation order and can be edited in context of the rotation. Members can be contacts and contact groups. Click "Add rotation" to save and add the rotation to the schedule. The Modal should probably feature a preview of the configured rotation (not in mockup for now)

Frame 4

Step 4: Update the schedule view

Adding a rotation updates the schedule preview. It displays the configure rotation as a row in the timeline. There's also a summary row on the bottom, that shows the result of the "stacked" rotations.

Frame 5

Step 5: Add another partial day rotation for the out of office hours.

It's the same as before. The preview should visualise the free timeslots.

Frame 8

Step 6: Display a second rotation row

Rotation rows can be reordered. The end result would not allow for any overlaps, lower rows win over higher ones. The "zoom factor" of the timeline can be altered from more detail to a larger timespan on the one hand. On the other hand there's also a calendar view that displays the final result in a calendar view (not in mockup).

Frame 9