import { __extends } from "tslib";
import * as React from 'react';
import { Calendar, DateRangeType, DayOfWeek, defaultDayPickerStrings, } from '@uifabric/date-time';
import * as styles from './Calendar.Example.scss';
var CalendarInlineCustomDayCellRefExample = /** @class */ (function (_super) {
    __extends(CalendarInlineCustomDayCellRefExample, _super);
    function CalendarInlineCustomDayCellRefExample(props) {
        var _this = _super.call(this, props) || this;
        _this._onSelectDate = function (date) {
            _this.setState(function (prevState) {
                return {
                    selectedDate: date,
                };
            });
        };
        _this.state = {
            selectedDate: new Date(),
        };
        return _this;
    }
    CalendarInlineCustomDayCellRefExample.prototype.render = function () {
        return (React.createElement("div", { className: styles.wrapper },
            React.createElement("div", null,
                "Selected date(s):",
                ' ',
                React.createElement("span", null, !this.state.selectedDate ? 'Not set' : this.state.selectedDate.toLocaleString())),
            React.createElement(Calendar, { dateRangeType: DateRangeType.Day, highlightCurrentMonth: false, highlightSelectedMonth: true, showGoToToday: true, calendarDayProps: {
                    customDayCellRef: function (element, date, classNames) {
                        if (element) {
                            element.title = 'custom title from customDayCellRef: ' + date.toString();
                            if (date.getDay() === 0 || date.getDay() === 6) {
                                classNames.dayOutsideBounds && element.classList.add(classNames.dayOutsideBounds);
                                element.children[0].disabled = true;
                            }
                        }
                    },
                }, onSelectDate: this._onSelectDate, value: this.state.selectedDate, firstDayOfWeek: DayOfWeek.Sunday, strings: defaultDayPickerStrings })));
    };
    return CalendarInlineCustomDayCellRefExample;
}(React.Component));
export { CalendarInlineCustomDayCellRefExample };
//# sourceMappingURL=Calendar.Inline.CustomDayCellRef.Example.js.map