office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
1 lines • 2.54 kB
JavaScript
define([], function() { return "import * as React from 'react';\r\nimport {\r\n Calendar,\r\n DayOfWeek\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 ICalendarInlineExampleState {\r\n selectedDate: Date;\r\n}\r\n\r\nexport interface ICalendarInlineExampleProps {\r\n isMonthPickerVisible: boolean;\r\n}\r\n\r\nexport class CalendarInlineExample extends React.Component<ICalendarInlineExampleProps, ICalendarInlineExampleState> {\r\n public constructor() {\r\n super();\r\n\r\n this.state = {\r\n selectedDate: null\r\n };\r\n\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 let divStyle: React.CSSProperties = {\r\n height: '300px',\r\n width: '400px'\r\n };\r\n\r\n return (\r\n <div style={ divStyle }>\r\n <div>\r\n Selected date: <span>{ this.state.selectedDate == null ? 'Not set' : this.state.selectedDate.toLocaleString() }</span>\r\n </div>\r\n <Calendar\r\n onSelectDate={ this._onSelectDate }\r\n onDismiss={ this._onDismiss }\r\n isMonthPickerVisible={ this.props.isMonthPickerVisible }\r\n value={ this.state.selectedDate }\r\n firstDayOfWeek={ DayOfWeek.Sunday }\r\n strings={ DayPickerStrings }\r\n >\r\n </Calendar>\r\n </div>\r\n );\r\n }\r\n\r\n private _onDismiss() {\r\n this.setState((prevState: ICalendarInlineExampleState) => {\r\n return prevState;\r\n });\r\n }\r\n\r\n private _onSelectDate(date: Date) {\r\n this.setState((prevState: ICalendarInlineExampleState) => {\r\n prevState.selectedDate = date;\r\n return prevState;\r\n });\r\n }\r\n}\r\n"; });