Open lx-0 opened 1 year ago
Nice idea!
Is this feature planned in the near future? Would really love to see that in the Calendar.
Are there any news on this feature?
We really would like to implement it.
Not yet, we'll discuss if we can accelerate the implementation
Thanks your the update, let us know if there any news.
Another client requested for it here: https://forum.bryntum.com/viewtopic.php?p=149169#p149169
Two new elements will be injected into the .b-cal=event=wrap
. These will be .b-cal-event-buffer.b-cal-preamble
and .b-cal-event-buffer.b-cal-postamble
.
The height
style will be injected as a percentage, based on the proportion of the buffer duration against the event duration. That way the heights needs no maintenance.
They will contain a simple label :
{
children : [{
tag : 'a',
className : 'b-fa b-fa-<the icon type>'
},
'The label text']
}
It needs this SASS:
.b-dayview {
// Create the "T" background images for the preamble and postamble elements
--event-preamble-background: linear-gradient(90deg, transparent, transparent calc(50% - 0.5px), #ccc calc(50% + 1px), transparent calc(50% + 0.5px), transparent 100%), linear-gradient(180deg, #ccc 1px, transparent 1px);
--event-postamble-background: linear-gradient(90deg, transparent, transparent calc(50% - 0.5px), #ccc calc(50% + 1px), transparent calc(50% + 0.5px), transparent 100%), linear-gradient(0deg, #ccc 1px, transparent 1px);
}
.b-cal-event-buffer {
position: absolute;
width: 100%;
display: grid;
place-content: center;
background-size: 0.5em 100%;
background-repeat: no-repeat;
background-position: 50% 0%;
color: #aaa;
i {
margin-inline-end: 0.5em;
}
}
.b-cal-preamble {
bottom: 100%;
background: var(--event-preamble-background);
}
.b-cal-postamble {
top: 100%;
background: var(--event-postamble-background);
}
And .b-cal-event-wrap
should not be overflow : hidden
.
The result is this:
Try it out in the new date-resource-non-consecutive-dates
demo
It would be very nice to see the scheduler pro feature of travel time (preamble/postamble) in the calendar component as well.