Scheduling
The resource scheduler puts rooms, people and equipment down the side and time across — by day, week or month — or lists the bookings as an agenda, which a phone gets on its own. Drag over free time to book it, drag a booking to move it or to give it to someone else, and drag its ends to change its length; everything works from the keyboard too, with undo.
It checks as it goes: a resource can hold more than one booking where that is right, and a booking over
its capacity, in time it is unavailable or outside its working hours is outlined — or refused. Each
resource keeps its own working hours and holidays in its own time zone, bookings repeat
by the same rules a calendar program uses, and the whole schedule goes to and from .ics.
A week of bookings
Two rooms, two people and a van. Drag over free time on a row to book it, drag a booking along its row or onto another, and double-click one to edit it. The supplier call clashes with the review in the board room; the lab holds three bookings at once and is closed for a deep clean on Wednesday. Find a time looks for the first hour three of them are free together.
The page keeps the bookings. Every change arrives first as a cancelable
bmxSchedulerEventChange carrying the whole list as it would be and the clashes it would make;
cancel it and nothing changes. Otherwise bmxSchedulerChange follows with the list to save.
Get the code
<script src="/assets/bmx-components.min.js"></script>
<bmx-scheduler id="sch-week" label="Office bookings" view="week" work-week day-start="07:00" day-end="20:00" hour-width="11" style="--bmx-scheduler-height: 30rem"></bmx-scheduler>
<script>
const scheduler = document.getElementById('sch-week');
scheduler.events = [ /* your events */ ];
scheduler.resources = [ /* your resources */ ];
</script>
One team, three time zones
A support team in London, Bengaluru and New York, each with their own working day. Shaded time is outside a person's hours. Show the week as any of them sees it: the bookings stay put in time and the working days move. Then find the first hour all three are at work.
Get the code
<script src="/assets/bmx-components.min.js"></script>
<bmx-scheduler id="sch-zones" label="Support team" view="week" work-week hour-width="6" time-zone="Europe/London" style="--bmx-scheduler-height: 17rem"></bmx-scheduler>
<script>
const scheduler = document.getElementById('sch-zones');
scheduler.events = [ /* your events */ ];
scheduler.resources = [ /* your resources */ ];
</script>
Clashes: allow, warn or refuse
The same three rooms with each rule. Drag the workshop onto the board room's meeting, or past six in the evening, and see what each rule does. With refuse, the booking springs back and the reason is announced.
Get the code
<script src="/assets/bmx-components.min.js"></script>
<bmx-scheduler id="sch-rules" label="Rooms" view="day" conflicts="warn" style="--bmx-scheduler-height: 14rem"></bmx-scheduler>
<script>
const scheduler = document.getElementById('sch-rules');
scheduler.events = [ /* your events */ ];
scheduler.resources = [ /* your resources */ ];
</script>
Repeating bookings and .ics files
A month of a clinic's rota. Bookings repeat by iCalendar rules — every weekday, the first Monday, the last Friday of the month — and editing one asks whether it is for that day, it and the following ones, or the whole series. Save as .ics and open the file in Outlook, Google Calendar or Apple Calendar; Open an .ics file reads one back.
Get the code
<script src="/assets/bmx-components.min.js"></script>
<bmx-scheduler id="sch-month" label="Clinic rota" view="month" style="--bmx-scheduler-height: 16rem"></bmx-scheduler>
<script>
const scheduler = document.getElementById('sch-month');
scheduler.events = [ /* your events */ ];
scheduler.resources = [ /* your resources */ ];
</script>
Three hundred resources
A fleet of three hundred vans in thirty depots, with six thousand bookings this week. Only the rows and hours in view are drawn, so it scrolls as smoothly as five; groups fold away, and each depot shows how busy it is.
Get the code
<script src="/assets/bmx-components.min.js"></script>
<bmx-scheduler id="sch-large" label="Fleet" view="week" work-week day-start="07:00" day-end="19:00" hour-width="12" show-utilisation style="--bmx-scheduler-height: 26rem"></bmx-scheduler>
<script>
const scheduler = document.getElementById('sch-large');
scheduler.events = [ /* your events */ ];
scheduler.resources = [ /* your resources */ ];
</script>