office-ui-fabric-react/lib-amd/demo/pages/CalendarPage/examples/Calendar.Button.Example.tsx.js

Reusable React components for building experiences for Office 365.

define([], function() { return "import * as React from 'react';\r\nimport {\r\n  Button,\r\n  Calendar,\r\n  Callout,\r\n  DayOfWeek,\r\n  DirectionalHint\r\n} from '../../../../index';\r\n\r\nconst DayPickerStrings = {\r\n  months: [\r\n    'January',\r\n    'February',\r\n    'March',\r\n    'April',\r\n    'May',\r\n    'June',\r\n    'July',\r\n    'August',\r\n    'September',\r\n    'October',\r\n    'November',\r\n    'December'\r\n  ],\r\n\r\n  shortMonths: [\r\n    'Jan',\r\n    'Feb',\r\n    'Mar',\r\n    'Apr',\r\n    'May',\r\n    'Jun',\r\n    'Jul',\r\n    'Aug',\r\n    'Sep',\r\n    'Oct',\r\n    'Nov',\r\n    'Dec'\r\n  ],\r\n\r\n  days: [\r\n    'Sunday',\r\n    'Monday',\r\n    'Tuesday',\r\n    'Wednesday',\r\n    'Thursday',\r\n    'Friday',\r\n    'Saturday'\r\n  ],\r\n\r\n  shortDays: [\r\n    'S',\r\n    'M',\r\n    'T',\r\n    'W',\r\n    'T',\r\n    'F',\r\n    'S'\r\n  ],\r\n\r\n  goToToday: 'Go to today'\r\n};\r\n\r\nexport interface ICalendarButtonExampleState {\r\n  showCalendar: boolean;\r\n  selectedDate: Date;\r\n}\r\n\r\nexport class CalendarButtonExample extends React.Component<any, ICalendarButtonExampleState> {\r\n  private _calendarButtonElement: HTMLElement;\r\n\r\n  public constructor() {\r\n    super();\r\n\r\n    this.state = {\r\n      showCalendar: false,\r\n      selectedDate: null\r\n    };\r\n\r\n    this._onClick = this._onClick.bind(this);\r\n    this._onDismiss = this._onDismiss.bind(this);\r\n    this._onSelectDate = this._onSelectDate.bind(this);\r\n  }\r\n\r\n  public render() {\r\n    return (\r\n      <div>\r\n        <div ref={ (calendarBtn) => this._calendarButtonElement = calendarBtn }>\r\n          <Button onClick={ this._onClick } >\r\n            { this.state.selectedDate == null ? 'Click for Calendar' : this.state.selectedDate.toLocaleDateString() }\r\n          </Button>\r\n        </div>\r\n        { this.state.showCalendar && (\r\n          <Callout\r\n            isBeakVisible={ false }\r\n            className='ms-DatePicker-callout'\r\n            gapSpace={ 0 }\r\n            doNotLayer={ false }\r\n            targetElement={ this._calendarButtonElement }\r\n            directionalHint={ DirectionalHint.bottomLeftEdge }\r\n            onDismiss={ this._onDismiss }\r\n            setInitialFocus={ false }\r\n            >\r\n            <Calendar\r\n              onSelectDate={ this._onSelectDate }\r\n              onDismiss={ this._onDismiss }\r\n              isMonthPickerVisible={ true }\r\n              value={ this.state.selectedDate }\r\n              firstDayOfWeek={ DayOfWeek.Sunday }\r\n              strings={ DayPickerStrings }\r\n              >\r\n            </Calendar>\r\n          </Callout>\r\n        )\r\n        }\r\n      </div>\r\n    );\r\n  }\r\n\r\n  private _onClick(event: any) {\r\n    this.setState((prevState: ICalendarButtonExampleState) => {\r\n      prevState.showCalendar = !prevState.showCalendar;\r\n      return prevState;\r\n    });\r\n  }\r\n\r\n  private _onDismiss() {\r\n    this.setState((prevState: ICalendarButtonExampleState) => {\r\n      prevState.showCalendar = false;\r\n      return prevState;\r\n    });\r\n  }\r\n\r\n  private _onSelectDate(date: Date) {\r\n    this.setState((prevState: ICalendarButtonExampleState) => {\r\n      prevState.showCalendar = false;\r\n      prevState.selectedDate = date;\r\n      return prevState;\r\n    });\r\n  }\r\n}\r\n"; });