in legacy/src/Calendar/Views.tsx [307:439]
public render(): JSX.Element {
return (
<div>
{this.state.showMonthPicker && (
<Callout
isBeakVisible={false}
target={this.state.monthPickerTarget}
onDismiss={() => {
this.setState({ showMonthPicker: false });
}}>
<PickList
selectionMode={SelectionMode.single}
items={this.getMonthPickerOptions()}
getListItem={this.getMonthPickerListItem.bind(this)}
onSelectionChanged={selection => {
const selectedItem = selection.selectedItems[0] as MonthAndYear;
this.setState({ showMonthPicker: false, calendar: selection.selectedItems[0] });
this.calendarView.getCalendar().goTo(new Date(selectedItem.year, selectedItem.month, 1, 0, 0, 0));
}}
selectedItems={[this.state.calendar]}
/>
</Callout>
)}
<Hub
hideFullScreenToggle={true}
hubViewState={this.hubViewState}
viewActions={[
{
key: "move-today",
name: "Today",
important: true,
onClick: this._onCommandClick,
},
{
key: "move-left",
name: "Prev",
important: true,
iconProps: {
iconName: "ChevronLeft",
},
onClick: this._onCommandClick,
},
{
key: "move-right",
name: "Next",
important: true,
iconProps: {
iconName: "ChevronRight",
},
onClick: this._onCommandClick,
},
]}
commands={[
{
key: "new-item",
name: "New Item",
important: true,
iconProps: {
iconName: "Add",
},
onClick: this._onCommandClick,
},
{
key: "refresh",
name: "Refresh",
important: true,
iconProps: {
iconName: "Refresh",
},
onClick: this._onCommandClick,
},
]}>
<HubHeader
breadcrumbItems={this.getHeaderItems()}
ref={header => {
this.header = header;
}}
headerItemPicker={{
isSearchable: true,
searchTextPlaceholder: "Filter...",
getItems: () => {
return new Promise<WebApiTeam[]>((resolve, reject) => {
Tfs_Core_WebApi.getClient()
.getTeams(VSS.getWebContext().project.id, 1000 as any)
.then(result => {
result.sort((a, b) => {
return a.name.toUpperCase().localeCompare(b.name.toUpperCase());
});
resolve(result);
}, reject);
});
},
getListItem: (item: WebApiTeam) => {
if (item) {
return {
name: item.name,
key: item.id,
};
}
return {
name: "Select a team",
key: "selectteammessage",
};
},
selectedItem: this.props.selectedTeam,
onSelectedItemChanged: (selectedTeam: WebApiTeam) => {
this.setSelectedTeam(selectedTeam);
},
}}
/>
{this.props.selectedTeam && (
<PivotBarItem name="Calendar" itemKey="calendar">
<div
className="calendar-canvas"
id="calendarCanvas"
ref={elem => {
if (elem) {
this.calendarDiv = elem;
if (this.needToEnhance) {
this.enhanceControls();
this.needToEnhance = false;
} else {
this.needToEnhance = true;
}
}
}}
/>
</PivotBarItem>
)}
</Hub>
</div>
);
}