office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
47 lines • 8.32 kB
JavaScript
define(["require", "exports", "tslib", "react", "@uifabric/example-app-base", "office-ui-fabric-react/lib/Calendar", "./examples/Calendar.Button.Example", "./examples/Calendar.Inline.Example", "../../demo/ComponentStatus/ComponentStatus", "./Calendar.checklist", "../../utilities/dateMath/DateMath"], function (require, exports, tslib_1, React, example_app_base_1, Calendar_1, Calendar_Button_Example_1, Calendar_Inline_Example_1, ComponentStatus_1, Calendar_checklist_1, DateMath_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
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