Scheduler is not getting updated after a state change.

[Gayathri]

Hi,

I need to change the interval of the scheduler using state, I notice that the scheduler is not changing after the state update(State is getting changed)

The twoMonthView state is a boolean value, if its true then schedule must show two months calender. Please help.

 onActionBegin = (args: any) =>  {

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

            let userIconItem = {

                align: 'Right', text: 'Two Month View', cssClass: 'e-schedule-user-icon'

                ,click: this.toggleTwoMonthView.bind(this)

            };

            args.items.push(userIconItem);

        }

    }

    

    toggleTwoMonthView() {

        this.setState({twoMonthView: !this.state.twoMonthView},()=>{

            console.log("yes",this.state.twoMonthView);

        })

     

    }

 <ScheduleComponent 

                    actionBegin={this.onActionBegin}

                    currentView="Month"

                    renderCell={this.renderCell.bind(this)}  editorTemplate={this.editorTemplate.bind(this)} showQuickInfo={false} ref={t => this.scheduleObj = t} allowDragAndDrop={true} id="schedule-container" popupClose={this.popupclose.bind(this)} popupOpen={this.popupopen.bind(this)} height="600px" eventSettings={{

                        dataSource: this.projectdata,

                        fields: {

                            id: 'Id',

                            subject: { name: 'Subject' },

                            startTime: { name: 'StartTime' },

                            endTime: { name: 'EndTime' }

                        }

                    }}>

                        

                        <ViewsDirective>

                <ViewDirective option='Month'

                 interval={this.state.twoMonthView ? 2 : 1}

                  />

              </ViewsDirective>

              <Inject services={[Month]}/>

                    </ScheduleComponent>

[Nevitha Ravi]

Hi Gayathri, 

Greetings from Syncfusion Support. 

We have checked your share code and modified the code as follows to change the interval of scheduler month view. Also, we have prepared a sample with the modified code snippet which can be viewed from the following link. 

https://stackblitz.com/edit/view-interval?file=index.js  

  toggleTwoMonthView() { 

    this.state.twoMonthView = !this.state.twoMonthView; 

    this.scheduleObj.views[this.scheduleObj.viewIndex].interval = this.state 

      .twoMonthView 

      ? 2 

      : 1; 

    this.scheduleObj.refresh(); 

  } 

Please get back to us if you need any further assistance. 

Regards, 

Nevitha 

[Gayathri]

Thanks for you great help. It's working :)

I have another concern. Is there any way to put toggle button instead of the text used in the header as shown in the picture

[Vinitha Devi Murugan]

Hi Gayathri, 

 

Thanks for your update. 

 

We have validated your reported query “Is there any way to put toggle button instead of the text used in the header” at our end. We have achieved your requirement by making use of actionBegin and actionComplete events of our scheduler and same can be available in following sample. 

 

Sample: https://stackblitz.com/edit/switch-view-example?file=index.js  

 

this.weekNumberTemplate = 

      '<div class="text-child" style="font-size: 14px;">Timeline Month View </div></div><div><div class="icon-child" style="text-align: center;padding-left:5px">' + 

      '<button id="view_name"></button></div>'; 

onActionBegin(args) { 

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

      let userIconItem = { 

        align: "right", 

        template: this.weekNumberTemplate, 

        type: "Input" 

      }; 

      args.items.push(userIconItem); 

    } 

  } 

  onActionComplete(args) { 

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

    let dropdowns = scheduleObj.element.querySelector("#view_name"); 

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

      let switchObj = new Switch({ 

        checked: true, 

        change: this.toggleTwoMonthView.bind(this) 

      }); 

      switchObj.appendTo(dropdowns); 

    } 

  } 

 

Kindly try the above sample and get back to us if you need any further assistance. 

 

Regards, 

Vinitha