Custom Header Bar

[Sk Azadur Rahman]

Hi, I have searched but couldn't find a way to implement what I want for navigating weeks in header. Could you please provide me a solution for that. I have attached the image which I want to achieve. 

Thanks :) 

Attachment: Screenshot_20220810_at_3.48.57_PM.png_c4b3be5a.zip

[Ravikumar Venkatesan]

Hi Sk Azadur Rahman,

Greetings from Syncfusion support.

We have validated your query “I want for navigating weeks in header” at our end. You can change the date range of the Schedule week view by changing the selectedDate property of the Schedule as shown in the shared code snippet.

Sample: https://stackblitz.com/edit/ej2-react-schedule-external-navigation-using-buttons?file=index.js

[index.js]

export class LocalData extends SampleBase {

  scheduleObj;

  data = extend([], dataSource.zooEventsData, null, true);

 

  onNavigationClick(args) {

    if (this.scheduleObj) {

      var currentDate = new Date(this.scheduleObj.selectedDate);

      // Choosing the number of days for subtracting or adding to the currently selected date

      var numberOfDays = this.scheduleObj.currentView === 'Week' ? 7 : 1;

      // Calculating the milliseconds based on day count

      var milliSeconds = (numberOfDays * 24 * 60 * 60 * 1000);

      // You can go to the previous or next week date range by changing the selected date

      this.scheduleObj.selectedDate = new Date(currentDate.getTime() + (args.target.id === 'previous-btn' ? -milliSeconds : milliSeconds));

    }

  }

 

  render() {

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

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

        <div className="btn-container">

          <div className="previous-btn-container">

            <button id="previous-btn" onClick={this.onNavigationClick.bind(this)}>Previous</button>

          </div>

          <div className="next-btn-container">

            <button id="next-btn" onClick={this.onNavigationClick.bind(this)}>Next</button>

          </div>

        </div>

        <div className='control-wrapper'>

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

            <ViewsDirective>

              <ViewDirective option='Day' />

              <ViewDirective option='Week' />

            </ViewsDirective>

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

          </ScheduleComponent>

        </div>

      </div>

    </div>);

  }

}

Kindly try the shared solution and let us know if you need any further assistance on this.

Regards,

Ravikumar Venkatesan

If this post is helpful, kindly consider accepting it as the solution so that other members can locate it more quickly.

[Sk Azadur Rahman]

Hi RaviKumar,

Thank you for quick response and for providing a solution. Actually it's my fault that I couldn't express my problem in a proper way. Let me try to explain what I want to achieve.

In header bar, there is a date picker dropdown. I don't want that dropdown. Instead, I want to show only the date range text for Week view and the date for Day view. If I navigate using the arrows, that date range will update respectively. 

P.S: I had attached a zip file in main thread. You can get the picture of what I want build.

Regards,

Sk. Azadur Rahman

[Ravikumar Venkatesan]

Hi Sk Azadur Rahman,

We have validated your requirement at our end and prepared a custom toolbar with the Schedule and it can be available from the below link.

Sample: https://stackblitz.com/edit/ej2-react-schedule-custom-toolbar-sample?file=index.js

Kindly try the shared sample and let us know if you need any further assistance.

Regards,

Ravikumar Venkatesan

If this post is helpful, kindly consider accepting it as the solution so that other members can locate it more quickly

[Sk Azadur Rahman]

Hey Ravikumar,

Thanks for your quick response. I appreciate your effort.

Regards,
Sk. Azadur Rahman 

[Ravikumar Venkatesan]

Hi Sk Azadur Rahman,

Thanks for the update.

Kindly try the shared solution and let us know if you need any further assistance on this.

Regards,

Ravikumar Venkatesan