Schedular Customization in react

Question

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

Ravikumar Venkatesan · Accepted Answer

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 · Answer

i'm sure i'll find what i need! Thanks a lot Ravikumar, and merry Christmas! Gaia

Vengatesh Maniraj · Answer

Hi Gaia, 

Thanks for the update. 

Please get back to us if you need any further assistance. 

Belated Christmas wishes!! 

Regards, 
Vengatesh.