Scheduler – hide grey panel at top of component

[davout]

Is their a way to hide the grey panel at the top of the scheduler that holds the view, today and date controls?

[yavordashew]

Hi davout,
The functionality you want to have can be achieved via CSS.
A quick code snippet which ‘hides’ the header of the Scheduler:

.smart-scheduler-header{
    visibility: hidden;
}

Just in case you can take a look at the headerTemplate property which overrides the default one.
Demo using this property: https://www.htmlelements.com/demos/scheduler/travel-schedule/index.htm
And a quick code snippet hiding the header using headerTemplate property:

window.Smart('#scheduler', class {
    get properties() {
        return {
            //Properties
            view: 'day',
            dataSource: data,
            hourStart: 9,
            hourEnd: 18,
            firstDayOfWeek: 1,
            headerTemplate: (header) => {
                header.style.visibility = "hidden";
            },
        };
    }
});

Let me know if that works for you!
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[Author]

Posts