office-ui-fabric-react/lib-commonjs/components/Calendar/CalendarPage.js

Reusable React components for building experiences for Office 365.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var example_app_base_1 = require("@uifabric/example-app-base");
var Calendar_1 = require("office-ui-fabric-react/lib/Calendar");
var Calendar_Button_Example_1 = require("./examples/Calendar.Button.Example");
var Calendar_Inline_Example_1 = require("./examples/Calendar.Inline.Example");
var ComponentStatus_1 = require("../../demo/ComponentStatus/ComponentStatus");
var Calendar_checklist_1 = require("./Calendar.checklist");
var DateMath_1 = require("../../utilities/dateMath/DateMath");
var CalendarButtonExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Calendar/examples/Calendar.Button.Example.tsx');
var CalendarInlineExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Calendar/examples/Calendar.Inline.Example.tsx');
var CalendarPage = /** @class */ (function (_super) {
    tslib_1.__extends(CalendarPage, _super);
    function CalendarPage() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    CalendarPage.prototype.render = function () {
        var today = new Date(Date.now());
        return (React.createElement(example_app_base_1.ComponentPage, { title: 'Calendar', componentName: 'CalendarExample', componentUrl: 'https://github.com/OfficeDev/office-ui-fabric-react/tree/master/packages/office-ui-fabric-react/src/components/Calendar', exampleCards: React.createElement("div", null,
                React.createElement(example_app_base_1.ExampleCard, { title: 'Inline Calendar', code: CalendarInlineExampleCode },
                    React.createElement(Calendar_Inline_Example_1.CalendarInlineExample, { isMonthPickerVisible: false, dateRangeType: Calendar_1.DateRangeType.Day, autoNavigateOnSelection: false, showGoToToday: true })),
                React.createElement(example_app_base_1.ExampleCard, { title: 'Inline Calendar with overlayed month picker when header is clicked', code: CalendarInlineExampleCode },
                    React.createElement(Calendar_Inline_Example_1.CalendarInlineExample, { showMonthPickerAsOverlay: true, highlightCurrentMonth: false, highlightSelectedMonth: true, dateRangeType: Calendar_1.DateRangeType.Day, autoNavigateOnSelection: false, showGoToToday: false })),
                React.createElement(example_app_base_1.ExampleCard, { title: 'Inline Calendar with month picker', code: CalendarInlineExampleCode },
                    React.createElement(Calendar_Inline_Example_1.CalendarInlineExample, { dateRangeType: Calendar_1.DateRangeType.Day, autoNavigateOnSelection: false, highlightCurrentMonth: false, highlightSelectedMonth: true, showGoToToday: true })),
                React.createElement(example_app_base_1.ExampleCard, { title: 'Inline Calendar with week selection', code: CalendarInlineExampleCode },
                    React.createElement(Calendar_Inline_Example_1.CalendarInlineExample, { dateRangeType: Calendar_1.DateRangeType.Week, autoNavigateOnSelection: true, highlightCurrentMonth: false, highlightSelectedMonth: true, showGoToToday: true, showNavigateButtons: true })),
                React.createElement(example_app_base_1.ExampleCard, { title: 'Inline Calendar with month selection', code: CalendarInlineExampleCode },
                    React.createElement(Calendar_Inline_Example_1.CalendarInlineExample, { dateRangeType: Calendar_1.DateRangeType.Month, autoNavigateOnSelection: true, highlightCurrentMonth: false, highlightSelectedMonth: true, showGoToToday: true, showNavigateButtons: true })),
                React.createElement(example_app_base_1.ExampleCard, { title: 'Inline Calendar with week numbers', code: CalendarInlineExampleCode },
                    React.createElement(Calendar_Inline_Example_1.CalendarInlineExample, { isMonthPickerVisible: false, dateRangeType: Calendar_1.DateRangeType.Day, autoNavigateOnSelection: false, showGoToToday: true, showWeekNumbers: true })),
                React.createElement(example_app_base_1.ExampleCard, { title: 'Inline Calendar with 6 weeks display by default', code: CalendarInlineExampleCode },
                    React.createElement(Calendar_Inline_Example_1.CalendarInlineExample, { isMonthPickerVisible: false, dateRangeType: Calendar_1.DateRangeType.Day, autoNavigateOnSelection: false, showGoToToday: true, showSixWeeksByDefault: true })),
                React.createElement(example_app_base_1.ExampleCard, { title: 'Inline Calendar with month picker and no day picker', code: CalendarInlineExampleCode },
                    React.createElement(Calendar_Inline_Example_1.CalendarInlineExample, { dateRangeType: Calendar_1.DateRangeType.Month, autoNavigateOnSelection: false, showGoToToday: true, highlightCurrentMonth: false, highlightSelectedMonth: true, isDayPickerVisible: false })),
                React.createElement(example_app_base_1.ExampleCard, { title: 'Inline Calendar with date boundary (minDate, maxDate)', code: CalendarInlineExampleCode },
                    React.createElement(Calendar_Inline_Example_1.CalendarInlineExample, { dateRangeType: Calendar_1.DateRangeType.Day, autoNavigateOnSelection: true, highlightCurrentMonth: false, highlightSelectedMonth: true, showGoToToday: false, minDate: DateMath_1.addMonths(today, -1), maxDate: DateMath_1.addYears(today, 1) })),
                React.createElement(example_app_base_1.ExampleCard, { title: 'Calendar with selectableDays = [Tuesday, Wednesday, Friday, Saturday] provided, first day of week = Monday', code: CalendarButtonExampleCode },
                    React.createElement(Calendar_Inline_Example_1.CalendarInlineExample, { dateRangeType: Calendar_1.DateRangeType.WorkWeek, firstDayOfWeek: Calendar_1.DayOfWeek.Monday, autoNavigateOnSelection: true, highlightCurrentMonth: false, highlightSelectedMonth: true, showGoToToday: true, workWeekDays: [Calendar_1.DayOfWeek.Tuesday, Calendar_1.DayOfWeek.Saturday, Calendar_1.DayOfWeek.Wednesday, Calendar_1.DayOfWeek.Friday] })),
                React.createElement(example_app_base_1.ExampleCard, { title: 'Calendar launched from a button', code: CalendarButtonExampleCode },
                    React.createElement(Calendar_Button_Example_1.CalendarButtonExample, { highlightCurrentMonth: true })),
                React.createElement(example_app_base_1.ExampleCard, { title: 'Month picker launched from a button', code: CalendarButtonExampleCode },
                    React.createElement(Calendar_Button_Example_1.CalendarButtonExample, { isDayPickerVisible: false, highlightCurrentMonth: false, highlightSelectedMonth: true, buttonString: 'Click for Month Picker' })),
                React.createElement(example_app_base_1.ExampleCard, { title: 'Calendar with overlayed month picker launched from a button', code: CalendarButtonExampleCode },
                    React.createElement(Calendar_Button_Example_1.CalendarButtonExample, { showMonthPickerAsOverlay: true, highlightCurrentMonth: false, highlightSelectedMonth: true, buttonString: 'Click for Overlayed Day Picker and Month Picker' }))), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
                    require('!raw-loader!office-ui-fabric-react/src/components/Calendar/Calendar.types.ts')
                ] }), overview: React.createElement(example_app_base_1.PageMarkdown, null, require('!raw-loader!office-ui-fabric-react/src/components/Calendar/docs/CalendarOverview.md')), bestPractices: React.createElement("div", null), dos: React.createElement(example_app_base_1.PageMarkdown, null, require('!raw-loader!office-ui-fabric-react/src/components/Calendar/docs/CalendarDos.md')), donts: React.createElement(example_app_base_1.PageMarkdown, null, require('!raw-loader!office-ui-fabric-react/src/components/Calendar/docs/CalendarDonts.md')), isHeaderVisible: this.props.isHeaderVisible, componentStatus: React.createElement(ComponentStatus_1.ComponentStatus, tslib_1.__assign({}, Calendar_checklist_1.CalendarStatus)) }));
    };
    return CalendarPage;
}(React.Component));
exports.CalendarPage = CalendarPage;
//# sourceMappingURL=CalendarPage.js.map