【问题标题】:How do I create a link to add an entry to a calendar?如何创建链接以将条目添加到日历?
【发布时间】:2011-08-15 11:16:21
【问题描述】:

我正在为这家夜总会工作,目前正在为他们建立一个网站,他们举办了很多活动,他们的网站围绕活动建立了很多,今天他们为每个活动制作了一个 Facebook 活动,但这将是杀手有一个“添加到我的日历”按钮,可将其添加到您的 iCal 或 Google 日历(甚至可能是 Outlook)中。

我已经设法弄清楚如何制作日历提要,但随后它将作为新日历添加,唯一的好处是人们可以“订阅活动”,但是为每个活动都有一个日历很麻烦.所以我想知道如何实现一个功能,让他们轻松地将其添加到他们的主日历中。像 mailto 一样思考:链接,但如果可能的话,用于日历。

另外,当我谈到这个主题时,有人知道是否可以自动将事件从 Facebook 导入 WordPress 或将事件从 WordPress 导出到 Facebook,这会很棒,但这并不重要。

【问题讨论】:

标签: html calendar google-calendar-api icalendar


【解决方案1】:

Dave 帖子中的链接很棒。只是将有关谷歌链接的一些技术细节放入此处的答案中:

Google 日历链接

<a href="http://www.google.com/calendar/event?action=TEMPLATE&text=Example%20Event&dates=20131124T010000Z/20131124T020000Z&details=Event%20Details%20Here&location=123%20Main%20St%2C%20Example%2C%20NY">Add to gCal</a>

参数是:

  • action=TEMPLATE(必需)
  • 文本(事件的 URL 编码名称)
  • 日期(ISO 日期格式,开始日期/结束日期 - 必须同时具有开始时间和结束时间 - 按钮生成器会让您将结束时间留空,但您必须有一个,否则它将无法工作。)
    • 使用用户的时区:20131208T160000/20131208T180000
    • 使用全球时间,转换为UTC,然后使用20131208T160000Z/20131208T180000Z
    • 全天事件,您可以使用20131208/20131209 - 请注意按钮生成器会出错。您必须使用以下日期作为一天全天活动的结束日期,或者将结束日期设置为 +1 天。
  • 详细信息(url 编码的事件描述/详细信息)
  • 位置(事件的 url 编码位置 - 确保它是谷歌地图可以轻松读取的地址)

2018 年 2 月更新:

这是一个新的链接结构,似乎支持新的 google 版本的谷歌日历,无需 API 交互:

https://calendar.google.com/calendar/r/eventedit?text=My+Custom+Event&dates=20180512T230000Z/20180513T030000Z&details=For+details,+link+here:+https://example.com/tickets-43251101208&location=Garage+Boston+-+20+Linden+Street+-+Allston,+MA+02134

新的基本网址:https://calendar.google.com/calendar/r/eventedit

新参数:

  • 文本(事件名称)
  • 日期(ISO 日期格式,开始日期/结束日期 - 必须 有开始和结束时间)
    • 具有开始/结束时间的事件:20131208T160000/20131208T180000
    • 全天事件,您可以使用 20131208/20131209 - 结束日期必须比您希望的结束日期 +1 天
  • ctz (timezone 例如 America/New_York - 留空以使用用户的默认时区。强烈建议在几乎所有情况下都包含此内容。例如,视频会议的提醒:如果三个不同时区的人点击这个链接并在星期二上午 10:00 为他们“自己的”设置一个提醒,这不会很好。)
  • 详细信息(url 编码的事件描述/详细信息)
  • 位置(事件的 url 编码位置 - 确保它是谷歌地图可以轻松读取的地址)
  • 添加(以逗号分隔的电子邮件列表 - 将客人添加到您的新活动中)

注意事项:

  • 上面的旧 url 结构现在重定向到这里
  • 支持https
  • 更好的时区交易
  • 除了%20urlencoderawurlencode 在 php 中 - 两者都有效)之外,还接受 + 空间

【讨论】:

  • 如果有人感兴趣,我创建了一个 php 函数来构建这种类型的谷歌日历链接:gist.github.com/squarecandy/26611bbcfc63f9c7e3a7dc45e9145133
  • 另外值得注意的是,没有为我设置时区,除非我同时指定时区日期和 ctz 参数。更多信息在这里:zaclee.net/php/…
  • @squarecandy 知道如何让它一次设置多个日期吗?例如,如果您有周二 - 周四这样的范围,但想在日历中将其显示为 3 个单独的事件?
  • @garek007 我不认为这是可能的。那必须是3个不同的事件。如果在在线版的谷歌日历“添加事件”屏幕上有一项您无法完成的任务,您就不能使用这种技术。您可能知道如何使用 Google Calendar API 一次添加 3 个事件,但这只是链接到单个事件的“添加事件”。
【解决方案2】:

更新(免费供个人使用):
现在支持 HTTPS

虽然我在下面详细说明每项服务的操作方法的答案将起作用,但 IMO 现在与 AddThisEvent [https://addthisevent.com] 这样的第三方合作要容易得多。它使您可以自定义许多选项以及添加到 Facebook 等等。 不幸的是,他们现在已将其作为非个人用途的付费服务,并强制执行。

我认为还有其他类似的第三方解决方案,但我只能谈论这个,到目前为止它对我们来说效果很好。


对于“添加到我的 Google 日历”,他们曾经有一个您可以使用的代码生成器表单,但后来取消了它。有关 Google 日历链接的更多详细信息,请参阅squarecandy's answer below

对于 Outlook,这有点复杂,但基本上您需要使用事件数据创建一个 .vcs 文件,然后创建一个指向该文件的链接。 Step-by-step instructions here.

对于 iCal 链接,您可以使用 PHP 类 like this one,或关注 this page's instructions 了解如何创建 ics 文件(iCal 文件)。

【讨论】:

  • 谢谢,可惜没有通用标准,例如 mailto: 用于电子邮件。
  • Google 的“事件发布者指南”页面似乎不再提供这种 URL 生成形式(不幸的是,Google 文档的性质不断变化),但 @squarecandy 的 URL 格式仍然可以正常工作(至少适用于 Google 日历)!
  • 好吧,他们自己的表单甚至没有生成有效的链接,所以这可能就是他们删除它的原因。 :)
【解决方案3】:

要添加到 squarecandy 的谷歌日历贡献,这里是全新的

展望日历格式(无需创建.ics)!!

<a href="https://bay02.calendar.live.com/calendar/calendar.aspx?rru=addevent&dtstart=20151119T140000Z&dtend=20151119T160000Z&summary=Summary+of+the+event&location=Location+of+the+event&description=example+text.&allday=false&uid=">add to Outlook calendar</a>

test it

最好对摘要、位置和描述变量的值进行 url_encode。

为了知识,

雅虎日历格式

<a href="https://calendar.yahoo.com/?v=60&view=d&type=20&title=Summary+of+the+event&st=20151119T090000&et=20151119T110000&desc=example+text.%0A%0AThis+is+the+text+entered+in+the+event+description+field.&in_loc=Location+of+the+event&uid=">add to Yahoo calendar</a>

test it

在没有第三方的情况下这样做有很多优势,例如在电子邮件中使用它。

【讨论】:

  • 看起来 Outlook 的链接不再有效。它添加了位置并打开了新活动表单,但不填写任何其他字段。
  • 要扩展 @Steve 的评论,Outlook 链接甚至不再解析到服务器 - 我收到 DNS 解析错误。
  • 对不起,这个答案需要更新才能有效,被否决。
  • 不要再工作了
【解决方案4】:

这是一个 Add to Calendar 服务,用于在

上添加事件
  1. 苹果日历
  2. 谷歌日历
  3. 展望
  4. Outlook Online
  5. 雅虎!日历

网站和日历上的事件的“添加到日历”按钮易于安装、独立于语言、时区和 DST 兼容。它可以在所有现代浏览器、平板电脑和移动设备以及 Apple 日历、Google 日历、Outlook、Outlook.com 和 Yahoo 日历中完美运行。

<div title="Add to Calendar" class="addeventatc">
    Add to Calendar
    <span class="start">03/01/2018 08:00 AM</span>
    <span class="end">03/01/2018 10:00 AM</span>
    <span class="timezone">America/Los_Angeles</span>
    <span class="title">Summary of the event</span>
    <span class="description">Description of the event</span>
    <span class="location">Location of the event</span>
</div>

【讨论】:

  • 非常棒。与addevent.com 非常相似,但我认为样式选项更多,而且它是麻省理工学院许可的!所以这绝对是我的选择。谢谢你的链接。
  • 现在已与 addevent.com 合并
【解决方案5】:

Litmus 有一篇很棒的文章详细介绍了如何构建一个适用于主要电子邮件和日历客户端的简洁解决方案,包括满足使用来自不同供应商的客户端的用户的需求。

考虑到这个空间的非标准化性质,这绝非微不足道,但如果你愿意花几天时间卷起袖子,你可以得到一些效果很好且不附带每月价格标签和使用限制!

https://www.litmus.com/blog/how-to-create-an-add-to-calendar-link-for-your-emails/

【讨论】:

    【解决方案6】:

    您可以让程序创建日历的 .ics (iCal) 版本,然后您可以将此 .ics 导入您喜欢的任何日历程序:Google、Outlook 等。

    我知道这篇文章很老了,所以我不会费心输入任何代码。但是,如果您希望我提供如何执行此操作的大纲,请对此发表评论。

    【讨论】:

    • 如果可以的话,我真的很感激这个代码的一个例子,尝试用 Outlook、Gmail 和 iCal 做到这一点
    猜你喜欢
    • 1970-01-01
    • 2010-12-17
    • 1970-01-01
    • 2023-03-18
    • 2017-05-29
    • 2020-10-01
    • 2012-05-16
    • 1970-01-01
    相关资源
    最近更新 更多