office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
52 lines • 7.28 kB
JavaScript
import * as tslib_1 from "tslib";
import * as React from 'react';
import { ComponentPage, ExampleCard, PropertiesTableSet, PageMarkdown, } from '@uifabric/example-app-base';
import { DateRangeType, DayOfWeek } from 'office-ui-fabric-react/lib/Calendar';
import { CalendarButtonExample } from './examples/Calendar.Button.Example';
import { CalendarInlineExample } from './examples/Calendar.Inline.Example';
import { ComponentStatus } from '../../demo/ComponentStatus/ComponentStatus';
import { CalendarStatus } from './Calendar.checklist';
import { addMonths, addYears } from '../../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(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(ExampleCard, { title: 'Inline Calendar', code: CalendarInlineExampleCode },
React.createElement(CalendarInlineExample, { isMonthPickerVisible: false, dateRangeType: DateRangeType.Day, autoNavigateOnSelection: false, showGoToToday: true })),
React.createElement(ExampleCard, { title: 'Inline Calendar with overlayed month picker when header is clicked', code: CalendarInlineExampleCode },
React.createElement(CalendarInlineExample, { showMonthPickerAsOverlay: true, highlightCurrentMonth: false, highlightSelectedMonth: true, dateRangeType: DateRangeType.Day, autoNavigateOnSelection: false, showGoToToday: false })),
React.createElement(ExampleCard, { title: 'Inline Calendar with month picker', code: CalendarInlineExampleCode },
React.createElement(CalendarInlineExample, { dateRangeType: DateRangeType.Day, autoNavigateOnSelection: false, highlightCurrentMonth: false, highlightSelectedMonth: true, showGoToToday: true })),
React.createElement(ExampleCard, { title: 'Inline Calendar with week selection', code: CalendarInlineExampleCode },
React.createElement(CalendarInlineExample, { dateRangeType: DateRangeType.Week, autoNavigateOnSelection: true, highlightCurrentMonth: false, highlightSelectedMonth: true, showGoToToday: true, showNavigateButtons: true })),
React.createElement(ExampleCard, { title: 'Inline Calendar with month selection', code: CalendarInlineExampleCode },
React.createElement(CalendarInlineExample, { dateRangeType: DateRangeType.Month, autoNavigateOnSelection: true, highlightCurrentMonth: false, highlightSelectedMonth: true, showGoToToday: true, showNavigateButtons: true })),
React.createElement(ExampleCard, { title: 'Inline Calendar with week numbers', code: CalendarInlineExampleCode },
React.createElement(CalendarInlineExample, { isMonthPickerVisible: false, dateRangeType: DateRangeType.Day, autoNavigateOnSelection: false, showGoToToday: true, showWeekNumbers: true })),
React.createElement(ExampleCard, { title: 'Inline Calendar with 6 weeks display by default', code: CalendarInlineExampleCode },
React.createElement(CalendarInlineExample, { isMonthPickerVisible: false, dateRangeType: DateRangeType.Day, autoNavigateOnSelection: false, showGoToToday: true, showSixWeeksByDefault: true })),
React.createElement(ExampleCard, { title: 'Inline Calendar with month picker and no day picker', code: CalendarInlineExampleCode },
React.createElement(CalendarInlineExample, { dateRangeType: DateRangeType.Month, autoNavigateOnSelection: false, showGoToToday: true, highlightCurrentMonth: false, highlightSelectedMonth: true, isDayPickerVisible: false })),
React.createElement(ExampleCard, { title: 'Inline Calendar with date boundary (minDate, maxDate)', code: CalendarInlineExampleCode },
React.createElement(CalendarInlineExample, { dateRangeType: DateRangeType.Day, autoNavigateOnSelection: true, highlightCurrentMonth: false, highlightSelectedMonth: true, showGoToToday: false, minDate: addMonths(today, -1), maxDate: addYears(today, 1) })),
React.createElement(ExampleCard, { title: 'Calendar with selectableDays = [Tuesday, Wednesday, Friday, Saturday] provided, first day of week = Monday', code: CalendarButtonExampleCode },
React.createElement(CalendarInlineExample, { dateRangeType: DateRangeType.WorkWeek, firstDayOfWeek: DayOfWeek.Monday, autoNavigateOnSelection: true, highlightCurrentMonth: false, highlightSelectedMonth: true, showGoToToday: true, workWeekDays: [DayOfWeek.Tuesday, DayOfWeek.Saturday, DayOfWeek.Wednesday, DayOfWeek.Friday] })),
React.createElement(ExampleCard, { title: 'Calendar launched from a button', code: CalendarButtonExampleCode },
React.createElement(CalendarButtonExample, { highlightCurrentMonth: true })),
React.createElement(ExampleCard, { title: 'Month picker launched from a button', code: CalendarButtonExampleCode },
React.createElement(CalendarButtonExample, { isDayPickerVisible: false, highlightCurrentMonth: false, highlightSelectedMonth: true, buttonString: 'Click for Month Picker' })),
React.createElement(ExampleCard, { title: 'Calendar with overlayed month picker launched from a button', code: CalendarButtonExampleCode },
React.createElement(CalendarButtonExample, { showMonthPickerAsOverlay: true, highlightCurrentMonth: false, highlightSelectedMonth: true, buttonString: 'Click for Overlayed Day Picker and Month Picker' }))), propertiesTables: React.createElement(PropertiesTableSet, { sources: [
require('!raw-loader!office-ui-fabric-react/src/components/Calendar/Calendar.types.ts')
] }), overview: React.createElement(PageMarkdown, null, require('!raw-loader!office-ui-fabric-react/src/components/Calendar/docs/CalendarOverview.md')), bestPractices: React.createElement("div", null), dos: React.createElement(PageMarkdown, null, require('!raw-loader!office-ui-fabric-react/src/components/Calendar/docs/CalendarDos.md')), donts: React.createElement(PageMarkdown, null, require('!raw-loader!office-ui-fabric-react/src/components/Calendar/docs/CalendarDonts.md')), isHeaderVisible: this.props.isHeaderVisible, componentStatus: React.createElement(ComponentStatus, tslib_1.__assign({}, CalendarStatus)) }));
};
return CalendarPage;
}(React.Component));
export { CalendarPage };
//# sourceMappingURL=CalendarPage.js.map