public render()

in src/Calendar.tsx [150:268]
119 lines of code
6 McCabe index (conditional complexity)

    public render(): JSX.Element {
        return (
            <Page className="flex-grow flex-row">
                <div className="flex-column scroll-hidden calendar-area">
                    <CustomHeader className="bolt-header-with-commandbar">
                        <HeaderTitleArea className="flex-grow">
                            <div className="flex-grow">
                                <Observer currentMonthAndYear={this.currentMonthAndYear}>
                                    {(props: { currentMonthAndYear: MonthAndYear }) => {
                                        return (
                                            <Dropdown
                                                items={this.getMonthPickerOptions()}
                                                key={props.currentMonthAndYear.month}
                                                onSelect={this.onSelectMonthYear}
                                                placeholder={monthAndYearToString(props.currentMonthAndYear)}
                                                renderExpandable={expandableProps => (
                                                    <DropdownExpandableButton hideDropdownIcon={true} {...expandableProps} />
                                                )}
                                                width={200}
                                            />
                                        );
                                    }}
                                </Observer>
                                <Icon ariaLabel="Video icon" iconName="ChevronRight" />
                                <Observer teams={this.teams}>
                                    {(props: { teams: WebApiTeam[] }) => {
                                        return props.teams === [] ? null : (
                                            <Dropdown
                                                items={this.getTeamPickerOptions()}
                                                onSelect={this.onSelectTeam}
                                                placeholder={this.selectedTeamName}
                                                renderExpandable={expandableProps => <DropdownExpandableButton {...expandableProps} />}
                                                width={200}
                                            />
                                        );
                                    }}
                                </Observer>
                            </div>
                        </HeaderTitleArea>
                        <HeaderCommandBar items={this.commandBarItems} />
                    </CustomHeader>
                    <Observer display={this.displayCalendar}>
                        {(props: { display: boolean }) => {
                            return props.display ? (
                                <div className="calendar-component">
                                    <FullCalendar
                                        defaultView="dayGridMonth"
                                        editable={true}
                                        eventClick={this.onEventClick}
                                        eventDrop={this.onEventDrop}
                                        eventRender={this.eventRender}
                                        eventResize={this.onEventResize}
                                        eventSources={[
                                            { events: this.freeFormEventSource.getEvents },
                                            { events: this.vsoCapacityEventSource.getEvents }
                                        ]}
                                        firstDay={localeData(navigator.language).firstDayOfWeek()}
                                        header={false}
                                        height={this.getCalendarHeight()}
                                        plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
                                        ref={this.calendarComponentRef}
                                        select={this.onSelectCalendarDates}
                                        selectable={true}
                                    />
                                </div>
                            ) : null;
                        }}
                    </Observer>
                </div>
                <SummaryComponent capacityEventSource={this.vsoCapacityEventSource} freeFormEventSource={this.freeFormEventSource} />
                <Observer anchorElement={this.anchorElement}>
                    {(props: { anchorElement: HTMLElement | undefined }) => {
                        return props.anchorElement ? (
                            <ContextualMenu
                                anchorElement={props.anchorElement}
                                anchorOffset={{ horizontal: 4, vertical: 4 }}
                                anchorOrigin={{ horizontal: Location.start, vertical: Location.start }}
                                key={this.selectedEndDate!.toString()}
                                menuProps={{
                                    id: "foo",
                                    items: [
                                        { id: "event", text: "Add event", iconProps: { iconName: "Add" }, onActivate: this.onClickAddEvent },
                                        { id: "dayOff", text: "Add days off", iconProps: { iconName: "Clock" }, onActivate: this.onClickAddDaysOff }
                                    ]
                                }}
                                onDismiss={() => {
                                    this.anchorElement.value = undefined;
                                }}
                            />
                        ) : null;
                    }}
                </Observer>
                <Observer dialog={this.openDialog}>
                    {(props: { dialog: Dialogs }) => {
                        return props.dialog === Dialogs.NewDaysOffDialog ? (
                            <AddEditDaysOffDialog
                                calendarApi={this.getCalendarApi()}
                                end={this.selectedEndDate}
                                event={this.eventToEdit}
                                eventSource={this.vsoCapacityEventSource}
                                members={this.members}
                                onDismiss={this.onDialogDismiss}
                                start={this.selectedStartDate}
                            />
                        ) : props.dialog === Dialogs.NewEventDialog ? (
                            <AddEditEventDialog
                                calendarApi={this.getCalendarApi()}
                                end={this.selectedEndDate}
                                eventApi={this.eventApi}
                                eventSource={this.freeFormEventSource}
                                onDismiss={this.onDialogDismiss}
                                start={this.selectedStartDate}
                            />
                        ) : null;
                    }}
                </Observer>
            </Page>
        );
    }