Create custom column with DayPilot scheduler in angular 12

Please take a look at the following tutorial:
https://code.daypilot.org/49959/javascript-scheduler-show-hide-columns-using-context-menu

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.

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.

There is a built-in button that can hide all row header columns:
https://doc.daypilot.org/scheduler/row-header-hiding/

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.

Schematically:

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:
https://api.daypilot.org/daypilot-scheduler-onbeforecornerrender/