Schedular Customization in react

[Gaia Moscatelli]

Hi, i'm trying to customize this element of the library.

Any suggestion to make it look like this?

Do you know if it's possible to add photos and icons inside the cell? 

i've added some screenshot: this is the design i need to replicate.

thanks in Advance 

Attachment: Forum__c5b86b84.zip

[Ravikumar Venkatesan]

Hi Gaia, 

Greetings from Syncfusion support. 

We have validated your requirement at our end. We can achieve the layout references which you shared with the help of the below properties and templates of the Schedule. 

Demo(Customizing the Schedule header bar): https://ej2.syncfusion.com/react/demos/#/material/schedule/header-bar 

Demo(Adding external header bar to the Schedule): https://ej2.syncfusion.com/react/demos/#/material/schedule/overview 

API(showWeekend used to Show/Hide weekend days): https://ej2.syncfusion.com/react/documentation/api/schedule/#showweekend 

UG(Hiding weekend days): https://ej2.syncfusion.com/react/documentation/schedule/working-days/#hiding-weekend-days 

Demo(Hide weekend): https://ej2.syncfusion.com/react/demos/#/material/schedule/hide-weekend 

API(cellHeadeaderTemplate used for customizing the month view date header): https://ej2.syncfusion.com/react/documentation/api/schedule/#cellheadertemplate 

API(cellTemplate): https://ej2.syncfusion.com/react/documentation/api/schedule/#celltemplate 

UG(Cell customizations): https://ej2.syncfusion.com/react/documentation/schedule/cell-customization/ 

Demo(Cell template): https://ej2.syncfusion.com/react/demos/#/material/schedule/cell-template 

API(event template): https://ej2.syncfusion.com/react/documentation/api/schedule/eventSettingsModel/#template 

UG(Using event template): https://ej2.syncfusion.com/react/documentation/schedule/appointments/#using-template 

Demo(Event template): https://ej2.syncfusion.com/react/demos/#/material/schedule/event-template 

API(timeScale used for customizing the time scale of the Schedule): https://ej2.syncfusion.com/react/documentation/api/schedule/#timescale 

UG(Customizing time-scale): https://ej2.syncfusion.com/react/documentation/schedule/timescale/#timescale-customization 

Demo(Customizing time-scale): https://ej2.syncfusion.com/react/demos/#/material/schedule/time-scale 

UG(Open editor window manually to add/edit the appointments): https://ej2.syncfusion.com/react/documentation/schedule/how-to/open-event-editor-manually/#open-editor-window-manually 

Demo(Overview): https://ej2.syncfusion.com/react/demos/#/material/schedule/overview 

API(editorTemplate): https://ej2.syncfusion.com/react/documentation/api/schedule/#editortemplate 

UG(Customizing event editor using the template): https://ej2.syncfusion.com/react/documentation/schedule/editor-template/#customizing-event-editor-using-template 

Demo(Editor Template): https://ej2.syncfusion.com/react/demos/#/material/schedule/editor-template 

Kindly refer to the above links to achieve your shared layout and get back to us if you need any further assistance. 

Regards, 

Ravikumar Venkatesan 

[Gaia Moscatelli]

i'm sure i'll find what i need! 

Thanks a lot Ravikumar, and merry Christmas! 

Gaia 

[Vengatesh Maniraj]

Hi Gaia, 

Thanks for the update. 

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

Belated Christmas wishes!! 

Regards, 

Vengatesh.