Customize Scheduler - Can we get custome event for calander, today ,week, month click.

[Sudhanshu Jain]

1. We want to Customize the scheduler component. We want to trriger custom function for calander date change , today ,week ,month click. So on click of all , libraray should be working as previous , means view should be as previous and custom function will trriger.

2 . We want to use our own component design for calender, today ,week ,month . We want to  remove the  box which contains calander, today , week , month and will put all the thinks into customize box. So please provide custom event as well as library event which will change the scheduler view based on the click of (calander, today , week , month ).

Please find attached file. One file has current implementation which libraray provided. One contain expected view.

Attachment: Custome_Scheduler_807c09bd.zip

[Hareesh Balasubramanian]

Hi Sudhanshu, 

Greetings from Syncfusion Support…! 

We have validated your shared both queries and also your shared image at our end. We have prepared a sample using actionBegin and actionComplete event and the sample can be viewed from the following link. 

Sample: https://stackblitz.com/edit/react-eb2oys-vqhwsi?file=index.js 

Code snippet: 

  onActionBegin(args) { 

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

      let item1 = args.items[1]; 

      let item2 = args.items[2]; 

      args.items[1] = item2; 

      args.items[2] = item1; 

      let userIconItem = { template: '<input type="text" tabindex="1" id="dropdown" />', type: 'Input' } 

      args.items.push(userIconItem); 

      let element = { template: '<Div tabindex="1" id="btn" />' } 

      args.items.push(element); 

    } 

  } 

  onActionComplete(args) { 

    let btn = this.scheduleObj.element.querySelector('#btn'); 

    let dropdowns = this.scheduleObj.element.querySelector('#dropdown'); 

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

      let btnEle = new Button(); 

      btnEle.appendTo(btn); 

      btnEle.content = "Today"; 

      btnEle.element.onclick = function (args) { 

        let schObj = document.querySelector(".e-schedule").ej2_instances[0]; 

        schObj.selectedDate = new Date(); 

      } 

      let dropdown = new DropDownList({ 

        popupHeight: '200px', 

        value: 'Week', 

        change: function (event) { 

          var view = document.querySelector(".e-schedule").ej2_instances[0]; 

          view.currentView = event.value; 

        }, 

        fields: { text: 'text', value: 'value' }, 

        dataSource: [ 

          { text: 'Day', value: 'Day' }, 

          { text: 'Week', value: 'Week' }, 

          { text: 'WorkWeek', value: 'WorkWeek' }, 

          { text: 'Month', value: 'Month' } 

        ] 

      }); 

      dropdown.appendTo(dropdowns); 

    } 

  } 

CSS property: 

.e-toolbar-right { 

  display: none !important; 

} 

Kindly try the above sample and revert us if you have any further assistance. 

Regards, 

Hareesh