如何创建用于向日历添加条目的链接?

时间:2011-04-29 12:15:07

标签: html web calendar google-calendar-api icalendar

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

我已经设法弄清楚如何制作日历Feed但是它会被添加为新的日历,唯一的好处是人们可以“订阅活动”但是每个活动都有一个日历非常混乱。所以我想知道如何实现一个功能,让他们轻松地将它添加到他们的主日历。想想像mailto:链接,但是如果可能的话,可以用于日历。

此外,如果有人知道是否可以自动将Facebook中的事件导入WordPress,或者将事件从WordPress导出到Facebook,那将是很好的,但这并不是那么重要。

8 个答案:

答案 0 :(得分:62)

戴夫的帖子中的链接很棒。只是将关于谷歌链接的一些技术细节放到SO上的答案:

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(必填)
  • text(事件的url编码名称)
  • 日期(ISO日期格式,startdate / enddate - 必须同时包含开始和结束时间 - 按钮生成器将允许您将结束时间留空,但您必须有一个或它不起作用。)
    • 使用用户的时区: 20131208T160000 / 20131208T180000
    • 使用全球时间,转换为UTC,然后使用 20131208T160000Z / 20131208T180000Z
    • 全天活动,您可以使用 20131208/20131209 - 请注意按钮生成器出错了。您必须使用以下日期作为一天全天活动的结束日期,或者您希望结束日期为+1天。
  • 详细信息(网址编码事件描述/详细信息)
  • 位置(网址编码事件的位置 - 确保它是Google地图可以轻松阅读的地址)

2018年2月更新:

这是一个新的链接结构,似乎支持谷歌日历的新谷歌版本,无需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

新参数:

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

注意:

  • 上面的旧网址结构现在重定向到这里
  • 支持https
  • 更好地处理时区
  • 除了+(php中的%20 vs urlencode之外还接受rawurlencode空格 - 两者都有效)

答案 1 :(得分:42)

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

虽然我在下面详细说明了每项服务的操作方法,但IMO现在可以更轻松地使用像AddThisEvent [https://addthisevent.com]这样的第三方。它允许您自定义许多选项以及添加到Facebook等。 不幸的是,他们现在已将其作为个人使用以外的任何其他服务而付费服务,并强制执行此操作。

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


对于“添加到我的Google日历”,他们曾经使用过您可以使用的代码生成器表单,但此后又将其删除了。有关Google日历链接的详细信息,请参阅squarecandy's answer below

对于 Outlook ,这是一个更复杂的BIT,但基本上你需要创建一个包含事件数据的.vcs文件,并只是建立一个指向该文件的链接。 Step-by-step instructions here

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

答案 2 :(得分:8)

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

OUTLOOK CALENDAR 格式(无需创建.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摘要,位置和描述变量的值。

为了知识,

YAHOO CALENDAR 格式

<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

在没有第三方的情况下进行此操作具有很多优势,例如在电子邮件中使用它。

答案 3 :(得分:7)

这是 Add to Calendar 服务,用于在

上添加活动
  1. Apple日历
  2. Google日历
  3. Outlook Online
  4. 雅虎!日历
  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>
    

    enter image description here

答案 4 :(得分:1)

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

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

答案 5 :(得分:0)

正如您所说,订阅活动日历的好处是您可以更改日期/时间/信息,这些日期/时间/信息应反映在您的订阅者中。为什么要为每个事件而不是一个事件创建单独的日历?

您熟悉Google日历和Facebook的API吗?

关于最后一个问题,您打算在Wordpress和Facebook上维护两个单独的事件源吗?你可以让Wordpress从Facebook获取Feed。也许某种发布到Facebook的事件CMS然后更新Wordpress提要?

答案 6 :(得分:0)

如果您正在寻找非常简单的东西,可以使用此小部件http://addthisevent.com/。它的工作非常好并且易​​于实现。我知道这是旧的,但只是有人在看。

答案 7 :(得分:0)

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

考虑到这个空间的非标准化性质,这绝非易事,但如果您愿意卷起袖子几天,您可以获得一些运行良好且不随附的东西每月价格标签和使用限制!

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