[Fabric] Add Calendar component

apps/demo/src/app/app.component.html

@@ -62,4 +62,6 @@ <h2>Getting up and running...</h2>
       <fab-command-bar-item key="full-screen" [iconOnly]="true" [iconProps]="{ iconName: fullScreenIcon }" (click)="toggleFullScreen()"></fab-command-bar-item>
     </far-items>
   </fab-command-bar>
+
+  <fab-calendar [strings]="strings" (onSelectDate)="onSelectDate($event)"></fab-calendar>
 </div>

apps/demo/src/app/app.component.ts

@@ -1,33 +1,5 @@
-import {
-  ChangeDetectorRef,
-  ViewEncapsulation,
-  Component,
-  ComponentFactoryResolver,
-  Injector,
-  Input,
-  ComponentRef,
-  TemplateRef,
-  ViewChild,
-  AfterViewInit,
-} from '@angular/core';
-import {
-  DialogType,
-  ITheme,
-  IChoiceGroupProps,
-  SpinnerSize,
-  PersonaSize,
-  PersonaPresence,
-  PivotLinkSize,
-  SelectableOptionMenuItemType,
-  PanelType,
-  ICommandBarItemProps,
-  IBreadcrumbItem,
-  IButtonProps,
-  Button,
-  MessageBarType,
-  ShimmerElementType,
-  IContextualMenuProps,
-} from 'office-ui-fabric-react';
+import { ChangeDetectorRef, Component, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core';
+import { ICalendarStrings, IContextualMenuProps } from 'office-ui-fabric-react';
 
 @Component({
   selector: 'app-root',
@@ -41,6 +13,32 @@ export class AppComponent {
 
   runDisabled: boolean;
 
+  strings: ICalendarStrings = {
+    months: [
+      'January',
+      'February',
+      'March',
+      'April',
+      'May',
+      'June',
+      'July',
+      'August',
+      'September',
+      'October',
+      'November',
+      'December',
+    ],
+
+    shortMonths: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+
+    days: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+
+    shortDays: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
+
+    goToToday: 'Go to today',
+    weekNumberFormatString: 'Week number {0}',
+  };
+
   onNewClicked() {
     console.log('New clicked');
   }
@@ -66,6 +64,10 @@ export class AppComponent {
     console.log('custom item clicked', item);
   }
 
+  onSelectDate($event) {
+    console.log($event);
+  }
+
   constructor(private readonly cd: ChangeDetectorRef) {}
 
   customItemCount = 1;

apps/demo/src/app/app.module.ts

@@ -2,8 +2,8 @@ import { AngularReactBrowserModule } from '@angular-react/core';
 import {
   FabBreadcrumbModule,
   FabButtonModule,
+  FabCalendarModule,
   FabCalloutModule,
-  FabModalModule,
   FabCheckboxModule,
   FabChoiceGroupModule,
   FabComboBoxModule,
@@ -13,20 +13,21 @@ import {
   FabDividerModule,
   FabFabricModule,
   FabGroupedListModule,
+  FabHoverCardModule,
   FabIconModule,
   FabImageModule,
+  FabLinkModule,
+  FabMessageBarModule,
+  FabModalModule,
   FabPanelModule,
   FabPersonaModule,
-  FabSpinnerModule,
-  FabMessageBarModule,
-  FabLinkModule,
-  FabToggleModule,
   FabPivotModule,
-  FabHoverCardModule,
-  FabTooltipModule,
+  FabSearchBoxModule,
   FabShimmerModule,
   FabSliderModule,
-  FabSearchBoxModule,
+  FabSpinnerModule,
+  FabToggleModule,
+  FabTooltipModule,
 } from '@angular-react/fabric';
 import { NgModule } from '@angular/core';
 import { NxModule } from '@nrwl/nx';
@@ -65,6 +66,7 @@ import { CounterComponent } from './counter/counter.component';
     FabShimmerModule,
     FabSliderModule,
     FabSearchBoxModule,
+    FabCalendarModule,
   ],
   declarations: [AppComponent, CounterComponent],
   bootstrap: [AppComponent],

libs/fabric/src/lib/components/calendar/calendar.component.ts

@@ -0,0 +1,134 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License.
+
+import { ReactWrapperComponent } from '@angular-react/core';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  Output,
+  Renderer2,
+  ViewChild,
+} from '@angular/core';
+import { ICalendarProps } from 'office-ui-fabric-react/lib/Calendar';
+
+@Component({
+  selector: 'fab-calendar',
+  exportAs: 'fabCalendar',
+  template: `
+    <Calendar
+      #reactNode
+      [componentRef]="componentRef"
+      [className]="className"
+      [isMonthPickerVisible]="isMonthPickerVisible"
+      [isDayPickerVisible]="isDayPickerVisible"
+      [showMonthPickerAsOverlay]="showMonthPickerAsOverlay"
+      [today]="today"
+      [value]="value"
+      [firstDayOfWeek]="firstDayOfWeek"
+      [dateRangeType]="dateRangeType"
+      [autoNavigateOnSelection]="autoNavigateOnSelection"
+      [showGoToToday]="showGoToToday"
+      [strings]="strings"
+      [highlightCurrentMonth]="highlightCurrentMonth"
+      [highlightSelectedMonth]="highlightSelectedMonth"
+      [navigationIcons]="navigationIcons"
+      [showWeekNumbers]="showWeekNumbers"
+      [firstWeekOfYear]="firstWeekOfYear"
+      [dateTimeFormatter]="dateTimeFormatter"
+      [minDate]="minDate"
+      [maxDate]="maxDate"
+      [showSixWeeksByDefault]="showSixWeeksByDefault"
+      [workWeekDays]="workWeekDays"
+      [selectDateOnClick]="selectDateOnClick"
+      [showCloseButton]="showCloseButton"
+      [allFocusable]="allFocusable"
+      [SelectDate]="onSelectDateHandler"
+      [Dismiss]="onDismissHandler">
+    </Calendar>
+  `,
+  styles: ['react-renderer'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FabCalendarComponent extends ReactWrapperComponent<ICalendarProps> {
+  @ViewChild('reactNode')
+  protected reactNodeRef: ElementRef;
+
+  @Input()
+  componentRef?: ICalendarProps['componentRef'];
+  @Input()
+  className?: ICalendarProps['className'];
+  @Input()
+  isMonthPickerVisible?: ICalendarProps['isMonthPickerVisible'];
+  @Input()
+  isDayPickerVisible?: ICalendarProps['isDayPickerVisible'];
+  @Input()
+  showMonthPickerAsOverlay?: ICalendarProps['showMonthPickerAsOverlay'];
+  @Input()
+  today?: ICalendarProps['today'];
+  @Input()
+  value?: ICalendarProps['value'];
+  @Input()
+  firstDayOfWeek?: ICalendarProps['firstDayOfWeek'];
+  @Input()
+  dateRangeType?: ICalendarProps['dateRangeType'];
+  @Input()
+  autoNavigateOnSelection?: ICalendarProps['autoNavigateOnSelection'];
+  @Input()
+  showGoToToday?: ICalendarProps['showGoToToday'];
+  @Input()
+  strings: ICalendarProps['strings'];
+  @Input()
+  highlightCurrentMonth?: ICalendarProps['highlightCurrentMonth'];
+  @Input()
+  highlightSelectedMonth?: ICalendarProps['highlightSelectedMonth'];
+  @Input()
+  navigationIcons?: ICalendarProps['navigationIcons'];
+  @Input()
+  showWeekNumbers?: ICalendarProps['showWeekNumbers'];
+  @Input()
+  firstWeekOfYear?: ICalendarProps['firstWeekOfYear'];
+  @Input()
+  dateTimeFormatter?: ICalendarProps['dateTimeFormatter'];
+  @Input()
+  minDate?: ICalendarProps['minDate'];
+  @Input()
+  maxDate?: ICalendarProps['maxDate'];
+  @Input()
+  showSixWeeksByDefault?: ICalendarProps['showSixWeeksByDefault'];
+  @Input()
+  workWeekDays?: ICalendarProps['workWeekDays'];
+  @Input()
+  selectDateOnClick?: ICalendarProps['selectDateOnClick'];
+  @Input()
+  showCloseButton?: ICalendarProps['showCloseButton'];
+  @Input()
+  allFocusable?: ICalendarProps['allFocusable'];
+
+  @Output()
+  readonly onSelectDate = new EventEmitter<{ date: Date; selectedDateRangeArray?: Date[] }>();
+  @Output()
+  readonly onDismiss = new EventEmitter<void>();
+
+  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
+    super(elementRef, changeDetectorRef, renderer);
+
+    // coming from React context - we need to bind to this so we can access the Angular Component properties
+    this.onSelectDateHandler = this.onSelectDateHandler.bind(this);
+    this.onDismissHandler = this.onDismissHandler.bind(this);
+  }
+
+  onSelectDateHandler(date: Date, selectedDateRangeArray?: Date[]) {
+    this.onSelectDate.emit({
+      date,
+      selectedDateRangeArray,
+    });
+  }
+
+  onDismissHandler() {
+    this.onDismiss.emit();
+  }
+}

libs/fabric/src/lib/components/calendar/calendar.module.ts

@@ -0,0 +1,28 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License.
+
+import { registerElement } from '@angular-react/core';
+import { CommonModule } from '@angular/common';
+import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
+import * as CalendarCss from 'office-ui-fabric-react/lib-amd/components/Calendar/Calendar.scss';
+import { Calendar } from 'office-ui-fabric-react/lib/Calendar';
+import { noop } from '../../utils/noop';
+import { FabCalendarComponent } from './calendar.component';
+
+// Dummy action to force CalendarCss to load and not be tree-shaken away.
+noop(CalendarCss);
+
+const components = [FabCalendarComponent];
+
+@NgModule({
+  imports: [CommonModule],
+  declarations: components,
+  exports: components,
+  schemas: [NO_ERRORS_SCHEMA],
+})
+export class FabCalendarModule {
+  constructor() {
+    // Add any React elements to the registry (used by the renderer).
+    registerElement('Calendar', () => Calendar);
+  }
+}

libs/fabric/src/lib/components/calendar/index.ts

@@ -0,0 +1,4 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License.
+
+export * from './public-api';

libs/fabric/src/lib/components/calendar/public-api.ts

@@ -0,0 +1,5 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License.
+
+export * from './calendar.component';
+export * from './calendar.module';

libs/fabric/src/public-api.ts

@@ -3,6 +3,7 @@
 
 export * from './lib/components/breadcrumb/public-api';
 export * from './lib/components/button/public-api';
+export * from './lib/components/calendar/public-api';
 export * from './lib/components/callout/public-api';
 export * from './lib/components/checkbox/public-api';
 export * from './lib/components/choice-group/public-api';