How to disable the date navigation keys and date selection calendar appearing at the top left in the header

[Ravi]

 

I am using Syncfusion Schedule component. I need to diable the date navigation keys and date selection calendar appearing at the top left in the header. How can I do it ?

[Ashokkumar Karuppasamy]

Hi Ravi,

You can fulfill your schedule requirements by utilizing the actionBegin event. Through this event, you can either remove any schedule toolbar items that are not needed. Additionally, overwrite the style of schedule toolbar items to set them as display: none, meeting your requirements. The attached sample below demonstrates the solution. Please give it a try and let us know if you need any further assistance.

Sample: https://stackblitz.com/edit/schedule-toolbar-remove-euslqc?file=index.js,index.css

[index.js]

    const onActionBegin = (args) => {

      if (args.requestType === 'toolbarItemRendering') {

          args.items = args.items.slice(3);

      }

    };

    return (<div className='schedule-control-section'>

      <div className='col-lg-9 control-section'>

        <div className='control-wrapper'>

          <ScheduleComponent width='100%' height='650px' ref={scheduleObj} selectedDate={new Date(2021, 1, 15)} actionBegin={onActionBegin} eventSettings={{ dataSource: data }}>

            <ViewsDirective>

              <ViewDirective option='Day'/>

              <ViewDirective option='Week'/>

              <ViewDirective option='WorkWeek'/>

              <ViewDirective option='Month'/>

            </ViewsDirective>

            <Inject services={[Day, Week, WorkWeek, Month, Resize, DragAndDrop]}/>

          </ScheduleComponent>

 

(OR)

[index.css]

.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-left {

  display: none !important;

}

 

Regards,
Ashok

[Ravi]

Thanks Ashok...Will try it and reach out if I need any further help.

[Satheesh Kumar Balasubramanian]

You're welcome! Don't hesitate to reach out if you have any more questions or need further assistance.