search envelope-o feed check
Home Unanswered Active Tags New Question
user comment-o

Scheduler - How to position event's areas to lower right corner

Asked by Anonymous
2 years ago.
With the following code I'm positioning an active area (triangle) on the upper right corner of a day (see attached picture)
 areas: [
          {
            visibility: "Visible",
            top: 0,
            right: 0,
            style: "width: 0;height: 0;border-style: solid;border-width: 0 6px 6px 0;border-color: transparent #006600 transparent transparent;"
          }
        ],

How can I use a similiar code to place the active area to the lower right corner?

Answer posted by Dan Letecky [DayPilot]
2 years ago.

You can do it like this:

{
  visibility: "Visible",
  bottom: 0,
  right: 0,
  width: 0,
  height: 0,
  style: "border-bottom: 6px solid #006600; border-left: 6px solid transparent;"
}
Comment posted by Anonymous
2 years ago.

Thank you. I tried it. However, the area is positioned at the right upper corner instead of the right lower corner. See please the image here: https://ibb.co/hLNfvLJ

Comment posted by Dan Letecky [DayPilot]
2 years ago.

Please make sure that you use "bottom: 0" and there is in no "top: 0". These properties translate to the corresponding CSS styles directly and there no other magic involved.

If it still doesn't work, I recommend checking the element using browser developer tools to see what styles are applied and why the location is not as expected.

Comment posted by Anonymous
2 years ago.

I'm using the exact same code you proposed. I see the corresponding CSS styles, that get translated from the active area configuration.

<div class="scheduler_default_event scheduler_default_event_line0" unselectable="on" aria-label="" tabindex="-1"
    style="position: absolute; left: 374px; top: 108px; width: 30px; height: 6px; white-space: nowrap; overflow: hidden; cursor: pointer;">
    <div unselectable="on" class="scheduler_default_event_inner"
        style="background: transparent; border-color: transparent;"></div>
    <div unselectable="on"
        style="border-bottom: 6px solid rgb(0, 102, 0); border-left: 6px solid transparent; position: absolute; width: 0px; height: 0px; right: 0px; bottom: 0px;">
    </div>
</div>

I just want to make sure, you understand my issue. In my case I could have many events in the same day, where the event with the active area (triangle) should be always at the bottom. I would use the line property of the event, however the number of the events per day is variable.

Is there a way to tell the scheduler to place a certain type of events at the bottommost row? I couldn't find something similiar under this link: https://code.daypilot.org/91222/javascript-scheduler-event-placement-strategies

Comment posted by Dan Letecky [DayPilot]
2 years ago.

At the moment, there is no way to force to display an event in the last line.

However, you might want to add a special row for these events, perhaps using the "split resources" feature (https://doc.daypilot.org/scheduler/split-resources/).

This question is more than 1 months old and has been closed. Please create a new question if you have anything to add.