react-icons/ai#AiOutlineFullscreen JavaScript Examples

render() {
        const { fullPlot, fullTree, fullTreeToggle, fullDimensions, lang } = this.props
        if (fullPlot) return <div />

        const FullScreenIcon = fullTree ? AiOutlineFullscreenExit : AiOutlineFullscreen
        return (
            <div
                className="tree-wrap"
                style={{
                    height: !fullTree ? this.state.height : fullDimensions.height - 100,
                    width: !fullTree ? '100%' : fullDimensions.width + 100
                }}
            >
                <div className="tree-full-button">
                    <FullScreenIcon size={fullTree ? 30 : 20} onClick={fullTreeToggle} />
                </div>
                <div className="bubble-table-toggle-btn">
                    <RadioButton
                        texts={{ bubble: i18n.BUBBLES[lang], table: i18n.TABLE[lang] }}
                        selected={this.state.type}
                        onSelect={(s) => this.setState({ type: s })}
                        alwaysShow={true}
                    />
                </div>
                {this.state.type === 'bubble' && <BubblePlot {...this.props} />}
                {this.state.type === 'table' && <Table {...this.props} />}
            </div>
        )
    }

render() {
        const { plotType, data, lang, darkMode, fullPlot, fullTree, fullPlotToggle, fullDimensions } = this.props

        if (data == null || fullTree) return <div />

        const plotParameters = plotSpecificTypes[this.state.plotSpecificType]
        const plotDataAll = generatePlotData({
            ...this.props,
            plotSpecificType: this.state.plotSpecificType,
            plotDetails: this.state.plotDetails
        })
        const plotData = plotDataAll.plotData

        const isDataEmpty = ![ 'plot_subregion_active_stream', 'plot_subregion_stream' ].includes(plotType)
            ? plotData.map((d) => d.data.length).reduce((s, x) => s + x, 0) === 0
            : plotData.map((d) => Object.keys(d).length).reduce((s, x) => s + x, 0) === 0

        const tickValues = isDataEmpty ? 0 : plotDataAll.tickValues != null ? plotDataAll.tickValues : 5

        const FullScreenIcon = fullPlot ? AiOutlineFullscreenExit : AiOutlineFullscreen

        const plotProps = {
            ...this.props,
            plotParameters,
            plotDataAll,
            tickValues,
            plotTheme: plotTheme(darkMode, fullPlot)
        }

        return (
            <div
                className="plot-wrap"
                style={{
                    height: !fullPlot ? 'auto' : fullDimensions.height - 100,
                    width: !fullPlot ? '100%' : fullDimensions.width + 100
                }}
            >
                <PlotSelector
                    {...this.props}
                    {...this.state}
                    currentPlotType={plotType}
                    onPlotTypeChange={(plotType) => {
                        this.setSpecificPlotType(plotType, this.state.plotDetails)
                        this.props.handlePlotTypeChange(plotType)
                    }}
                />
                <div className="plot-with-nav-bar">
                    <PlotNavBar {...this.props} {...this.state} onSelect={this.onSelect} />
                    <div
                        style={{
                            height: !fullPlot ? this.state.height : fullDimensions.height - 125,
                            width: !fullPlot ? '100%' : fullDimensions.width - 70
                        }}
                    >
                        {isDataEmpty ? (
                            <div className="plot-no-data">
                                <span>{i18n.NO_DATA[lang]}</span>
                            </div>
                        ) : (
                            <div />
                        )}
                        {!isDataEmpty && <LinePlot {...plotProps} />}
                        {!isDataEmpty && <BumpPlot {...plotProps} />}
                        {!isDataEmpty && <StreamPlot offsetType={this.state.plotDetails.stream} {...plotProps} />}
                        <div
                            className="plot-full-button"
                            data-tip={!fullPlot && !isMobile && !isIPad13 ? i18n.PLOT_SETTINGS[lang] : ''}
                        >
                            <FullScreenIcon size={fullPlot ? 30 : 20} onClick={fullPlotToggle} />
                        </div>
                    </div>
                </div>
            </div>
        )
    }

export default function Calendar({ timetableState }) {
  // Set the initial date to max(start of sem, today)
  const startOfSemester = getStartOfSession()
  const initialDate =
    startOfSemester && startOfSemester.getTime() > new Date().getTime()
      ? startOfSemester
      : new Date();

  // Where the events are stored
  const events = useMemo(() => getEvents(timetableState), [timetableState])
  const [startTime, finishTime] = useMemo(() => getLocaleStartFinishTime(events, timetableState.timeZone), [events, timetableState.timeZone])

  const [fullScreen, setFullScreen] = useState(false)

  useEffect(() => {
    const func = () => setFullScreen(!fullScreen)
    document.addEventListener('fullscreenchange', func, false);
    return () => document.removeEventListener('fullscreenchange', func, false)
  }, [fullScreen])

  // Handler for calendar to display event content
  const getEventContent = useCallback(e => formatEventContent(timetableState, e), [timetableState])

  const fullScreenClick = useCallback(() => {
    if (fullScreen) document.exitFullscreen()
    else document.getElementsByClassName('fc')[0].requestFullscreen()
  }, [fullScreen])

  return <FullCalendar
    plugins={[bootstrapPlugin, dayGridPlugin, timeGridPlugin, listPlugin, rrulePlugin, luxonPlugin]}
    themeSystem='bootstrap'
    bootstrapFontAwesome={false}
    height='100%'
    expandRows={true}

    eventSources={events}

    headerToolbar={{
      start: 'prev,next',
      center: 'title',
      end: 'timeGridDay,timeGridWeek,dayGridMonth,listTwoDay,fullScreen'
    }}
    buttonText={{
      today: 'Today',
      prev: 'Back',
      next: 'Next',
      day: 'Day',
      week: 'Week',
      month: 'Month'
    }}
    customButtons={{
      fullScreen: {
        text: fullScreen ? <AiOutlineFullscreenExit size='1.5em' /> : <AiOutlineFullscreen size='1.5em' />,
        hint: fullScreen ? 'Exit FullScreen' : 'Enter FullScreen',
        click: fullScreenClick
      }
    }}

    views={{
      timeGridDay: {
        titleFormat: { year: 'numeric', month: 'short', day: 'numeric' },
        eventContent: getEventContent,
      },
      timeGridWeek: {
        weekends: true,
        dayHeaderFormat: { weekday: 'short' },
        eventContent: getEventContent,
      },
      listTwoDay: {
        type: 'list',
        duration: { days: 2 },
        buttonText: 'Agenda',
        listDayFormat: { weekday: 'long', month: 'short', day: 'numeric' },
        displayEventTime: true,
        weekends: true,
        eventContent: getEventContent,
      },
      dayGridMonth: {
        weekNumberFormat: { week: 'short' }
      }
    }}
    initialView={window.navigator.userAgent.includes('Mobi') ? 'listTwoDay' : 'timeGridWeek'}
    initialDate={initialDate}

    // timeGrid options
    allDaySlot={false}
    // Earliest business hour is 8am AEDT
    scrollTime={formatDate('2020-01-01T08:00+11:00', {
      hour: '2-digit',
      minute: '2-digit',
      second: '2-digit'
    })}
    scrollTimeReset={false}
    slotLabelClassNames={'slot-label'}
    nowIndicator
    navLinks
    // businessHours={{
    //   daysOfWeek: [1, 2, 3, 4, 5],
    //   startTime: '07:00',
    //   endTime: '19:00'
    // }}
    displayEventTime={false}
    defaultAllDay={false} // allDay=false required for non-string rrule inputs (eg Dates) https://github.com/fullcalendar/fullcalendar/issues/6689

    slotEventOverlap={false}


    // Week 1 = start of semester
    weekNumbers
    weekNumberCalculation={weekNumberCalculation}
    weekText='Week'
    firstDay={timetableState.weekStart}

    hiddenDays={timetableState.hiddenDays}

    fixedWeekCount={false}

    timeZone={timetableState.timeZone}

    slotMinTime={startTime}
    slotMaxTime={finishTime}

    eventSourceFailure={err => console.error(err.message)}
  />
}

render() {
        const { lang, dataLoaded, currentMap, fullMap, fullPlot, fullTree, darkMode } = this.state
        const fullScreenMode = fullMap ? 'map-full' : fullPlot ? 'plot-full' : fullTree ? 'tree-full' : ''
        const FullScreenIcon = fullMap ? AiOutlineFullscreenExit : AiOutlineFullscreen

        return (
            <div className={`App ${darkMode ? 'dark' : ''}`}>
                <Helmet>
                    <title>{i18n.COVID19[lang]}</title>
                </Helmet>
                {!dataLoaded ? (
                    <Loading />
                ) : (
                    <Fragment>
                        <Container className={`app-container ${fullScreenMode}`}>
                            <Row>
                                <Col lg={!fullMap ? 7 : 12}>
                                    <div className="header">
                                        <span className="header-icon" style={{ opacity: dataLoaded ? 1 : 0 }}>
                                            <Icon />
                                        </span>
                                        <span
                                            className="header-title"
                                            style={{ letterSpacing: lang === 'zh' ? '1px' : 'normal' }}
                                        >
                                            {i18n.COVID19[lang]}
                                        </span>
                                    </div>
                                    <NavBar
                                        {...this.state}
                                        scaleToggle={this.scaleToggle}
                                        languageToggle={this.languageToggle}
                                        darkModeToggle={this.darkModeToggle}
                                        reset={this.reset}
                                    />
                                    {!fullPlot &&
                                    !fullTree && (
                                        <Measure
                                            bounds
                                            onResize={(contentRect) => {
                                                this.setState({ mapDimensions: contentRect.bounds })
                                            }}
                                        >
                                            {({ measureRef }) => (
                                                <div
                                                    ref={measureRef}
                                                    className="map"
                                                    style={{
                                                        height: !fullMap
                                                            ? this.state.mapDimensions.width * 3 / 4
                                                            : this.state.fullDimensions.height,
                                                        width: !fullMap ? '100%' : this.state.fullDimensions.width
                                                    }}
                                                >
                                                    {currentMap === str.TRANSMISSION && (
                                                        <TransmissionNetwork
                                                            {...this.state}
                                                            regionToggle={this.regionToggle}
                                                            tooltipRebuild={this.tooltipRebuild}
                                                        />
                                                    )}
                                                    {currentMap !== str.TRANSMISSION && (
                                                        <Map
                                                            {...this.state}
                                                            handleMapZoomChange={this.handleMapZoomChange}
                                                            mapToggle={this.mapToggle}
                                                            regionToggle={this.regionToggle}
                                                            tooltipRebuild={this.tooltipRebuild}
                                                        />
                                                    )}
                                                    <div className="map-full-button">
                                                        <FullScreenIcon
                                                            size={fullMap ? 30 : 20}
                                                            onClick={this.fullMapToggle}
                                                        />
                                                    </div>
                                                </div>
                                            )}
                                        </Measure>
                                    )}
                                    <MapNavBar
                                        {...this.state}
                                        mapToggle={this.mapToggle}
                                        metricToggle={this.metricToggle}
                                        regionToggle={this.regionToggle}
                                    />
                                    <DateSlider
                                        {...this.state}
                                        handleDateChange={this.handleDateChange}
                                        handleTempDateChange={this.handleTempDateChange}
                                    />
                                    <AnimationController
                                        {...this.state}
                                        handleDateChange={this.handleDateChange}
                                        playingToggle={this.playingToggle}
                                    />
                                    <div className="footer-white" />
                                </Col>
                                {!fullMap && (
                                    <Col lg={!fullPlot && !fullTree ? 5 : 12} className="col-right">
                                        <Row style={{ display: 'flex', flexDirection: 'column', padding: 10 }}>
                                            <Region
                                                {...this.state}
                                                regionToggle={this.regionToggle}
                                                ReactTooltip={ReactTooltip}
                                            />
                                            <MainCounts {...this.state} />
                                            <Plot
                                                {...this.state}
                                                regionToggle={this.regionToggle}
                                                fullPlotToggle={this.fullPlotToggle}
                                                scaleToggle={this.scaleToggle}
                                                handlePlotTypeChange={this.handlePlotTypeChange}
                                            />
                                            <Tree
                                                {...this.state}
                                                regionToggle={this.regionToggle}
                                                fullTreeToggle={this.fullTreeToggle}
                                            />
                                            <div className="footer-placeholder" />
                                        </Row>
                                    </Col>
                                )}
                            </Row>
                        </Container>
                        <Footer {...this.state} />
                    </Fragment>
                )}
                <ReactTooltip className="plot-tooltip" type={darkMode ? 'dark' : 'light'} html={true} />
            </div>
        )
    }