Add preamble/postamble to calendar events

[lx-0]

It would be very nice to see the scheduler pro feature of travel time (preamble/postamble) in the calendar component as well.

[matsbryntse]

Nice idea!

[lx-0]

Is this feature planned in the near future? Would really love to see that in the Calendar.

[chegix]

Are there any news on this feature?

We really would like to implement it.

[matsbryntse]

Not yet, we'll discuss if we can accelerate the implementation

[chegix]

Thanks your the update, let us know if there any news.

[ghulamghousdev]

Another client requested for it here: https://forum.bryntum.com/viewtopic.php?p=149169#p149169

[ExtAnimal]

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:

[matsbryntse]

Try it out in the new date-resource-non-consecutive-dates demo