React UI Components Documentation

Sets or gets the tooltip text displayed when the mouse cursor is over the back navigation button.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxCalendar, { ICalendarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcalendar';
 
class App extends React.PureComponent<{}, ICalendarProps> {
  private myCalendar = React.createRef<JqxCalendar>();  
  
  public render() {
    return (
      <JqxCalendar ref={this.myCalendar} 
        width={200} height={200} backText={'Back'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the Calendar colomn header's height. In the column header are displayed the calendar day names.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxCalendar, { ICalendarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcalendar';
 
class App extends React.PureComponent<{}, ICalendarProps> {
  private myCalendar = React.createRef<JqxCalendar>();  
  
  public render() {
    return (
      <JqxCalendar ref={this.myCalendar} 
        width={200} height={200} columnHeaderHeight={50}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the 'Clear' string displayed when the 'showFooter' property is true.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxCalendar, { ICalendarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcalendar';
 
class App extends React.PureComponent<{}, ICalendarProps> {
  private myCalendar = React.createRef<JqxCalendar>();  
  
  public render() {
    return (
      <JqxCalendar ref={this.myCalendar} 
        width={200} height={200} clearString={'Clear'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the jqxCalendar's culture. The culture settings are contained within a file with the language code appended to the name, e.g. jquery.glob.de-DE.js for German. To set the culture, you need to include the jquery.glob.de-DE.js and set the culture property to the culture's name, e.g. 'de-DE'.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxCalendar, { ICalendarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcalendar';
 
class App extends React.PureComponent<{}, ICalendarProps> {
  private myCalendar = React.createRef<JqxCalendar>();  
  
  public render() {
    return (
      <JqxCalendar ref={this.myCalendar} 
        width={200} height={200} culture={'de-DE'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the name format of days of the week.

'default'

'shortest'

'firstTwoLetters'

'firstLetter'

'full'

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxCalendar, { ICalendarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcalendar';
 
class App extends React.PureComponent<{}, ICalendarProps> {
  private myCalendar = React.createRef<JqxCalendar>();  
  
  public render() {
    return (
      <JqxCalendar ref={this.myCalendar} 
        width={200} height={200} dayNameFormat={'firstTwoLetters'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Disables (true) or enables (false) the calendar. Can be set when initialising (first creating) the calendar.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxCalendar, { ICalendarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcalendar';
 
class App extends React.PureComponent<{}, ICalendarProps> {
  private myCalendar = React.createRef<JqxCalendar>();  
  
  public render() {
    return (
      <JqxCalendar ref={this.myCalendar} 
        width={200} height={200} disabled={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets a value indicating whether weekend persists its view state.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxCalendar, { ICalendarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcalendar';
 
class App extends React.PureComponent<{}, ICalendarProps> {
  private myCalendar = React.createRef<JqxCalendar>();  
  
  public render() {
    return (
      <JqxCalendar ref={this.myCalendar} 
        width={200} height={200} enableWeekend={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Determines whether switching between month, year and decade views is enabled.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxCalendar, { ICalendarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcalendar';
 
class App extends React.PureComponent<{}, ICalendarProps> {
  private myCalendar = React.createRef<JqxCalendar>();  
  
  public render() {
    return (
      <JqxCalendar ref={this.myCalendar} 
        width={200} height={200} enableViews={false}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets a value indicating whether the other month days are enabled.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxCalendar, { ICalendarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcalendar';
 
class App extends React.PureComponent<{}, ICalendarProps> {
  private myCalendar = React.createRef<JqxCalendar>();  
  
  public render() {
    return (
      <JqxCalendar ref={this.myCalendar} 
        width={200} height={200} enableOtherMonthDays={false}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets a value indicating whether the fast navigation is enabled.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxCalendar, { ICalendarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcalendar';
 
class App extends React.PureComponent<{}, ICalendarProps> {
  private myCalendar = React.createRef<JqxCalendar>();  
  
  public render() {
    return (
      <JqxCalendar ref={this.myCalendar} 
        width={200} height={200} enableFastNavigation={false}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets a value indicating whether the hover state is enabled. The hover state is activated when the mouse cursor is over a calendar cell. The hover state is automatically disabled when the calendar is displayed in touch devices.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxCalendar, { ICalendarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcalendar';
 
class App extends React.PureComponent<{}, ICalendarProps> {
  private myCalendar = React.createRef<JqxCalendar>();  
  
  public render() {
    return (
      <JqxCalendar ref={this.myCalendar} 
        width={200} height={200} enableHover={false}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets a value indicating whether the auto navigation is enabled. When this property is true, click on other month date will automatically navigate to the previous or next month.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxCalendar, { ICalendarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcalendar';
 
class App extends React.PureComponent<{}, ICalendarProps> {
  private myCalendar = React.createRef<JqxCalendar>();  
  
  public render() {
    return (
      <JqxCalendar ref={this.myCalendar} 
        width={200} height={200} enableAutoNavigation={false}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets a value indicating whether the tool tips are enabled.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxCalendar, { ICalendarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcalendar';
 
class App extends React.PureComponent<{}, ICalendarProps> {
  private myCalendar = React.createRef<JqxCalendar>();  
  
  public render() {
    return (
      <JqxCalendar ref={this.myCalendar} 
        width={200} height={200} enableTooltips={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the tooltip text displayed when the mouse cursor is over the forward navigation button. EnableTooltips property should be set to true.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxCalendar, { ICalendarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcalendar';
 
class App extends React.PureComponent<{}, ICalendarProps> {
  private myCalendar = React.createRef<JqxCalendar>();  
  
  public render() {
    return (
      <JqxCalendar ref={this.myCalendar} 
        width={200} height={200} forwardText={'Forward'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets which day to display in the first day column. By default the calendar displays 'Sunday' as first day.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxCalendar, { ICalendarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcalendar';
 
class App extends React.PureComponent<{}, ICalendarProps> {
  private myCalendar = React.createRef<JqxCalendar>();  
  
  public render() {
    return (
      <JqxCalendar ref={this.myCalendar} 
        width={200} height={200} firstDayOfWeek={3}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the height of the Calendar.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxCalendar, { ICalendarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcalendar';
 
class App extends React.PureComponent<{}, ICalendarProps> {
  private myCalendar = React.createRef<JqxCalendar>();  
  
  public render() {
    return (
      <JqxCalendar ref={this.myCalendar} 
        width={200} height={200}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Represents the minimum navigation date.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxCalendar, { ICalendarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcalendar';
 
class App extends React.PureComponent<{}, ICalendarProps> {
  private myCalendar = React.createRef<JqxCalendar>();  
     
  constructor(props: {}) {
    super(props);
     
    this.state = {
        min:  new Date(2018, 0, 1),
        max:  new Date(2019, 0, 1)
    }
  }  
  
  public render() {
    return (
      <JqxCalendar ref={this.myCalendar} 
        width={200} height={200} min={this.state.min} max={this.state.max}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Represents the maximum navigation date.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxCalendar, { ICalendarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcalendar';
 
class App extends React.PureComponent<{}, ICalendarProps> {
  private myCalendar = React.createRef<JqxCalendar>();  
     
  constructor(props: {}) {
    super(props);
     
    this.state = {
        min:  new Date(2018, 0, 1),
        max:  new Date(2019, 0, 1)
    }
  }  
  
  public render() {
    return (
      <JqxCalendar ref={this.myCalendar} 
        width={200} height={200} min={this.state.min} max={this.state.max}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Determines the animation delay between switching views.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxCalendar, { ICalendarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcalendar';
 
class App extends React.PureComponent<{}, ICalendarProps> {
  private myCalendar = React.createRef<JqxCalendar>();  
  
  public render() {
    return (
      <JqxCalendar ref={this.myCalendar} 
        width={200} height={200} navigationDelay={2000}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the row header width.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxCalendar, { ICalendarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcalendar';
 
class App extends React.PureComponent<{}, ICalendarProps> {
  private myCalendar = React.createRef<JqxCalendar>();  
  
  public render() {
    return (
      <JqxCalendar ref={this.myCalendar} 
        width={200} height={200} rowHeaderWidth={30}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the calendar in read only state.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxCalendar, { ICalendarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcalendar';
 
class App extends React.PureComponent<{}, ICalendarProps> {
  private myCalendar = React.createRef<JqxCalendar>();  
  
  public render() {
    return (
      <JqxCalendar ref={this.myCalendar} 
        width={200} height={200} readOnly={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the calendar's restricted dates. These are dates which cannot be clicked.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxCalendar, { ICalendarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcalendar';
 
class App extends React.PureComponent<{}, ICalendarProps> {
  private myCalendar = React.createRef<JqxCalendar>();  
   
  constructor(props: {}) {
    super(props);
      
    this.state = {
        restrictedDates: [new Date()] // Today's Date is Restricted
    }
  }  
  
  public render() {
    return (
      <JqxCalendar ref={this.myCalendar} 
        width={200} height={200} restrictedDates={this.state.restrictedDates}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxCalendar, { ICalendarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcalendar';
 
class App extends React.PureComponent<{}, ICalendarProps> {
  private myCalendar = React.createRef<JqxCalendar>();  
  
  public render() {
    return (
      <JqxCalendar ref={this.myCalendar} 
        width={200} height={200} rtl={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Represents the calendar`s navigation step when the left or right navigation button is clicked.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxCalendar, { ICalendarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcalendar';
 
class App extends React.PureComponent<{}, ICalendarProps> {
  private myCalendar = React.createRef<JqxCalendar>();  
  
  public render() {
    return (
      <JqxCalendar ref={this.myCalendar} 
        width={200} height={200} stepMonths={3}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets a value whether the week`s numbers are displayed.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxCalendar, { ICalendarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcalendar';
 
class App extends React.PureComponent<{}, ICalendarProps> {
  private myCalendar = React.createRef<JqxCalendar>();  
  
  public render() {
    return (
      <JqxCalendar ref={this.myCalendar} 
        width={200} height={200} showWeekNumbers={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets a value whether the day names are displayed. By default, the day names are displayed.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxCalendar, { ICalendarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcalendar';
 
class App extends React.PureComponent<{}, ICalendarProps> {
  private myCalendar = React.createRef<JqxCalendar>();  
  
  public render() {
    return (
      <JqxCalendar ref={this.myCalendar} 
        width={200} height={200} showDayNames={false}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets a value whether the other month days are displayed.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxCalendar, { ICalendarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcalendar';
 
class App extends React.PureComponent<{}, ICalendarProps> {
  private myCalendar = React.createRef<JqxCalendar>();  
  
  public render() {
    return (
      <JqxCalendar ref={this.myCalendar} 
        width={200} height={200} showOtherMonthDays={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets a value indicating whether the calendar's footer is displayed.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxCalendar, { ICalendarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcalendar';
 
class App extends React.PureComponent<{}, ICalendarProps> {
  private myCalendar = React.createRef<JqxCalendar>();  
  
  public render() {
    return (
      <JqxCalendar ref={this.myCalendar} 
        width={200} height={200} showFooter={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the selection mode.

'none'

'default'

'range'

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxCalendar, { ICalendarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcalendar';
 
class App extends React.PureComponent<{}, ICalendarProps> {
  private myCalendar = React.createRef<JqxCalendar>();  
  
  public render() {
    return (
      <JqxCalendar ref={this.myCalendar} 
        width={200} height={200} selectionMode={'range'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets a special date to the Calendar.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxCalendar, { ICalendarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcalendar';
 
class App extends React.PureComponent<{}, ICalendarProps> {
  private myCalendar = React.createRef<JqxCalendar>();  
   
  constructor(props: {}) {
    super(props);
      
    this.state = {
        specialDates: []
        /*
          Set the SpecialDates Property.
          this.$refs.myCalendar.addSpecialDate(new Date());
          Get the SpecialDates Property.
          const specialDates = this.$refs.myCalendar.specialDates;
        */
    }
  }  
  
  public render() {
    return (
      <JqxCalendar ref={this.myCalendar} 
        width={200} height={200} specialDates={this.state.specialDates}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxCalendar, { ICalendarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcalendar';
 
class App extends React.PureComponent<{}, ICalendarProps> {
  private myCalendar = React.createRef<JqxCalendar>();  
  
  public render() {
    return (
      <JqxCalendar ref={this.myCalendar} 
        width={200} height={200} theme={'material'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the title height where the navigation arrows are displayed.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxCalendar, { ICalendarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcalendar';
 
class App extends React.PureComponent<{}, ICalendarProps> {
  private myCalendar = React.createRef<JqxCalendar>();  
  
  public render() {
    return (
      <JqxCalendar ref={this.myCalendar} 
        width={200} height={200} titleHeight={50}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the title format for the title section.

'd' - the day of the month

'dd' - the day of the month

'ddd' - the abbreviated name of the day of the week

'dddd' - the full name of the day of the week

'h' - the hour, using a 12-hour clock from 1 to 12

'hh' - the hour, using a 12-hour clock from 01 to 12

'H' - the hour, using a 24-hour clock from 0 to 23

'HH' - the hour, using a 24-hour clock from 00 to 23

'm'-the minute, from 0 through 59

'mm' - the minutes,from 00 though59

'M' - the month, from 1 through 12;

'MM' - the month, from 01 through 12

'MMM' - the abbreviated name of the month

'MMMM' - the full name of the month

's' - the second, from 0 through 59

'ss' - the second, from 00 through 59

't' - the first character of the AM/PM designator

'tt' - the AM/PM designator

'y' - the year, from 0 to 99

'yy' - the year, from 00 to 99

'yyy' - the year, with a minimum of three digits

'yyyy' - the year as a four-digit number

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxCalendar, { ICalendarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcalendar';
 
class App extends React.PureComponent<{}, ICalendarProps> {
  private myCalendar = React.createRef<JqxCalendar>();  
  
  public render() {
    return (
      <JqxCalendar ref={this.myCalendar} 
        width={200} height={200} titleFormat={["MM yyyy", "yyyy", "yyyy"]}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the 'Today' string displayed when the 'showFooter' property is true.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxCalendar, { ICalendarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcalendar';
 
class App extends React.PureComponent<{}, ICalendarProps> {
  private myCalendar = React.createRef<JqxCalendar>();  
  
  public render() {
    return (
      <JqxCalendar ref={this.myCalendar} 
        width={200} height={200} todayString={'Today'} showFooter={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the Calendar's value.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxCalendar, { ICalendarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcalendar';
 
class App extends React.PureComponent<{}, ICalendarProps> {
  private myCalendar = React.createRef<JqxCalendar>();  
   
  constructor(props: {}) {
    super(props);
      
    this.state = {
        value: new Date(2019, 0, 10)
    }
  }  
  
  public render() {
    return (
      <JqxCalendar ref={this.myCalendar} 
        width={200} height={200} value={this.state.value}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the width of the Calendar.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxCalendar, { ICalendarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcalendar';
 
class App extends React.PureComponent<{}, ICalendarProps> {
  private myCalendar = React.createRef<JqxCalendar>();  
  
  public render() {
    return (
      <JqxCalendar ref={this.myCalendar} 
        width={200} height={200}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

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

Code examples

Bind to the backButtonClick event of jqxCalendar.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxCalendar, { ICalendarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcalendar';
 
class App extends React.PureComponent<{}, ICalendarProps> {
  private myCalendar = React.createRef<JqxCalendar>();  
  
  public render() {
    return (
      <JqxCalendar ref={this.myCalendar} onBackButtonClick={this.onBackButtonClick} 
        width={200} height={200}
      />
    );
  }
 
  private onBackButtonClick(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

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

Code examples

Bind to the change event of jqxCalendar.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxCalendar, { ICalendarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcalendar';
 
class App extends React.PureComponent<{}, ICalendarProps> {
  private myCalendar = React.createRef<JqxCalendar>();  
  
  public render() {
    return (
      <JqxCalendar ref={this.myCalendar} onChange={this.onChange} 
        width={200} height={200}
      />
    );
  }
 
  private onChange(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

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

Code examples

Bind to the nextButtonClick event of jqxCalendar.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxCalendar, { ICalendarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcalendar';
 
class App extends React.PureComponent<{}, ICalendarProps> {
  private myCalendar = React.createRef<JqxCalendar>();  
  
  public render() {
    return (
      <JqxCalendar ref={this.myCalendar} onNextButtonClick={this.onNextButtonClick} 
        width={200} height={200}
      />
    );
  }
 
  private onNextButtonClick(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

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

Code examples

Bind to the viewChange event of jqxCalendar.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxCalendar, { ICalendarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcalendar';
 
class App extends React.PureComponent<{}, ICalendarProps> {
  private myCalendar = React.createRef<JqxCalendar>();  
  
  public render() {
    return (
      <JqxCalendar ref={this.myCalendar} onViewChange={this.onViewChange} 
        width={200} height={200}
      />
    );
  }
 
  private onViewChange(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Clears the selection.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxCalendar, { ICalendarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcalendar';
 
class App extends React.PureComponent<{}, ICalendarProps> {
  private myCalendar = React.createRef<JqxCalendar>();
 
  public componentDidMount(): void {
    this.myCalendar.current!.clear();
  }
   
  
  public render() {
    return (
      <JqxCalendar ref={this.myCalendar} 
        width={200} height={200}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Destroys the widget.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxCalendar, { ICalendarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcalendar';
 
class App extends React.PureComponent<{}, ICalendarProps> {
  private myCalendar = React.createRef<JqxCalendar>();
 
  public componentDidMount(): void {
    this.myCalendar.current!.destroy();
  }
   
  
  public render() {
    return (
      <JqxCalendar ref={this.myCalendar} 
        width={200} height={200}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Focuses the Calendar.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxCalendar, { ICalendarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcalendar';
 
class App extends React.PureComponent<{}, ICalendarProps> {
  private myCalendar = React.createRef<JqxCalendar>();
 
  public componentDidMount(): void {
    this.myCalendar.current!.focus();
  }
   
  
  public render() {
    return (
      <JqxCalendar ref={this.myCalendar} 
        width={200} height={200}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Method: addSpecialDate

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxCalendar, { ICalendarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcalendar';
 
class App extends React.PureComponent<{}, ICalendarProps> {
  private myCalendar = React.createRef<JqxCalendar>();
 
  public componentDidMount(): void {
    this.myCalendar.current!.addSpecialDate(new Date(),'','Special Date');
  }
   
  
  public render() {
    return (
      <JqxCalendar ref={this.myCalendar} 
        width={200} height={200}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

When the getMinDate method is called, the user gets the lowest navigation date set to the Calendar.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxCalendar, { ICalendarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcalendar';
 
class App extends React.PureComponent<{}, ICalendarProps> {
  private myCalendar = React.createRef<JqxCalendar>();
 
  public componentDidMount(): void {
    this.myCalendar.current!.getMinDate();
  }
   
  
  public render() {
    return (
      <JqxCalendar ref={this.myCalendar} 
        width={200} height={200}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

When the getMaxDate method is called, the user gets the hightest navigation date set to the Calendar. The retuned value is a JavaScript Date object.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxCalendar, { ICalendarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcalendar';
 
class App extends React.PureComponent<{}, ICalendarProps> {
  private myCalendar = React.createRef<JqxCalendar>();
 
  public componentDidMount(): void {
    this.myCalendar.current!.getMaxDate();
  }
   
  
  public render() {
    return (
      <JqxCalendar ref={this.myCalendar} 
        width={200} height={200}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

When the getDate method is called, the user gets the current month displayed in the Calendar.The returned value is a JavaScript Date object.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxCalendar, { ICalendarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcalendar';
 
class App extends React.PureComponent<{}, ICalendarProps> {
  private myCalendar = React.createRef<JqxCalendar>();
 
  public componentDidMount(): void {
    this.myCalendar.current!.getDate();
  }
   
  
  public render() {
    return (
      <JqxCalendar ref={this.myCalendar} 
        width={200} height={200}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Gets the selection range when the selectionMode is set to 'range'. The returned value is an object with "from" and "to" fields. Each of these is a JavaScript Date object.

When the navigateForward method is called, the calendar navigates forward with a specific month step (by default 1).

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxCalendar, { ICalendarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcalendar';
 
class App extends React.PureComponent<{}, ICalendarProps> {
  private myCalendar = React.createRef<JqxCalendar>();
 
  public componentDidMount(): void {
    this.myCalendar.current!.navigateForward();
  }
   
  
  public render() {
    return (
      <JqxCalendar ref={this.myCalendar} 
        width={200} height={200}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

When the navigateBackward method is called, the calendar navigates backward with a specific month step (by default 1).

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxCalendar, { ICalendarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcalendar';
 
class App extends React.PureComponent<{}, ICalendarProps> {
  private myCalendar = React.createRef<JqxCalendar>();
 
  public componentDidMount(): void {
    this.myCalendar.current!.navigateBackward();
  }
   
  
  public render() {
    return (
      <JqxCalendar ref={this.myCalendar} 
        width={200} height={200}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Renders the Calendar.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxCalendar, { ICalendarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcalendar';
 
class App extends React.PureComponent<{}, ICalendarProps> {
  private myCalendar = React.createRef<JqxCalendar>();
 
  public componentDidMount(): void {
    this.myCalendar.current!.render();
  }
   
  
  public render() {
    return (
      <JqxCalendar ref={this.myCalendar} 
        width={200} height={200}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Performs a layout and updates the UI.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxCalendar, { ICalendarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcalendar';
 
class App extends React.PureComponent<{}, ICalendarProps> {
  private myCalendar = React.createRef<JqxCalendar>();
 
  public componentDidMount(): void {
    this.myCalendar.current!.refresh();
  }
   
  
  public render() {
    return (
      <JqxCalendar ref={this.myCalendar} 
        width={200} height={200}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

When the setMinDate method is called, the user sets the lowest date to which it is possible to navigate.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxCalendar, { ICalendarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcalendar';
 
class App extends React.PureComponent<{}, ICalendarProps> {
  private myCalendar = React.createRef<JqxCalendar>();
 
  public componentDidMount(): void {
    this.myCalendar.current!.setMinDate(new Date(2017, 9, 20));
  }
   
  
  public render() {
    return (
      <JqxCalendar ref={this.myCalendar} 
        width={200} height={200}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

When the setMaxDate method is called, the user sets the hightest date to which it is possible to navigate.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxCalendar, { ICalendarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcalendar';
 
class App extends React.PureComponent<{}, ICalendarProps> {
  private myCalendar = React.createRef<JqxCalendar>();
 
  public componentDidMount(): void {
    this.myCalendar.current!.setMaxDate(new Date(2019, 10, 20));
  }
   
  
  public render() {
    return (
      <JqxCalendar ref={this.myCalendar} 
        width={200} height={200}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

When the setDate method is called, the user sets the current month displayed in the Calendar. The parameter is a JavaScript Date object.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxCalendar, { ICalendarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcalendar';
 
class App extends React.PureComponent<{}, ICalendarProps> {
  private myCalendar = React.createRef<JqxCalendar>();
 
  public componentDidMount(): void {
    this.myCalendar.current!.setDate(new Date(2017, 9, 20));
  }
   
  
  public render() {
    return (
      <JqxCalendar ref={this.myCalendar} 
        width={200} height={200}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets the selection range when the selectionMode is set to 'range'. The parameters are JavaScript Date objects.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxCalendar, { ICalendarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcalendar';
 
class App extends React.PureComponent<{}, ICalendarProps> {
  private myCalendar = React.createRef<JqxCalendar>();
 
  public componentDidMount(): void {
    this.myCalendar.current!.setRange(new Date(2017, 9, 20),new Date(2017, 9, 22));
  }
   
  
  public render() {
    return (
      <JqxCalendar ref={this.myCalendar} 
        width={200} height={200}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets the Date to Today.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxCalendar, { ICalendarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcalendar';
 
class App extends React.PureComponent<{}, ICalendarProps> {
  private myCalendar = React.createRef<JqxCalendar>();
 
  public componentDidMount(): void {
    this.myCalendar.current!.today();
  }
   
  
  public render() {
    return (
      <JqxCalendar ref={this.myCalendar} 
        width={200} height={200}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Gets or sets the jqxCalendar's value.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxCalendar, { ICalendarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcalendar';
 
class App extends React.PureComponent<{}, ICalendarProps> {
  private myCalendar = React.createRef<JqxCalendar>();
 
  public componentDidMount(): void {
    this.myCalendar.current!.val();
  }
   
  
  public render() {
    return (
      <JqxCalendar ref={this.myCalendar} 
        width={200} height={200}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);