RecurrenceEditorComponent - Style Change

[Sinchan NIkam]

Dear  Team,

We have a tried to apply e-outline cssClass to RecurrenceEditorComponent.

However, it doesn't applies any of the individual component.

And also, we tried the below code to do the same.

document.getElementById("RecurrenceEditor").querySelectorAll(".e-input-group").forEach(element => {

                if (!element.classList.contains('e-outline')) {                    

                    element.classList.add('e-outline')

                }

            })

We need following items need to be change in RecurrenceEditorComponent.

     a) Remove the Never end option.

     b) Change the date format to dd-MMM-yyyy.

Could you please help on this.

Regards,

Sinchan

 

[Vinitha Devi Murugan]

Hi Sinchan, 

 

Syncfusion Greetings. 

 

We achieved your requirement by making use of rendereComplete event of recurrence editor and same can be available in below link 

 

https://stackblitz.com/edit/react-dbdp3w?file=index.js 

 

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

 

Regards, 

M.Vinitha devi 

[Sinchan NIkam]

Dear Vinitha,

Thanks for the update.

However, this doesn't solve my purpose.

As I have placed the RecurrenceEditorComponent inside a dialog component, which will update the entire dialog children component class.

And I tried the below code and it working as expected.

Here, this.recObject refer to RecurrenceEditorComponent.

refresh = () => {

        try {

            if (this.recObject.endType.listData.length === 3) {

                this.recObject.endType.liCollections[0].style.display = "none"

                this.recObject.untilDateObj.format = "dd-MMM-yyyy"

                // this.recObject.untilDateObj.showClearButton=false

                this.recObject.untilDateObj.allowEdit = false

                this.refreshElement(this.recObject.element.children[0])

            }

        } catch (error) {

            alert(error)

        }

    }

    refreshElement(element) {

        if (typeof element.children !== 'undefined') {

            for (let i = 0; i <= element.children.length - 1; i++) {

                if (!element.children[i].classList.contains('e-outline') && element.children[i].classList.contains('e-input-group')) {

                    element.children[i].classList.add('e-outline')

                }

                if (element.children[i].classList.contains('e-date-icon'))

                    element.children[i].style.marginTop = "20px"

                if (element.children[i].classList.contains('e-repeat-content'))

                    element.children[i].style.marginBottom = "20px"

                this.refreshElement(element.children[i])

            }

        }

    }

Thanks.

Regards,

Sinchan

[Vinitha Devi Murugan]

Hi Sinchan, 

 

We are happy that your issue has resolved at your end. 

 

Please keep in touch with us for further assistance. 

  

Regards, 

M.Vinitha devi