Как я могу поймать событие однократного и двойного щелчка компонента планировщика Dev express?

Question

Мне нужна помощь. Я использую Dev express Версия компонента планировщика: @ devexpress / dx-реагировать-планировщик: "^ 2.4.0"

На скриншоте, которым я делюсь; - Как я могу отследить события кликов в области, обозначенной '1', или в других панелях дат при щелчке одним или двумя щелчками мыши?

• Когда щелкают по одному из встреч, как создать модал, который отображается в поле, обозначенном как «2».

• Как я могу установить отображаемые встречи до 5 в области, обозначенной «3». Если в это время есть более 5 встреч, как я могу разместить кнопку «Просмотреть больше»?

Я делюсь исходным кодом и изображением, которое я указал. Большое вам спасибо.

import * as React from 'react';
import Paper from '@material-ui/core/Paper';
import { ViewState, EditingState } from '@devexpress/dx-react-scheduler';
import {
    Scheduler,
    Resources,
    MonthView,
    Appointments,
    AppointmentTooltip,
    AppointmentForm,
    EditRecurrenceMenu,
    DragDropProvider,
    Toolbar,
    DateNavigator,
    TodayButton,
    ViewSwitcher,
} from '@devexpress/dx-react-scheduler-material-ui';
import { appointments, resourcesData } from './data';

export default class SchedulerCalendar extends React.PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            data: 
                [
                    {
                        id: 1,
                        title: 'Google AdWords Strategy',
                        roomId: 1,
                        startDate: new Date(2020, 1, 5, 9, 0),
                        endDate: new Date(2020, 1, 5, 10, 30)
                    }, {
                        id: 2,
                        title: 'New Brochures',
                        roomId: 5,
                        startDate: new Date(2020, 1, 5, 11, 30),
                        endDate: new Date(2020, 1, 5, 14, 15)
                    }, {
                        id: 3,
                        title: 'Brochure Design Review',
                        roomId: 5,
                        startDate: new Date(2020, 1, 5, 13, 15),
                        endDate: new Date(2020, 1, 5, 16, 15)
                    }, {
                        id: 4,
                        title: 'Website Re-Design Plan',
                        roomId: 5,
                        startDate: new Date(2020, 1, 5, 16, 45),
                        endDate: new Date(2020, 1, 5, 11, 15)
                    }
            ],
            resources: [
                {
                    fieldName: 'roomId',
                    title: 'Room',
                    instances: [
                        {
                            text: 'Room 401',
                            id: 1,
                            color: 'red'
                        }, {
                            text: 'Room 402',
                            id: 2,
                            color: 'blue'
                        }, {
                            text: 'Room 403',
                            id: 3,
                            color: 'pink'
                        }, {
                            text: 'Room 407',
                            id: 4,
                            color: 'green'
                        }, {
                            text: 'Room 409',
                            id: 5,
                            color: 'grey'
                        }
                    ],
                }
            ],
        };

        this.commitChanges = this.commitChanges.bind(this);
    }

    commitChanges({ added, changed, deleted }) {
        this.setState((state) => {
            let { data } = state;
            if (added) {
                const startingAddedId = data.length > 0 ? data[data.length - 1].id + 1 : 0;
                data = [...data, { id: startingAddedId, ...added }];
            }
            if (changed) {
                data = data.map(appointment => (
                    changed[appointment.id] ? { ...appointment, ...changed[appointment.id] } : appointment));
            }
            if (deleted !== undefined) {
                data = data.filter(appointment => appointment.id !== deleted);
            }
            return { data };
        });


        console.dir("added")
        console.dir(added)
        console.dir(changed)
        console.dir(deleted)
    }
    degisen = () => {
        console.dir("değişen  a")
    }

    silinen = () => {
        console.dir("silinen  a")
    }

    render() {
        const { data, resources } = this.state;
        const views = [{
            type: 'month',
            name: 'Auto Mode',
            maxAppointmentsPerCell: 'auto'
        }, {
            type: 'month',
            name: 'Unlimited Mode',
            maxAppointmentsPerCell: 'unlimited'
        }, {
            type: 'month',
            name: 'Numeric Mode',
            maxAppointmentsPerCell: 1
        }];
        return (
            <Paper>
                <Scheduler
                    data={data}  
                >
                    <ViewState
                        defaultCurrentDate="2020-02-12"
                    />
                    <EditingState
                        onCommitChanges={this.commitChanges}
                    />
                    <EditRecurrenceMenu />

                    {/* görüntüleme tipi */}
                    <MonthView  DayScaleCell={2}/>

                    {/* Takvimdeki randevular datasını getirir , üstüne tıklandığında bilgi header ve düzenleme modalını açar*/}
                    <Appointments

                    />
                    <AppointmentTooltip
                        showCloseButton
                        showOpenButton
                        showDeleteButton
                        onOpenButtonClick={this.degisen}
                        onDeleteButtonClick={this.silinen}
                    />
                    <AppointmentForm />

                    {/* datalar Rengini Belirliyoruz*/}
                    <Resources
                        data={resources}
                        mainResourceName="roomId"
                    />


                    <DragDropProvider />


                    {/* üst header ve butonlar */}
                    <Toolbar />
                    <DateNavigator />
                    <TodayButton />

                    {/* aylık, yıllık değişimi belirleyen kısım */}
                    <ViewSwitcher
                    Switcher />
                </Scheduler>
            </Paper>
        );
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>