DevExpress / devextreme-reactive

Business React components for Bootstrap and Material-UI
https://devexpress.github.io/devextreme-reactive/
Other
2.08k stars 380 forks source link

Overriding DayScale component to ignore dates #1987

Closed AngelineLim closed 5 years ago

AngelineLim commented 5 years ago

I'm using ...

Description

I would like to use React Scheduler to render a generalised weekly (and potentially monthly) schedule to be customised by the users. For instance, in the week view, I would like to override the DayScale component to only show the days of a week (e.g Sunday to Saturday), hence excluding the dates.

image-desc

However, referring to WeekView Plugin Reference, using the WeekView.DayScaleCellProps is a bit restrictive as passing a null startDate will lead to a string "undefined" being rendered.

How can I do so to achieve my goal? The dates seems to be tied to React Scheduler's day-scale layout at the moment.

Environment

MaximKudriavtsev commented 5 years ago

Hi @AngelineLim,

The DevExtreme Reactive controls give the flexible capability to customize default UI components, see Scheduler's Fundamentals guide. In your case, you should override a DayScaleCell component of the WeekView plugin. You can pass your custom markup into DayScaleCell based on components props, and in this case, components props are DayScaleCellProps. You can see what markup we pass into the DaySclaeCell component by default in this file.

Please see the following example.

AngelineLim commented 5 years ago

Hey @MaximKudriavtsev , that worked perfectly, thank you!

MaximKudriavtsev commented 5 years ago

@AngelineLim, you are welcome!

lock[bot] commented 5 years ago

This thread has been automatically locked since it is closed and there has not been any recent activity. Please open a new issue for related bugs or feature requests.