react-bootstrap-with-full-calendar-v5

App.tsx

import React, {useRef, useState} from 'react'
import FullCalendar from '@fullcalendar/react' // must go before plugins
import dayGridPlugin from '@fullcalendar/daygrid' // a plugin!
import CSS from 'csstype'
import {Overlay, OverlayTrigger, Popover, Tooltip} from "react-bootstrap";
import {EventSourceInput} from "@fullcalendar/common";
import 'bootstrap/dist/css/bootstrap.min.css';
import ReactDOM from "react-dom";

// height只能在calendar內控制
const myCal: CSS.Properties = {
  marginTop: '30px',
  marginLeft: '30px',
  marginRight: '30px',
}

const myEvents: EventSourceInput = [{
    title: 'First event', date: '2022-03-15'
}]

function App() {
    // https://stackoverflow.com/questions/60846899/react-bootstrap-popover-in-fullcalendar-react
    const eventContent = (info: any): any => {
        const tooltip = (
            <Tooltip placement="right" className="in" id="tooltip-right">
                Tooltip right
            </Tooltip>
        )

        const popover = (
            <Popover id="popover-basic">
                <Popover.Header as="h3">{info.event.title}</Popover.Header>
                <Popover.Body>
                    Lead Auditor: <br />
                </Popover.Body>
            </Popover>
        );

        let evtId = "event-" + info.event.id;
        const content = (
            // <OverlayTrigger placement="bottom" overlay={popover}>
            <OverlayTrigger placement="bottom" overlay={tooltip}>
                {/* 把消失的event字樣補回來 */}
                <div className="fc-content" id={evtId} style={{color: "white"}}>
                    <span className="fc-title">{info.event.title}</span>
                </div>
            </OverlayTrigger>
        );
        ReactDOM.render(content, info.el);
    }

    return (
      <div style={myCal}>
        <FullCalendar
            plugins={[ dayGridPlugin ]}
            initialView="dayGridMonth"
            height={'90vh'}
            eventMouseEnter={eventContent}
            initialEvents={myEvents}
        />
      </div>
  );
}

export default App

App2.tsx

import React, {useRef, useState} from 'react'
import FullCalendar from '@fullcalendar/react' // must go before plugins
import dayGridPlugin from '@fullcalendar/daygrid' // a plugin!
import CSS from 'csstype'
import {Overlay, OverlayTrigger, Popover, Tooltip} from "react-bootstrap";
import {EventSourceInput} from "@fullcalendar/common";
import 'bootstrap/dist/css/bootstrap.min.css';
import ReactDOM from "react-dom";

// height只能在calendar內控制
const myCal: CSS.Properties = {
  marginTop: '30px',
  marginLeft: '30px',
  marginRight: '30px',
}

const myEvents: EventSourceInput = [{
    title: 'First event', date: '2022-03-15'
}]

function App() {
    const target = useRef<null|HTMLElement>(null);
    const [show, setShow] = useState(false);

    const eventContent = (info: any): any => {
        const content =
            <>
                <Overlay target={target.current} show={show} placement="bottom">
                    {(props) => (
                        <Tooltip id="overlay-example" {...props}>
                            My Tooltip
                        </Tooltip>
                    )}
                </Overlay>
                <div className="fc-content" style={{color: "white"}} >
                    <span className="fc-title">{info.event.title}</span>
                </div>
            </>

        return content
    }

    return (
      <div style={myCal}>
        <FullCalendar
            plugins={[ dayGridPlugin ]}
            initialView="dayGridMonth"
            height={'90vh'}
            eventContent={eventContent}
            eventMouseEnter={(info)=> {
                target.current = info.el
                setShow(true)
            }}
            eventMouseLeave={()=>setShow(false)}
            initialEvents={myEvents}
        />
      </div>
  );
}

export default App

package.json

{
  "name": "ipad_warm_water",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@fullcalendar/daygrid": "^5.10.1",
    "@fullcalendar/react": "^5.10.1",
    "@testing-library/jest-dom": "^5.16.2",
    "@testing-library/react": "^12.1.4",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.4.1",
    "@types/node": "^16.11.26",
    "@types/react": "^17.0.40",
    "@types/react-dom": "^17.0.13",
    "bootstrap": "^5.1.3",
    "react": "^17.0.2",
    "react-bootstrap": "^2.2.1",
    "react-dom": "^17.0.2",
    "react-scripts": "5.0.0",
    "typescript": "^4.6.2",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

如果要用單純bootstrap寫可以參考
https://codesandbox.io/s/0m03n?file=/src/App.js

由於react-bootstrap的tooltip是包好的component在full-calendar下強制render會跳出warning

Warning: render(...): Replacing React-rendered children with a new root component. If you intended to update the children of this node, you should instead have the existing children update their state and render the new components instead of calling ReactDOM.render.

App2使用overlay + target的方式來避免強制re-render會跳出的warning