Always display event title, regardless of scroll position

[Aron_Rohden]

Hi,

I am using timeline year view, and events can span long durations (days, months or event years).

I want the event title/text to be visible at all times, not just at the start of the event.

I have managed this so far:

This is using the renderScheduleEvent function, and applying a dynamic background to it based on the CanvasAPI that essentially fills the background then adds text on top which repeats for the width of the event.

      context.fillStyle = plannerEvent.background as string;
      context.fillRect(0, 0, canvas.width, canvas.height);

      // text
      context.fillStyle = plannerEvent.color as string;
      context.font = fontSize + "px -apple-system,Segoe UI,Roboto,sans-serif";
      context.fillText("Event Title", 5, 15);
      backgroundImage = `url(${canvas.toDataURL("image/png")})`;

Then applying the background image to the div:

        <div
          className="mbsc-schedule-event-background mbsc-timeline-event-background mbsc-material"
          style={{
            backgroundImage: backgroundImage,
          }}
        />

However, this approach does not feel optimal, and relies heavily on CSS. Not to mention the text is blurry due to Canvas scaling issues.

Is there another solution?

[kovlex]

Hi @Aron_Rohden

The labels should be sticky by default on scroll, making sure they are always visible, like in the gif below.

[Aron_Rohden]

This is good to know!

There is a problem however, if I override the width of the resources column, it stops the sticky label working.

Working (default)

.mbsc-timeline-resource-col {
  width: 12em;
}

Not working

.mbsc-timeline-resource-col {
  width: 20em;
}

Any solution?

[Aron_Rohden]

Adding this CSS fixes it:

@supports (overflow: clip) {
  .md-resource-header-template.mbsc-ltr .mbsc-schedule-event-inner {
    left: 20em;
  }
  .md-resource-header-template.mbsc-rtl .mbsc-schedule-event-inner {
    right: 20em;
  }
}