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

Create custom column with DayPilot scheduler in angular 12

Asked by Sanjana Sharma
1 year ago.

Hi team,

I want to add some custom expandable and collapsible column in DayPilot scheduler.
Highlighted in attachment.
Can you please provide the correct approach for that ?

Answer posted by Dan Letecky [DayPilot]
1 year ago.

Please take a look at the following tutorial:

It uses a context menu to show/hide individual row header columns in the Scheduler component. You can use the same approach to show/hide a custom set of columns using an icon.

Comment posted by Sanjana Sharma
1 year ago.

Thanks for the quick response Dan,

But I want to know that does DayPilot provide some feature to expand and collapse the rowHeaderColumn by clicking on some button as highlighted in the attachment.

Comment posted by Dan Letecky [DayPilot]
1 year ago.

There is a built-in button that can hide all row header columns:

If you want to hide selected columns only, you can do it by changing the "hidden" property of the desired rowHeaderColumns[] items.

You can add a button/icon to the upper-left corner by defining an active area using onBeforeCornerRender.


onBeforeCornerRender: args => {
    args.areas = [
            right: 3,
            top: 3,
            height: 20,
            width: 20,
            symbol: "../icons/daypilot.svg#minichevron-left-2",
            onClick: args => {
                this.config.rowHeaderColumns[0].hidden = !this.config.rowHeaderColumns[0].hidden;

See also:

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