How to show a day indicator in timeline year view?

Event calendars & schedulers
1

I am trying to replicate the “current time indicator” but in timeline year mode, so instead of showing the current time, it shows the current day.

I am already highlighting the current day in the “day header” but this is not sufficient, my client is requesting a red line to be drawn across the day vertically (see mock-up below).

image

Is there a way I can programmatically solve this? I tried tapping in to the “renderSlot” function but it did not work.

Ideally, I want to override the rendering of the cells and apply a border if the cell’s date == today’s date.

2

I found this thread (Schedule Calendar in Timeline) which allows me to color the background for the current date:

image

Is there anyway I can control the width, so that it appears like a thin line?
I manually edited the 5th row CSS on the element to show what I desire

3

Hello @Aron_Rohden :wave:

That’s right, you can use the colors option for that, and as it’s mentioned on the other thread that you found, you can control the thickness of the line with the start and end parameters of that option.

4

Hi @Zsombor,

The time in the start and end parameters does not seem to be respected for timeline year/day view.

For example:

      {
        start: "2024-10-18T00:00",
        end: "2024-10-18T12:00",
        background: "#ef4444",
      },

This is 12 hours, so you would expect the line to be half the day? But it is still the full day:
image

View config:

view={{
  timeline: {
    type: "year",
    size: 1,
    resolutionHorizontal: "day",
    eventList: true,
  },
}}
5

Update:

I removed eventList: true from the config and now it works:
image

@Zsombor please could explain what eventList does exactly?

1 Like
6

Glad to hear you figured it out :wink:

If the eventList prop is true, that transforms the layout into a summary view. The events are listed in the appropriate cell one after the other.