Skip to content

Commit e08298e

Browse files
bengrybengry
authored
[Fabric] Add Calendar component (#35)
1 parent e286189 commit e08298e

File tree

8 files changed

+216
-38
lines changed

8 files changed

+216
-38
lines changed

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,4 +62,6 @@ <h2>Getting up and running...</h2>
6262
<fab-command-bar-item key="full-screen" [iconOnly]="true" [iconProps]="{ iconName: fullScreenIcon }" (click)="toggleFullScreen()"></fab-command-bar-item>
6363
</far-items>
6464
</fab-command-bar>
65+
66+
<fab-calendar [strings]="strings" (onSelectDate)="onSelectDate($event)"></fab-calendar>
6567
</div>

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

Lines changed: 32 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,5 @@
1-
import {
2-
ChangeDetectorRef,
3-
ViewEncapsulation,
4-
Component,
5-
ComponentFactoryResolver,
6-
Injector,
7-
Input,
8-
ComponentRef,
9-
TemplateRef,
10-
ViewChild,
11-
AfterViewInit,
12-
} from '@angular/core';
13-
import {
14-
DialogType,
15-
ITheme,
16-
IChoiceGroupProps,
17-
SpinnerSize,
18-
PersonaSize,
19-
PersonaPresence,
20-
PivotLinkSize,
21-
SelectableOptionMenuItemType,
22-
PanelType,
23-
ICommandBarItemProps,
24-
IBreadcrumbItem,
25-
IButtonProps,
26-
Button,
27-
MessageBarType,
28-
ShimmerElementType,
29-
IContextualMenuProps,
30-
} from 'office-ui-fabric-react';
1+
import { ChangeDetectorRef, Component, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core';
2+
import { ICalendarStrings, IContextualMenuProps } from 'office-ui-fabric-react';
313

324
@Component({
335
selector: 'app-root',
@@ -41,6 +13,32 @@ export class AppComponent {
4113

4214
runDisabled: boolean;
4315

16+
strings: ICalendarStrings = {
17+
months: [
18+
'January',
19+
'February',
20+
'March',
21+
'April',
22+
'May',
23+
'June',
24+
'July',
25+
'August',
26+
'September',
27+
'October',
28+
'November',
29+
'December',
30+
],
31+
32+
shortMonths: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
33+
34+
days: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
35+
36+
shortDays: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
37+
38+
goToToday: 'Go to today',
39+
weekNumberFormatString: 'Week number {0}',
40+
};
41+
4442
onNewClicked() {
4543
console.log('New clicked');
4644
}
@@ -66,6 +64,10 @@ export class AppComponent {
6664
console.log('custom item clicked', item);
6765
}
6866

67+
onSelectDate($event) {
68+
console.log($event);
69+
}
70+
6971
constructor(private readonly cd: ChangeDetectorRef) {}
7072

7173
customItemCount = 1;

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

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@ import { AngularReactBrowserModule } from '@angular-react/core';
22
import {
33
FabBreadcrumbModule,
44
FabButtonModule,
5+
FabCalendarModule,
56
FabCalloutModule,
6-
FabModalModule,
77
FabCheckboxModule,
88
FabChoiceGroupModule,
99
FabComboBoxModule,
@@ -13,20 +13,21 @@ import {
1313
FabDividerModule,
1414
FabFabricModule,
1515
FabGroupedListModule,
16+
FabHoverCardModule,
1617
FabIconModule,
1718
FabImageModule,
19+
FabLinkModule,
20+
FabMessageBarModule,
21+
FabModalModule,
1822
FabPanelModule,
1923
FabPersonaModule,
20-
FabSpinnerModule,
21-
FabMessageBarModule,
22-
FabLinkModule,
23-
FabToggleModule,
2424
FabPivotModule,
25-
FabHoverCardModule,
26-
FabTooltipModule,
25+
FabSearchBoxModule,
2726
FabShimmerModule,
2827
FabSliderModule,
29-
FabSearchBoxModule,
28+
FabSpinnerModule,
29+
FabToggleModule,
30+
FabTooltipModule,
3031
} from '@angular-react/fabric';
3132
import { NgModule } from '@angular/core';
3233
import { NxModule } from '@nrwl/nx';
@@ -65,6 +66,7 @@ import { CounterComponent } from './counter/counter.component';
6566
FabShimmerModule,
6667
FabSliderModule,
6768
FabSearchBoxModule,
69+
FabCalendarModule,
6870
],
6971
declarations: [AppComponent, CounterComponent],
7072
bootstrap: [AppComponent],

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

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
// Copyright (c) Microsoft Corporation. All rights reserved.
2+
// Licensed under the MIT License.
3+
4+
import { ReactWrapperComponent } from '@angular-react/core';
5+
import {
6+
ChangeDetectionStrategy,
7+
ChangeDetectorRef,
8+
Component,
9+
ElementRef,
10+
EventEmitter,
11+
Input,
12+
Output,
13+
Renderer2,
14+
ViewChild,
15+
} from '@angular/core';
16+
import { ICalendarProps } from 'office-ui-fabric-react/lib/Calendar';
17+
18+
@Component({
19+
selector: 'fab-calendar',
20+
exportAs: 'fabCalendar',
21+
template: `
22+
<Calendar
23+
#reactNode
24+
[componentRef]="componentRef"
25+
[className]="className"
26+
[isMonthPickerVisible]="isMonthPickerVisible"
27+
[isDayPickerVisible]="isDayPickerVisible"
28+
[showMonthPickerAsOverlay]="showMonthPickerAsOverlay"
29+
[today]="today"
30+
[value]="value"
31+
[firstDayOfWeek]="firstDayOfWeek"
32+
[dateRangeType]="dateRangeType"
33+
[autoNavigateOnSelection]="autoNavigateOnSelection"
34+
[showGoToToday]="showGoToToday"
35+
[strings]="strings"
36+
[highlightCurrentMonth]="highlightCurrentMonth"
37+
[highlightSelectedMonth]="highlightSelectedMonth"
38+
[navigationIcons]="navigationIcons"
39+
[showWeekNumbers]="showWeekNumbers"
40+
[firstWeekOfYear]="firstWeekOfYear"
41+
[dateTimeFormatter]="dateTimeFormatter"
42+
[minDate]="minDate"
43+
[maxDate]="maxDate"
44+
[showSixWeeksByDefault]="showSixWeeksByDefault"
45+
[workWeekDays]="workWeekDays"
46+
[selectDateOnClick]="selectDateOnClick"
47+
[showCloseButton]="showCloseButton"
48+
[allFocusable]="allFocusable"
49+
[SelectDate]="onSelectDateHandler"
50+
[Dismiss]="onDismissHandler">
51+
</Calendar>
52+
`,
53+
styles: ['react-renderer'],
54+
changeDetection: ChangeDetectionStrategy.OnPush,
55+
})
56+
export class FabCalendarComponent extends ReactWrapperComponent<ICalendarProps> {
57+
@ViewChild('reactNode')
58+
protected reactNodeRef: ElementRef;
59+
60+
@Input()
61+
componentRef?: ICalendarProps['componentRef'];
62+
@Input()
63+
className?: ICalendarProps['className'];
64+
@Input()
65+
isMonthPickerVisible?: ICalendarProps['isMonthPickerVisible'];
66+
@Input()
67+
isDayPickerVisible?: ICalendarProps['isDayPickerVisible'];
68+
@Input()
69+
showMonthPickerAsOverlay?: ICalendarProps['showMonthPickerAsOverlay'];
70+
@Input()
71+
today?: ICalendarProps['today'];
72+
@Input()
73+
value?: ICalendarProps['value'];
74+
@Input()
75+
firstDayOfWeek?: ICalendarProps['firstDayOfWeek'];
76+
@Input()
77+
dateRangeType?: ICalendarProps['dateRangeType'];
78+
@Input()
79+
autoNavigateOnSelection?: ICalendarProps['autoNavigateOnSelection'];
80+
@Input()
81+
showGoToToday?: ICalendarProps['showGoToToday'];
82+
@Input()
83+
strings: ICalendarProps['strings'];
84+
@Input()
85+
highlightCurrentMonth?: ICalendarProps['highlightCurrentMonth'];
86+
@Input()
87+
highlightSelectedMonth?: ICalendarProps['highlightSelectedMonth'];
88+
@Input()
89+
navigationIcons?: ICalendarProps['navigationIcons'];
90+
@Input()
91+
showWeekNumbers?: ICalendarProps['showWeekNumbers'];
92+
@Input()
93+
firstWeekOfYear?: ICalendarProps['firstWeekOfYear'];
94+
@Input()
95+
dateTimeFormatter?: ICalendarProps['dateTimeFormatter'];
96+
@Input()
97+
minDate?: ICalendarProps['minDate'];
98+
@Input()
99+
maxDate?: ICalendarProps['maxDate'];
100+
@Input()
101+
showSixWeeksByDefault?: ICalendarProps['showSixWeeksByDefault'];
102+
@Input()
103+
workWeekDays?: ICalendarProps['workWeekDays'];
104+
@Input()
105+
selectDateOnClick?: ICalendarProps['selectDateOnClick'];
106+
@Input()
107+
showCloseButton?: ICalendarProps['showCloseButton'];
108+
@Input()
109+
allFocusable?: ICalendarProps['allFocusable'];
110+
111+
@Output()
112+
readonly onSelectDate = new EventEmitter<{ date: Date; selectedDateRangeArray?: Date[] }>();
113+
@Output()
114+
readonly onDismiss = new EventEmitter<void>();
115+
116+
constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
117+
super(elementRef, changeDetectorRef, renderer);
118+
119+
// coming from React context - we need to bind to this so we can access the Angular Component properties
120+
this.onSelectDateHandler = this.onSelectDateHandler.bind(this);
121+
this.onDismissHandler = this.onDismissHandler.bind(this);
122+
}
123+
124+
onSelectDateHandler(date: Date, selectedDateRangeArray?: Date[]) {
125+
this.onSelectDate.emit({
126+
date,
127+
selectedDateRangeArray,
128+
});
129+
}
130+
131+
onDismissHandler() {
132+
this.onDismiss.emit();
133+
}
134+
}

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

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
// Copyright (c) Microsoft Corporation. All rights reserved.
2+
// Licensed under the MIT License.
3+
4+
import { registerElement } from '@angular-react/core';
5+
import { CommonModule } from '@angular/common';
6+
import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
7+
import * as CalendarCss from 'office-ui-fabric-react/lib-amd/components/Calendar/Calendar.scss';
8+
import { Calendar } from 'office-ui-fabric-react/lib/Calendar';
9+
import { noop } from '../../utils/noop';
10+
import { FabCalendarComponent } from './calendar.component';
11+
12+
// Dummy action to force CalendarCss to load and not be tree-shaken away.
13+
noop(CalendarCss);
14+
15+
const components = [FabCalendarComponent];
16+
17+
@NgModule({
18+
imports: [CommonModule],
19+
declarations: components,
20+
exports: components,
21+
schemas: [NO_ERRORS_SCHEMA],
22+
})
23+
export class FabCalendarModule {
24+
constructor() {
25+
// Add any React elements to the registry (used by the renderer).
26+
registerElement('Calendar', () => Calendar);
27+
}
28+
}

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
// Copyright (c) Microsoft Corporation. All rights reserved.
2+
// Licensed under the MIT License.
3+
4+
export * from './public-api';

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
// Copyright (c) Microsoft Corporation. All rights reserved.
2+
// Licensed under the MIT License.
3+
4+
export * from './calendar.component';
5+
export * from './calendar.module';

‎libs/fabric/src/public-api.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33

44
export * from './lib/components/breadcrumb/public-api';
55
export * from './lib/components/button/public-api';
6+
export * from './lib/components/calendar/public-api';
67
export * from './lib/components/callout/public-api';
78
export * from './lib/components/checkbox/public-api';
89
export * from './lib/components/choice-group/public-api';

0 commit comments

Comments
 (0)