ant*_*elm 5 javascript widget reactjs next.js calendly
我正在尝试将日历嵌入到我的 nextjs 项目中。
但不确定如何去做。理想情况下，我只是将其嵌入到单个页面上（而不是嵌入到_appor中_document）
这是我到目前为止所得到的：
import Script from 'next/script';
import React from 'react';
const Page = () => {
Calendly.initInlineWidget({
url: 'https://calendly.com/mycalendlyaccount/30min?month=2022-05'
});
return (
<div>
<Script src="https://assets.calendly.com/assets/external/widget.js" />
<div
className="calendly-inline-widget"
style="min-width:320px;height:580px;"
data-auto-load="false"></div>
</div>
);
};
export default Page;
这显然是行不通的。我真的不知道该放在哪里：
Calendly.initInlineWidget({
url: 'https://calendly.com/mycalendlyaccount/30min?month=2022-05'
});
我发现他们在我上面链接的网站上的示例在这方面非常没有帮助。有人可以给我提示吗？
快速尝试了这个，它似乎工作得很好，根据需要进行调整：
import Head from 'next/head';
[...]
useEffect(() => {
window.Calendly.initInlineWidget({
url: 'https://calendly.com/my-calendar/30min?month=2022-05',
parentElement: document.getElementById('calendly-inline-widget')
});
}, [])
return (
<>
<Head>
<script src="https://assets.calendly.com/assets/external/widget.js"></script>
</Head>
<>
<div
id="calendly-inline-widget"
style={{minWidth: 320, height: 580}}
data-auto-load="false"
>
</div>
</>
[...]