import * as React from 'react';
import { Calendar, DateRangeType } from '@fluentui/react';
export var CalendarInlineMonthOnlyExample = function () {
    var _a = React.useState(), selectedDateRange = _a[0], setSelectedDateRange = _a[1];
    var _b = React.useState(), selectedDate = _b[0], setSelectedDate = _b[1];
    var onSelectDate = React.useCallback(function (date, dateRangeArray) {
        setSelectedDate(date);
        setSelectedDateRange(dateRangeArray);
    }, []);
    var dateRangeString = 'Not set';
    if (selectedDateRange) {
        var rangeStart = selectedDateRange[0];
        var rangeEnd = selectedDateRange[selectedDateRange.length - 1];
        dateRangeString = rangeStart.toLocaleDateString() + '-' + rangeEnd.toLocaleDateString();
    }
    return (React.createElement("div", { style: { height: 'auto' } },
        React.createElement("div", null,
            "Selected date: ",
            (selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.toLocaleString()) || 'Not set'),
        React.createElement("div", null,
            "Selected range: ",
            dateRangeString),
        React.createElement(Calendar, { dateRangeType: DateRangeType.Month, showGoToToday: true, highlightSelectedMonth: true, isDayPickerVisible: false, onSelectDate: onSelectDate, value: selectedDate })));
};
//# sourceMappingURL=Calendar.Inline.MonthOnly.Example.js.map