office-ui-fabric-react/lib/components/Calendar/examples/Calendar.Button.Example.js

Reusable React components for building experiences for Office 365.

import * as tslib_1 from "tslib";
// @codepen
import * as React from 'react';
import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
import { Callout } from 'office-ui-fabric-react/lib/Callout';
import { Calendar, DayOfWeek } from 'office-ui-fabric-react/lib/Calendar';
import { FocusTrapZone } from 'office-ui-fabric-react/lib/FocusTrapZone';
var DayPickerStrings = {
    months: [
        'January',
        'February',
        'March',
        'April',
        'May',
        'June',
        'July',
        'August',
        'September',
        'October',
        'November',
        'December'
    ],
    shortMonths: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    days: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
    shortDays: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
    goToToday: 'Go to today'
};
var CalendarButtonExample = /** @class */ (function (_super) {
    tslib_1.__extends(CalendarButtonExample, _super);
    function CalendarButtonExample(props) {
        var _this = _super.call(this, props) || this;
        _this.state = {
            showCalendar: false,
            selectedDate: null
        };
        _this._onClick = _this._onClick.bind(_this);
        _this._onDismiss = _this._onDismiss.bind(_this);
        _this._onSelectDate = _this._onSelectDate.bind(_this);
        return _this;
    }
    CalendarButtonExample.prototype.render = function () {
        var _this = this;
        return (React.createElement("div", null,
            React.createElement("div", { ref: function (calendarBtn) { return (_this._calendarButtonElement = calendarBtn); } },
                React.createElement(DefaultButton, { onClick: this._onClick, text: !this.state.selectedDate ? this.props.buttonString : this.state.selectedDate.toLocaleDateString() })),
            this.state.showCalendar && (React.createElement(Callout, { isBeakVisible: false, className: "ms-DatePicker-callout", gapSpace: 0, doNotLayer: false, target: this._calendarButtonElement, directionalHint: 4 /* bottomLeftEdge */, onDismiss: this._onDismiss, setInitialFocus: true },
                React.createElement(FocusTrapZone, { isClickableOutsideFocusTrap: true },
                    React.createElement(Calendar, { onSelectDate: this._onSelectDate, onDismiss: this._onDismiss, isMonthPickerVisible: this.props.isMonthPickerVisible, value: this.state.selectedDate, firstDayOfWeek: DayOfWeek.Sunday, strings: DayPickerStrings, isDayPickerVisible: this.props.isDayPickerVisible, highlightCurrentMonth: this.props.highlightCurrentMonth, highlightSelectedMonth: this.props.highlightSelectedMonth, showMonthPickerAsOverlay: this.props.showMonthPickerAsOverlay, showGoToToday: this.props.showGoToToday }))))));
    };
    CalendarButtonExample.prototype._onClick = function (event) {
        this.setState(function (prevState) {
            prevState.showCalendar = !prevState.showCalendar;
            return prevState;
        });
    };
    CalendarButtonExample.prototype._onDismiss = function () {
        this.setState(function (prevState) {
            prevState.showCalendar = false;
            return prevState;
        });
    };
    CalendarButtonExample.prototype._onSelectDate = function (date) {
        this.setState(function (prevState) {
            prevState.showCalendar = false;
            prevState.selectedDate = date;
            return prevState;
        });
    };
    CalendarButtonExample.defaultProps = {
        showMonthPickerAsOverlay: false,
        isDayPickerVisible: true,
        isMonthPickerVisible: true,
        showGoToToday: true,
        buttonString: 'Click for Calendar'
    };
    return CalendarButtonExample;
}(React.Component));
export { CalendarButtonExample };
//# sourceMappingURL=Calendar.Button.Example.js.map