React UI Components

Show Demo List

Theme:

Demo
App.htm
App.js

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title id='Description'>
        ReactJS Scheduler. jqxScheduler Context Menu example
    </title>
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdate.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscheduler.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscheduler.api.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcalendar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxtooltip.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxnumberinput.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxradiobutton.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script>
    <script type="text/javascript" src="../jqwidgets/globalization/globalize.js"></script>
    <script type="text/javascript" src="../jqwidgets/globalization/globalize.culture.de-DE.js"></script>
    <script type="text/javascript" src="../scripts/demos.js"></script>
</head>
<body>
    <div class="example-description" style="margin-bottom: 3em">
        ReactJS Scheduler. jqxScheduler Context Menu example
    </div>
    <div id="app"></div>
    <script src="../build/scheduler_contextmenu.bundle.js"></script>
</body>
</html>

import React from 'react';
import ReactDOM from 'react-dom';

import JqxScheduler from '../../../jqwidgets-react/react_jqxscheduler.js';

class App extends React.Component {
    componentDidMount() {
        this.refs.myScheduler.ensureAppointmentVisible('id1');
    }
    render() {
        let appointments = new Array();
        let appointment1 = {
            id: 'id1',
            description: 'George brings projector for presentations.',
            location: '',
            subject: 'Quarterly Project Review Meeting',
            calendar: 'Room 1',
            start: new Date(2016, 10, 23, 9, 0, 0),
            end: new Date(2016, 10, 23, 16, 0, 0)
        }
        let appointment2 = {
            id: 'id2',
            description: '',
            location: '',
            subject: 'IT Group Mtg.',
            calendar: 'Room 2',
            start: new Date(2016, 10, 24, 10, 0, 0),
            end: new Date(2016, 10, 24, 15, 0, 0)
        }
        let appointment3 = {
            id: 'id3',
            description: '',
            location: '',
            subject: 'Course Social Media',
            calendar: 'Room 3',
            start: new Date(2016, 10, 27, 11, 0, 0),
            end: new Date(2016, 10, 27, 13, 0, 0)
        }
        let appointment4 = {
            id: 'id4',
            description: '',
            location: '',
            subject: 'New Projects Planning',
            calendar: 'Room 2',
            start: new Date(2016, 10, 23, 16, 0, 0),
            end: new Date(2016, 10, 23, 18, 0, 0)
        }
        let appointment5 = {
            id: 'id5',
            description: '',
            location: '',
            subject: 'Interview with James',
            calendar: 'Room 1',
            start: new Date(2016, 10, 25, 15, 0, 0),
            end: new Date(2016, 10, 25, 17, 0, 0)
        }
        let appointment6 = {
            id: 'id6',
            description: '',
            location: '',
            subject: 'Interview with Nancy',
            calendar: 'Room 4',
            start: new Date(2016, 10, 26, 14, 0, 0),
            end: new Date(2016, 10, 26, 16, 0, 0)
        }
        appointments.push(appointment1);
        appointments.push(appointment2);
        appointments.push(appointment3);
        appointments.push(appointment4);
        appointments.push(appointment5);
        appointments.push(appointment6);
        // prepare the data
        let source =
            {
                dataType: 'array',
                dataFields: [
                    { name: 'id', type: 'string' },
                    { name: 'description', type: 'string' },
                    { name: 'location', type: 'string' },
                    { name: 'subject', type: 'string' },
                    { name: 'calendar', type: 'string' },
                    { name: 'start', type: 'date' },
                    { name: 'end', type: 'date' }
                ],
                id: 'id',
                localData: appointments
            };
        let adapter = new $.jqx.dataAdapter(source);

        let resources =
            {
                colorScheme: 'scheme02',
                dataField: 'calendar',
                source: new $.jqx.dataAdapter(source)
            };

        let appointmentDataFields =
            {
                from: 'start',
                to: 'end',
                id: 'id',
                description: 'description',
                location: 'place',
                subject: 'subject',
                resourceId: 'calendar'
            };

        let views =
            [
                'dayView',
                'weekView',
                'monthView'
            ];

        /**
        * called when the context menu is created.
        * @param {Object} menu - jqxMenu's jQuery object.
        * @param {Object} settings - Object with the menu's initialization settings.
        */
        let contextMenuCreate = (menu, settings) => {
            let source = settings.source;
            source.push({ id: 'delete', label: 'Delete Appointment' });
            source.push({
                id: 'status', label: 'Set Status', items:
                [
                    { label: 'Free', id: 'free' },
                    { label: 'Out of Office', id: 'outOfOffice' },
                    { label: 'Tentative', id: 'tentative' },
                    { label: 'Busy', id: 'busy' }
                ]
            });
        };

        /**
        * called when the user clicks an item in the Context Menu. Returning true as a result disables the built-in Click handler.
        * @param {Object} menu - jqxMenu's jQuery object.
        * @param {Object} the selected appointment instance or NULL when the menu is opened from cells selection.
        * @param {jQuery.Event Object} the jqxMenu's itemclick event object.
        */
        let contextMenuItemClick = (menu, appointment, event) => {
            let args = event.args;
            switch (args.id) {
                case 'delete':
                    this.refs.myScheduler.deleteAppointment(appointment.id);
                    return true;
                case 'free':
                    this.refs.myScheduler.setAppointmentProperty(appointment.id, 'status', 'free');
                    return true;
                case 'outOfOffice':
                    this.refs.myScheduler.setAppointmentProperty(appointment.id, 'status', 'outOfOffice');
                    return true;
                case 'tentative':
                    this.refs.myScheduler.setAppointmentProperty(appointment.id, 'status', 'tentative');
                    return true;
                case 'busy':
                    this.refs.myScheduler.setAppointmentProperty(appointment.id, 'status', 'busy');
                    return true;
            }
        };

        /**
        * called when the menu is opened.
        * @param {Object} menu - jqxMenu's jQuery object.
        * @param {Object} the selected appointment instance or NULL when the menu is opened from cells selection.
        * @param {jQuery.Event Object} the open event.
        */
        let contextMenuOpen = (menu, appointment, event) => {
            if (!appointment) {
                menu.jqxMenu('hideItem', 'delete');
                menu.jqxMenu('hideItem', 'status');
            }
            else {
                menu.jqxMenu('showItem', 'delete');
                menu.jqxMenu('showItem', 'status');
            }           
        };

        /**
        * called when the menu is closed.
        * @param {Object} menu - jqxMenu's jQuery object.
        * @param {Object} the selected appointment instance or NULL when the menu is opened from cells selection.
        * @param {jQuery.Event Object} the close event.
        */
        let contextMenuClose = () => {
        };
        return (
            <JqxScheduler ref='myScheduler'
                date={new $.jqx.date(2016, 11, 23)}
                width={850}
                height={600}
                source={adapter}
                view={1}
                showLegend={true}

                contextMenuCreate={contextMenuCreate}
                contextMenuItemClick={contextMenuItemClick}
                contextMenuOpen={contextMenuOpen}
                contextMenuClose={contextMenuClose}

                resources={resources}
                views={views}
                appointmentDataFields={appointmentDataFields}
            />
        )
    }
}

ReactDOM.render(<App />, document.getElementById('app'));