标签: calendly
当嵌入式 Calendly 小部件中安排事件时，如何运行代码？
当我使用 Calendly 安排活动时，我使用 Calendly API 令牌显示活动创建日期，但该日期仅在重新加载页面后显示，而不是我希望在安排活动后在控制台中更新一次。
下面是代码。
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { InlineWidget } from 'react-calendly';
const Calendly = () => {
const [state] = useState()
useEffect(() => {
axios({
method: 'get',
url: 'https://v1.nocodeapi.com/user/calendly/hobiiHVeoqPxvtTc',
}).then(function (response) {
// handle success
console.log(response.data.collection[response.data.collection.length - 1].created_at);
}).catch(function (error) {
// handle error
console.log(error);
})
}, [state])
return (
<div>
<InlineWidget url="https://calendly.com/user/15min"
styles={{
height: '1000px'
}}
pageSettings={{
backgroundColor: 'ffffff',
hideEventTypeDetails: false,
hideLandingPageDetails: false,
primaryColor: '00a2ff', …推荐指数
解决办法
查看次数
calendly.com 集成到自定义表单中（无 iframe）
有没有人使用过没有嵌入 iframe 的日历或类似的预订服务？所以我需要有一个自定义的 html 表单，然后，基于他们的 rest api（如果他们有的话） 1. 在初始页面加载时预填充日期和时间字段，2. 当用户选择一天时，检查当天的可用时间 3. 当所有内容都被选中并转发以接收回复时，一切正常，以便我可以继续进行（这是一个多步骤表格）。
或者至少如果我使用 iframe 嵌入选项来知道它是否得到确认？
以下是示例图像：
推荐指数
解决办法
查看次数
Calendly API 为用户预订会议
我一直在阅读Calendly API文档，并且试图弄清楚是否有一种方法可以以编程方式为用户创建会议事件。
我们的网站上安装了对讲机，但我们想要一种更本地化的方法来安排会议。有没有办法使用循环方法通过 api 创建与 Calendly 的会议。不确定如何通过阅读上面链接的文档来实现。
推荐指数
解决办法
查看次数
如何从嵌入的 Calendly 日程中删除滚动条？
我已将日历调度程序嵌入到我的 html、css 网站中，但它包含自己的滚动条，这会给网站功能带来问题。我该如何删除滚动条？
Calendly 嵌入代码
<!-- Calendly inline widget begin -->
<div class="calendly-inline-widget" data-url="https://calendly.com/kumaladevelopment/60min" style="min-width:320px;height:630px;"></div>
<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js" async></script>
<!-- Calendly inline widget end -->
推荐指数
解决办法
查看次数
在 NextJs 中嵌入 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'
});
我发现他们在我上面链接的网站上的示例在这方面非常没有帮助。有人可以给我提示吗？
推荐指数
解决办法
查看次数
Calendly Widget 在 IE 中不起作用（Angular App）
我将 Calendly 小部件嵌入到一个简单的 Angular 应用程序中。它适用于 Chrome、Firefox 和 Edge，但在 IE 中只显示一个空白的白框。
该网站的工作网址是https://cei-demo.firebaseapp.com/schedule-an-appointment
我曾尝试使用 innerHTML 从组件而不是在模板中呈现 HTML 代码。我有同样的问题。
calendly.component.html
<div class="my-5 p-3 container bg-white text-dark">
<div class="calendly-inline-widget" data-url="https://calendly.com/test-cei" style="min-width:320px;height:700px;"></div>
</div>
index.html（body 标签正上方）
<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js"></script>
我希望小部件显示在所有浏览器中。
下面是响应 Dmitry Pashkevich 的代码：
组件.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-calendly',
templateUrl: './calendly.component.html',
styleUrls: ['./calendly.component.css']
})
export class CalendlyComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
组件.html
<div class="my-5 p-3 container bg-white text-dark">
<div class="calendly-inline-widget" style="min-width:320px;height:580px;" data-auto-load="false">
</div> …推荐指数
解决办法
查看次数
WKWebView addEventListener 未接收 Calendly 事件
我正在尝试在 WKWebView 中使用 Calendly 并在用户创建约会时接收事件。应用程序成功接收message事件，但 Calendly 事件未出现。
这是代码：
import UIKit
import WebKit
class ViewController: UIViewController, WKScriptMessageHandler {
var webView: WKWebView!
var count = 0
var html = """
<html>
<head>
<meta name='viewport' content='width=device-width' />
</head>
<!-- Calendly inline widget begin -->
<div class="calendly-inline-widget" data-auto-load="false">
<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js"></script>
<script>
Calendly.initInlineWidget({
url: 'https://calendly.com/XXX',
prefill: {
name: "John Doe",
email: "john@joe2.com",
customAnswers: {
a1: "yes"
}
}
});
</script>
</div>
<!-- Calendly inline widget end -->
</html>
"""
override func viewDidLoad() …推荐指数
解决办法
查看次数
实时页面刷新后，日历小部件无法工作
日历小部件首先可以工作，但是如果您刷新页面，它就会停止工作，但只有在网站上线时才会停止工作。在本地开发中，不会出现这样的问题。
还注意到，当我通过导航路由到该页面时，它可以工作。但如果我直接输入特定页面的链接，则不起作用。
这是代码：
<template>
<client-only>
<vue-calendly url="link" :height="650"></vue-calendly>
</client-only>
</template>
<script>
import Vue from 'vue';
export default {
created() {
if (process.isClient) {
const VueCalendly = require('vue-calendly').default;
Vue.use(VueCalendly);
}
}
};
</script>
Vue 应用程序在 Gridsome 上运行，因此它是 SSR。我将小部件设置为仅在客户端显示。不确定是什么问题。
推荐指数
解决办法
查看次数
如何使用 Angular 12 嵌入 Calendly
我正在尝试将日历小部件嵌入到我的角度应用程序中，但我发现它不能始终如一地工作。
首先，我将此行添加到组件的 HTML 中：
<div class="calendly-inline-widget" data-url="https://calendly.com/my-calendar-link" style="min-width:320px;height:630px;"></div>
并将这一行添加到index.html：
<script src="https://assets.calendly.com/assets/external/widget.js" async></script>
这最初有效，但每当页面重新加载时，嵌入的日历就会消失。
通过阅读 Calendly 文档中的高级嵌入选项，我尝试了一种略有不同的方法，我的ngOnInit()函数如下所示：
ngOnInit(): void {
Calendly.initInlineWidget({
url: 'https://calendly.com/my-calendar-link',
parentElement: document.querySelector('.calendly-inline-widget'),
});
}
我还添加data-auto-load="false"到 HTML 中的 div，但收到错误消息“找不到名称‘Calendly’”，并且我不确定应该从哪里声明或导入 Calendly。
关于如何让日历正常工作有什么建议吗？
推荐指数
解决办法
查看次数