React UI Components Documentation

Sets or gets the backText property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxCalendar from 'jqwidgets-react/react_jqxcalendar.js';
 
class App extends React.Component { 
    render() {         
        return (
            <JqxCalendar ref='myCalendar'
                 width={200} height={200} backText={'Back'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the columnHeaderHeight property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxCalendar from 'jqwidgets-react/react_jqxcalendar.js';
 
class App extends React.Component { 
    render() {         
        return (
            <JqxCalendar ref='myCalendar'
                 width={200} height={200} columnHeaderHeight={50}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the clearString property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxCalendar from 'jqwidgets-react/react_jqxcalendar.js';
 
class App extends React.Component { 
    render() {         
        return (
            <JqxCalendar ref='myCalendar'
                 width={200} height={200} clearString={'Clear'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the culture property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxCalendar from 'jqwidgets-react/react_jqxcalendar.js';
 
class App extends React.Component { 
    render() {         
        return (
            <JqxCalendar ref='myCalendar'
                 width={200} height={200} culture={'de-DE'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the dayNameFormat property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxCalendar from 'jqwidgets-react/react_jqxcalendar.js';
 
class App extends React.Component { 
    render() {         
        return (
            <JqxCalendar ref='myCalendar'
                 width={200} height={200} dayNameFormat={'firstTwoLetters'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the disabled property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxCalendar from 'jqwidgets-react/react_jqxcalendar.js';
 
class App extends React.Component { 
    render() {         
        return (
            <JqxCalendar ref='myCalendar'
                 width={200} height={200} disabled={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the enableWeekend property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxCalendar from 'jqwidgets-react/react_jqxcalendar.js';
 
class App extends React.Component { 
    render() {         
        return (
            <JqxCalendar ref='myCalendar'
                 width={200} height={200} enableWeekend={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the enableViews property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxCalendar from 'jqwidgets-react/react_jqxcalendar.js';
 
class App extends React.Component { 
    render() {         
        return (
            <JqxCalendar ref='myCalendar'
                 width={200} height={200} enableViews={false}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the enableOtherMonthDays property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxCalendar from 'jqwidgets-react/react_jqxcalendar.js';
 
class App extends React.Component { 
    render() {         
        return (
            <JqxCalendar ref='myCalendar'
                 width={200} height={200} enableOtherMonthDays={false}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the enableFastNavigation property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxCalendar from 'jqwidgets-react/react_jqxcalendar.js';
 
class App extends React.Component { 
    render() {         
        return (
            <JqxCalendar ref='myCalendar'
                 width={200} height={200} enableFastNavigation={false}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the enableHover property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxCalendar from 'jqwidgets-react/react_jqxcalendar.js';
 
class App extends React.Component { 
    render() {         
        return (
            <JqxCalendar ref='myCalendar'
                 width={200} height={200} enableHover={false}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the enableAutoNavigation property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxCalendar from 'jqwidgets-react/react_jqxcalendar.js';
 
class App extends React.Component { 
    render() {         
        return (
            <JqxCalendar ref='myCalendar'
                 width={200} height={200} enableAutoNavigation={false}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the enableTooltips property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxCalendar from 'jqwidgets-react/react_jqxcalendar.js';
 
class App extends React.Component { 
    render() {         
        return (
            <JqxCalendar ref='myCalendar'
                 width={200} height={200} enableTooltips={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the forwardText property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxCalendar from 'jqwidgets-react/react_jqxcalendar.js';
 
class App extends React.Component { 
    render() {         
        return (
            <JqxCalendar ref='myCalendar'
                 width={200} height={200} forwardText={'Forward'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the firstDayOfWeek property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxCalendar from 'jqwidgets-react/react_jqxcalendar.js';
 
class App extends React.Component { 
    render() {         
        return (
            <JqxCalendar ref='myCalendar'
                 width={200} height={200} firstDayOfWeek={3}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the height property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxCalendar from 'jqwidgets-react/react_jqxcalendar.js';
 
class App extends React.Component { 
    render() {         
        return (
            <JqxCalendar ref='myCalendar'
                 width={200} height={200}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the min property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxCalendar from 'jqwidgets-react/react_jqxcalendar.js';
 
class App extends React.Component { 
    render() {         
        return (
            <JqxCalendar ref='myCalendar'
                 width={200} height={200} min={min} max={max}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the max property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxCalendar from 'jqwidgets-react/react_jqxcalendar.js';
 
class App extends React.Component { 
    render() {         
        return (
            <JqxCalendar ref='myCalendar'
                 width={200} height={200} min={min} max={max}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the navigationDelay property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxCalendar from 'jqwidgets-react/react_jqxcalendar.js';
 
class App extends React.Component { 
    render() {         
        return (
            <JqxCalendar ref='myCalendar'
                 width={200} height={200} navigationDelay={2000}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the rowHeaderWidth property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxCalendar from 'jqwidgets-react/react_jqxcalendar.js';
 
class App extends React.Component { 
    render() {         
        return (
            <JqxCalendar ref='myCalendar'
                 width={200} height={200} rowHeaderWidth={30}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the readOnly property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxCalendar from 'jqwidgets-react/react_jqxcalendar.js';
 
class App extends React.Component { 
    render() {         
        return (
            <JqxCalendar ref='myCalendar'
                 width={200} height={200} readOnly={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the restrictedDates property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxCalendar from 'jqwidgets-react/react_jqxcalendar.js';
 
class App extends React.Component { 
    render() {         
        return (
            <JqxCalendar ref='myCalendar'
                 width={200} height={200} restrictedDates={restrictedDates}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the rtl property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxCalendar from 'jqwidgets-react/react_jqxcalendar.js';
 
class App extends React.Component { 
    render() {         
        return (
            <JqxCalendar ref='myCalendar'
                 width={200} height={200} rtl={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the stepMonths property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxCalendar from 'jqwidgets-react/react_jqxcalendar.js';
 
class App extends React.Component { 
    render() {         
        return (
            <JqxCalendar ref='myCalendar'
                 width={200} height={200} stepMonths={3}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the showWeekNumbers property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxCalendar from 'jqwidgets-react/react_jqxcalendar.js';
 
class App extends React.Component { 
    render() {         
        return (
            <JqxCalendar ref='myCalendar'
                 width={200} height={200} showWeekNumbers={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the showDayNames property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxCalendar from 'jqwidgets-react/react_jqxcalendar.js';
 
class App extends React.Component { 
    render() {         
        return (
            <JqxCalendar ref='myCalendar'
                 width={200} height={200} showDayNames={false}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the showOtherMonthDays property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxCalendar from 'jqwidgets-react/react_jqxcalendar.js';
 
class App extends React.Component { 
    render() {         
        return (
            <JqxCalendar ref='myCalendar'
                 width={200} height={200} showOtherMonthDays={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the showFooter property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxCalendar from 'jqwidgets-react/react_jqxcalendar.js';
 
class App extends React.Component { 
    render() {         
        return (
            <JqxCalendar ref='myCalendar'
                 width={200} height={200} showFooter={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the selectionMode property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxCalendar from 'jqwidgets-react/react_jqxcalendar.js';
 
class App extends React.Component { 
    render() {         
        return (
            <JqxCalendar ref='myCalendar'
                 width={200} height={200} selectionMode={'range'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the specialDates property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxCalendar from 'jqwidgets-react/react_jqxcalendar.js';
 
class App extends React.Component { 
    render() {         
        return (
            <JqxCalendar ref='myCalendar'
                 width={200} height={200} specialDates={specialDates}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the theme property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxCalendar from 'jqwidgets-react/react_jqxcalendar.js';
 
class App extends React.Component { 
    render() {         
        return (
            <JqxCalendar ref='myCalendar'
                 width={200} height={200} theme={'energyblue'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the titleHeight property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxCalendar from 'jqwidgets-react/react_jqxcalendar.js';
 
class App extends React.Component { 
    render() {         
        return (
            <JqxCalendar ref='myCalendar'
                 width={200} height={200} titleHeight={50}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the titleFormat property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxCalendar from 'jqwidgets-react/react_jqxcalendar.js';
 
class App extends React.Component { 
    render() {         
        return (
            <JqxCalendar ref='myCalendar'
                 width={200} height={200} titleFormat={["MM yyyy", "yyyy", "yyyy"]}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the todayString property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxCalendar from 'jqwidgets-react/react_jqxcalendar.js';
 
class App extends React.Component { 
    render() {         
        return (
            <JqxCalendar ref='myCalendar'
                 width={200} height={200} todayString={'Today'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the value property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxCalendar from 'jqwidgets-react/react_jqxcalendar.js';
 
class App extends React.Component { 
    render() {         
        return (
            <JqxCalendar ref='myCalendar'
                 width={200} height={200} value={value}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the width property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxCalendar from 'jqwidgets-react/react_jqxcalendar.js';
 
class App extends React.Component { 
    render() {         
        return (
            <JqxCalendar ref='myCalendar'
                 width={200} height={200}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when the calendar back navigation button is clicked.

Code examples

Bind to the backButtonClick event of jqxCalendar.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxCalendar from 'jqwidgets-react/react_jqxcalendar.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myCalendar.on('backButtonClick', (event) => {
            // Do Something...
        });
    }

    render() {         
        return (
            <JqxCalendar ref='myCalendar'
                 width={200} height={200}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when the Calendar's selection is changed.

Code examples

Bind to the change event of jqxCalendar.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxCalendar from 'jqwidgets-react/react_jqxcalendar.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myCalendar.on('change', (event) => {
            // Do Something...
        });
    }

    render() {         
        return (
            <JqxCalendar ref='myCalendar'
                 width={200} height={200}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when the calendar next navigation button is clicked.

Code examples

Bind to the nextButtonClick event of jqxCalendar.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxCalendar from 'jqwidgets-react/react_jqxcalendar.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myCalendar.on('nextButtonClick', (event) => {
            // Do Something...
        });
    }

    render() {         
        return (
            <JqxCalendar ref='myCalendar'
                 width={200} height={200}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when the Calendar's view is changed.

Code examples

Bind to the viewChange event of jqxCalendar.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxCalendar from 'jqwidgets-react/react_jqxcalendar.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myCalendar.on('viewChange', (event) => {
            // Do Something...
        });
    }

    render() {         
        return (
            <JqxCalendar ref='myCalendar'
                 width={200} height={200}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxCalendar from 'jqwidgets-react/react_jqxcalendar.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myCalendar.clear();
    }

    render() {         
        return (
            <JqxCalendar ref='myCalendar'
                 width={200} height={200}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxCalendar from 'jqwidgets-react/react_jqxcalendar.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myCalendar.destroy();
    }

    render() {         
        return (
            <JqxCalendar ref='myCalendar'
                 width={200} height={200}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxCalendar from 'jqwidgets-react/react_jqxcalendar.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myCalendar.focus();
    }

    render() {         
        return (
            <JqxCalendar ref='myCalendar'
                 width={200} height={200}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxCalendar from 'jqwidgets-react/react_jqxcalendar.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myCalendar.addSpecialDate(new Date(2017, 9, 20),tooltip);
    }

    render() {         
        return (
            <JqxCalendar ref='myCalendar'
                 width={200} height={200}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxCalendar from 'jqwidgets-react/react_jqxcalendar.js';
 
class App extends React.Component { 
    componentDidMount() {
        let value = this.refs.myCalendar.getMinDate();
    }

    render() {         
        return (
            <JqxCalendar ref='myCalendar'
                 width={200} height={200}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxCalendar from 'jqwidgets-react/react_jqxcalendar.js';
 
class App extends React.Component { 
    componentDidMount() {
        let value = this.refs.myCalendar.getMaxDate();
    }

    render() {         
        return (
            <JqxCalendar ref='myCalendar'
                 width={200} height={200}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxCalendar from 'jqwidgets-react/react_jqxcalendar.js';
 
class App extends React.Component { 
    componentDidMount() {
        let value = this.refs.myCalendar.getDate();
    }

    render() {         
        return (
            <JqxCalendar ref='myCalendar'
                 width={200} height={200}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxCalendar from 'jqwidgets-react/react_jqxcalendar.js';
 
class App extends React.Component { 
    componentDidMount() {
        let value = this.refs.myCalendar.getRange();
    }

    render() {         
        return (
            <JqxCalendar ref='myCalendar'
                 width={200} height={200}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxCalendar from 'jqwidgets-react/react_jqxcalendar.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myCalendar.navigateForward();
    }

    render() {         
        return (
            <JqxCalendar ref='myCalendar'
                 width={200} height={200}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxCalendar from 'jqwidgets-react/react_jqxcalendar.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myCalendar.navigateBackward();
    }

    render() {         
        return (
            <JqxCalendar ref='myCalendar'
                 width={200} height={200}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxCalendar from 'jqwidgets-react/react_jqxcalendar.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myCalendar.render();
    }

    render() {         
        return (
            <JqxCalendar ref='myCalendar'
                 width={200} height={200}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxCalendar from 'jqwidgets-react/react_jqxcalendar.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myCalendar.refresh();
    }

    render() {         
        return (
            <JqxCalendar ref='myCalendar'
                 width={200} height={200}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxCalendar from 'jqwidgets-react/react_jqxcalendar.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myCalendar.setMinDate(new Date(2017, 9, 20));
    }

    render() {         
        return (
            <JqxCalendar ref='myCalendar'
                 width={200} height={200}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxCalendar from 'jqwidgets-react/react_jqxcalendar.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myCalendar.setMaxDate(new Date(2017, 9, 20));
    }

    render() {         
        return (
            <JqxCalendar ref='myCalendar'
                 width={200} height={200}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxCalendar from 'jqwidgets-react/react_jqxcalendar.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myCalendar.setDate(new Date(2017, 9, 20));
    }

    render() {         
        return (
            <JqxCalendar ref='myCalendar'
                 width={200} height={200}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxCalendar from 'jqwidgets-react/react_jqxcalendar.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myCalendar.setRange(new Date(2017, 9, 20),new Date(2017, 9, 22));
    }

    render() {         
        return (
            <JqxCalendar ref='myCalendar'
                 width={200} height={200}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxCalendar from 'jqwidgets-react/react_jqxcalendar.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myCalendar.today();
    }

    render() {         
        return (
            <JqxCalendar ref='myCalendar'
                 width={200} height={200}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxCalendar from 'jqwidgets-react/react_jqxcalendar.js';
 
class App extends React.Component { 
    componentDidMount() {
        let value = this.refs.myCalendar.val();
    }

    render() {         
        return (
            <JqxCalendar ref='myCalendar'
                 width={200} height={200}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));