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

Text on duration bar

Asked by n
4 years ago.

Is it possible to add text to duration bar and how to achieve that?

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

1. You need to increase the height of the duration bar. The height is defined using CSS and you need to override the default style. It's defined using two elements, .scheduler_default_bar and .scheduler_default_bar_inner (this applies to the built-in theme).

<style type="text/css">

/* outer duratin bar div */
#dp .scheduler_default_event_bar {
  height: 15px;
}

/* inner duration bar div */
#dp .scheduler_default_event_bar_inner {
  height: 15px;
}

/* increase the padding on the inner event div */
#dp .scheduler_default_event_inner {
  padding-top: 15px;
}
</style>

The default height is 4px. You can override the built-in theme by using a more specific selector (e.g. using #dp, where "dp" is the placeholder div id).

2. Insert an active area at the top of the event and specify the text using "html" property:

dp.onBeforeEventRender = function(args) {
args.data.areas = [
{left: 0, right: 0, top: 0, height: 15, html: "My text"}
];
};

See also:
https://doc.daypilot.org/scheduler/event-active-areas/

Comment posted by Steve S.
4 years ago.

Thanks for the answer.

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