Devextreme-reactive: How can I make the dates in the WeekView clickable and change appointments color

[whyjay17]

• [ ] I have searched this repository's issues and believe that this is not a duplicate.

I'm using ...

• [ ] React Grid
• [ ] React Chart
• [x] React Scheduler

Description

• In the WeeklyView of the React-Scheduler, I am trying to make each date on the top of the calendar (cells that have Day and Date) clickable. For a very simple example, I want to console.log 17 if the date that the cell has is Wed 17. It is difficult because this is a wrapper and it's hard to access to each element contained in the wrapper. Any help?

My render() looks like below and I don't see where I can do this (accessing each cell)

        return (
            <div>
                <h2 style={{ marginBottom: '1.25em', marginTop: '1.25em', textAlign: 'center' }}>Your Schedule</h2>
                <MuiThemeProvider theme={theme}>
                    <Paper>
                        <Scheduler data={data}>
                            <ViewState currentDate={currentDate} />
                            <EditingState onCommitChanges={this.commitChanges} />
                            <WeekView startDayHour={9} endDayHour={19} />
                            <Appointments />
                            <AppointmentTooltip
                                showOpenButton
                                showDeleteButton
                            />
                            <AppointmentForm />
                        </Scheduler>
                    </Paper>
                </MuiThemeProvider>
            </div>
        );

Environment

• devextreme-reactive: xxx
• react: xxx
• browser: xxx
• bootstrap: none
• react-bootstrap: none
• material-ui: none

[MaximKudriavtsev]

Hi @whyjay17,

The DevExtreme React Scheduler is not a wrapper. This is a pure react component, and you can have access to each UI element. Our Fundamentals guide describes what default visual templates exist and how to override them.

In your case, you should override the DayScaleCell template of the WeekView plugin and pass the onClick property into it. See the following example.

[whyjay17]

@MaximKudriavtsev Thank you so much! This is what I wanted exactly. Using the same idea, would it also be possible to make a specific appointment have a different color?

[MaximKudriavtsev]

@whyjay17

All our UI plugins have a few default templates that you can customize. Please see the list of default templates in the plugin's API reference page.

The following demo demonstrates how to change an appointment appearance. You can also see it in this demo.

[whyjay17]

Thanks again, @MaximKudriavtsev.
I was aware that it is possible to change the color of all appointments. In my app, I am trying to add an appointment that has a different color from others. I was thinking to assign a class for this appointment to have a different color, but I wasn't sure how to assign class only to the specific appointment.

I really appreciate your help!

[MaximKudriavtsev]

@whyjay17

You should use appointment metadata to recognize what class is needed in your custom template. See the following demo.

[whyjay17]

@MaximKudriavtsev Thanks again, sir! I am trying to add a new appointment by adding a new object to the schedule state that I have in my component. Whenever it gets added, it re-renders the calendar component. However, I am not sure how I am supposed to set a different className just for that component that got added to the state.

[MaximKudriavtsev]

@whyjay17

Update of a component's state causes re-rendering it, it's expected behavior. You can specify initial data with a specific field, which value may affect adding a specific className in the Appointment component, as I did in the example above.

[AngelineLim]

Hey there @MaximKudriavtsev, I was playing around with the library and am having some issues customising the dates on the top of the calendar.

• Is it possible to remove the dates? (e.g. Having the WeekView to only show Sunday-Saturday)
• How can I go about updating the CellData in DayScale?

[MaximKudriavtsev]

Hi @AngelineLim,

I am afraid your requirements are unclear. Please describe the problem in greater detail and use images or examples to illustrate what behavior you want to achieve. I kindly ask you to create a separate ticket not to mix different issues within one thread.

[whyjay17]

@MaximKudriavtsev This fixed my issue! Thank you so much!

[lock[bot]]

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.