React UI Components

Show Demo List

Theme:

Demo
App.htm
App.js

React Calendar provides support for localizing its content and dates for different languages and date formats. Each localization is contained within its own file with the language code appended to the name, e.g. globalize.culture.de-DE.js for German. The desired localization file should be loaded along with the jqxcalendar.js. The localization is set to the jqxCalendar instance by setting the jqxCalendar's culture property.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title id='Description'>
        React Calendar provides support for localizing its content and dates for different languages and date formats. Each localization is contained within its own file with the language code appended to the name, e.g. globalize.culture.de-DE.js for German. The desired localization file should be loaded along with the jqxcalendar.js. The localization is set to the jqxCalendar instance by setting the jqxCalendar's culture property.
    </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/jqxdatetimeinput.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/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.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/globalization/globalize.js"></script>
    <script type="text/javascript" src="../scripts/demos.js"></script>
</head>
<body>
    <div class="example-description" style="margin-bottom:3em">
        React Calendar provides support for localizing its content and dates for different languages and date formats. Each localization is contained within its own file with the language code appended to the name, e.g. globalize.culture.de-DE.js for German. The desired localization file should be loaded along with the jqxcalendar.js. The localization is set to the jqxCalendar instance by setting the jqxCalendar's culture property.
    </div>
    <div id="app"></div>
    <script src="../build/calendar_localization.bundle.js"></script>
</body>
</html>

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

import JqxCalendar from '../../../jqwidgets-react/react_jqxcalendar.js';
import JqxDropDownList from '../../../jqwidgets-react/react_jqxdropdownlist.js';

class App extends React.Component {
    componentDidMount() {
        this.refs.myDropDownList.on('select', (event) => {
            let index = event.args.index;
            switch (index) {
                case 0:
                    $.getScript('../jqwidgets/globalization/globalize.culture.cs-CZ.js', () => {
                        this.refs.myCalendar.culture('cs-CZ');
                    });
                    break;
                case 1:
                    $.getScript('../jqwidgets/globalization/globalize.culture.de-DE.js', () => {
                        this.refs.myCalendar.culture('de-DE');
                    });
                    break;
                case 2:
                    $.getScript('../jqwidgets/globalization/globalize.culture.en-CA.js', () => {
                        this.refs.myCalendar.culture('en-CA');
                    });
                    break;
                case 3:
                    $.getScript('../jqwidgets/globalization/globalize.culture.en-US.js', () => {
                        this.refs.myCalendar.culture('en-US');
                    });
                    break;
                case 4:
                    $.getScript('../jqwidgets/globalization/globalize.culture.fr-FR.js', () => {
                        this.refs.myCalendar.culture('fr-FR');
                    });
                    break;
                case 5:
                    $.getScript('../jqwidgets/globalization/globalize.culture.it-IT.js', () => {
                        this.refs.myCalendar.culture('it-IT');
                    });
                    break;
                case 6:
                    $.getScript('../jqwidgets/globalization/globalize.culture.ja-JP.js', () => {
                        this.refs.myCalendar.culture('ja-JP');
                    });
                    break;
                case 7:
                    $.getScript('../jqwidgets/globalization/globalize.culture.he-IL.js', () => {
                        this.refs.myCalendar.culture('he-IL');
                    });
                    break;
                case 8:
                    $.getScript('../jqwidgets/globalization/globalize.culture.ru-RU.js', () => {
                        this.refs.myCalendar.culture('ru-RU');
                    });
                    break;
                case 9:
                    $.getScript('../jqwidgets/globalization/globalize.culture.hr-HR.js', () => {
                        this.refs.myCalendar.culture('hr');
                    });
                    break;
                case 10:
                    $.getScript('../jqwidgets/globalization/globalize.culture.sa-IN.js', () => {
                        this.refs.myCalendar.culture('sa-IN');
                    });
                    break;
            }
        });
    }
    render() {
        let availableCultures =
            [
                'Czech (Czech Republic)', 'German (Germany)', 'English (Canada)', 'English (United States)', 'French (France)',
                'Italian (Italy)', 'Japanese (Japan)', 'Hebrew (Israel)', 'Russian (Russia)', 'Croatian (Croatia)', 'Sanskrit (India)'
            ];
        return (
            <div>
                <JqxCalendar ref='myCalendar' style={{ float: 'left', marginRight: 20 }}
                    width={220} height={220} enableTooltips={false}
                />

                <div style={{ float: 'left' }}>
                    <div style={{ float: 'left', fontFamily: 'Verdana', fontSize: 13 }}>
                        Choose Culture
                    </div>
                    <br /> <br />

                    <JqxDropDownList ref='myDropDownList' style={{ float: 'left' }}
                        width={220} height={25} selectedIndex={3} source={availableCultures}
                    />
                </div>
            </div>
        )
    }
}

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