Hello,
We are currently in the process of building a clinician scheduling/management system. As we have multiple clinics, we need to be able to display the clinic that a clinician is allocated at alongside their current bookings or meetings. This is what we have in the mockups:
With Bryntum Scheduler we are able to use ResourceTimeRanges and some custom css to display the allocation bar on the side. This second layer cannot be interacted with and allows the allocation to not impact other events on the scheduler. Mats has informed us that ResourceTimeRanges aren't currently supported in Calendar, however it is on the roadmap for the future.
We were wondering if there was any advice as to how we'd implement something like our mockup using the Calendar control?
Currently we've used some custom rendering and css to achieve the screenshot below.
This is the custom css we are using:
@import "~@bryntum/calendar/calendar.material.css";
$allocationWidth: 30px;
// override bryntum css to remove the shadows in order to match our ui.
.b-dayview-day-container.b-calendar-cell .b-cal-tentative-event.b-cal-in-cluster, .b-dayview-day-container .b-calendar-cell .b-cal-event-wrap.b-cal-in-cluster {
box-shadow: none;
}
.b-dayview-day-container .b-calendar-cell .b-cal-event-body {
background-color: rgba(0,0,0,0);
margin: 0 0 0;
}
.b-weekview .b-cal-event-wrap.b-cal-event-reveal.b-cal-in-cluster {
left: 0 !important;
z-index: 2 !important;
}
// do not display the time inside the calendar event.
.b-event-time {
display: none;
}
.clinician-event {
width: calc(100% - $allocationWidth) !important;
min-width: calc(100% - $allocationWidth) !important;
max-width: calc(100% - $allocationWidth) !important;
left: $allocationWidth !important;
border-radius: 5px;
z-index: 2 !important;
padding-left: 0!important;
}
.clinician-allocation {
min-width: $allocationWidth !important;
max-width: $allocationWidth !important;
width: $allocationWidth !important;
left: 0 !important;
padding-right: 0 !important;
margin-right: 10px;
writing-mode: vertical-lr;
transform: rotate(-180deg);
border-radius: 3px;
text-align: center;
z-index: -1 !important;
}
Regular events get the clinician-event css class applied to them, and allocations get the clinician-allocation class applied to them. The z-index makes the allocation sit in the background and not respond to any user interaction; in a similar way to the ResourceTimeRange.
Because we've overidden so many positioning related properties, the calendar's default stacking behavior is not working anymore, so it is possible for events to overlap and hide other events completely. Ideally we'd like the calendar's stacking to still occur, but in a way that does not move the allocation, and does not allow events to sit on top of the allocation. It'd be great if there was a way to potentially split the day column into two sub-columns, and have the allocation sitting in the one column, and everything else in the other.
We appreciate any suggestions here!!
Thanks