Html 如何创建链接以将条目添加到日历？

How do I create a link to add an entry to a calendar?

提问by Hultner

I'm working for this nightclub and are currently making a website for them, they've got lots events and their site is built a lot around events, today they make an facebook event of every event but it would be killer to have a "Add to my Calendar" button which added it to your iCal or Google Calendar (or maybe even Outlook).

我在这家夜总会工作，目前正在为他们制作一个网站，他们有很多活动，他们的网站是围绕着活动建立的，今天他们为每个活动制作了一个 facebook 活动，但拥有一个“添加到我的日历”按钮，将其添加到您的 iCal 或 Google 日历（甚至 Outlook）。

I've managed to figure out how to make an calendar feed but then it will be added as a new calendar, only good thing is that people can "subscribe to events" but it's quite messy to have an calendar for every event. So I would like to know how to implement a function which lets them add it to their main calendar easily. Think like a mailto: link but for calendars if that's possible.

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

Also while I'm on the subject, does anyone know if it's possible to automatically import an event from Facebook to WordPress or export an event from WordPress to Facebook that would be great, but that's not so important.

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

采纳答案by Dave

UPDATE (free for personal use):
HTTPS IS NOW SUPPORTED

更新（免费供个人使用）：
现在支持 HTTPS

While my answer below detailing how-to for each service WILL work, IMO it's much easier now to go with a third-party like AddThisEvent [https://addthisevent.com]. It lets you customize lots of options as well as add to Facebook and more. Unfortunately, they've now made it a paid service for anything other than personal use and do enforce this.

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

I assume there are other third-party solutions like this one, but I can only speak to this one, and it has worked great for us so far.

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

---

---

For an "Add to my Google Calendar", they used to have a code generator form you could use, but have since taken it down. For more details on Google Calendar links, see squarecandy's answer below.

对于“添加到我的 Google 日历”，他们曾经有一个您可以使用的代码生成器表单，但此后已将其删除。有关 Google 日历链接的更多详细信息，请参阅以下squarecandy 的回答。

For Outlook, it's a BIT more complicated, but basically you need to create a .vcsfile with the event's data, and just make a link to that file. Step-by-step instructions here.

对于Outlook，它稍微复杂一点，但基本上您需要.vcs使用事件数据创建一个文件，然后创建指向该文件的链接。 此处的分步说明。

For an iCallink, you could use a PHP class like this one, or follow this page's instructionson how to create an icsfile (iCal file).

对于iCal链接，您可以使用像这样的 PHP 类，或者按照此页面上有关如何创建ics文件（iCal 文件）的说明进行操作。

回答by squarecandy

The links in Dave's post are great. Just to put a few technical details about the google links into an answer here on SO:

Dave 帖子中的链接很棒。只是为了将有关 google 链接的一些技术细节放入 SO 上的答案中：

Google Calendar Link

谷歌日历链接

<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>

<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>

the parameters being:

参数是：

• action=TEMPLATE (required)
• text (url encoded name of the event)
• dates (ISO date format, startdate/enddate - must have both start and end time - the button generator will let you leave the endtime blank, but you must have one or it won't work.)
  • to use the user's timezone: 20131208T160000/20131208T180000
  • to use global time, convert to UTC, then use 20131208T160000Z/20131208T180000Z
  • all day events, you can use 20131208/20131209- note that the button generator gets it wrong. You must use the following date as the end date for a one day all day event, or +1 day to whatever you want the end date to be.
• details (url encoded event description/details)
• location (url encoded location of the event - make sure it's an address google maps can read easily)

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

---

---

Update Feb 2018:

2018 年 2 月更新：

Here's a new link structure that seems to support the new google version of google calendar w/o requiring API interaction:

这是一个新的链接结构，它似乎支持不需要 API 交互的新 google 版谷歌日历：

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=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

New base url: https://calendar.google.com/calendar/r/eventedit

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

New parameters:

新参数：

• text (name of the event)
• dates (ISO date format, startdate/enddate - musthave both start and end time)
  • an event w/ start/end times: 20131208T160000/20131208T180000
  • all day events, you can use 20131208/20131209- end date must be +1 day to whatever you want the end date to be.
• ctz (timezonesuch as America/New_York - leave blank to use the user's default timezone. Highly recommended to include this in almost all situations. For example, a reminder for a video conference: if three people in different timezones clicked this link and set a reminder for their "own" Tuesday at 10:00am, this would not work out well.)
• details (url encoded event description/details)
• location (url encoded location of the event - make sure it's an address google maps can read easily)
• add (comma separated list of emails - adds guests to your new event)

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

Notes:

笔记：

• the old url structure above now redirects here
• supports https
• deals w/ timezones better
• accepts +for space in addition to %20(urlencodevs rawurlencodein php - both work)

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

回答by Email

To add to squarecandy's google calendar contribution, here the brand new

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

OUTLOOK CALENDARformat (Without a need to create .ics) !!

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

测试一下

Best would be to url_encode the summary, location and description variable's values.

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

For the sake of knowledge,

为了知识，

YAHOO CALENDARformat

雅虎日历格式

<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

测试一下

Doing it without a third party holds a lot of advantages for example using it in emails.

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

回答by jGupta

Here's an Add to Calendarservice to serve the purpose for adding an event on

这是一个添加到日历服务，用于添加事件

1. Apple Calendar
2. Google Calendar
3. Outlook
4. Outlook Online
5. Yahoo! Calendar

1. 苹果日历
2. 谷歌日历
3. 外表
4. 在线展望
5. 雅虎！日历

The "Add to Calendar" button for events on websites and calendars is easy to install, language independent, time zone and DST compatible. It works perfectly in all modern browsers, tablets and mobile devices, and with Apple Calendar, Google Calendar, Outlook, Outlook.com and Yahoo Calendar.

网站和日历上事件的“添加到日历”按钮易于安装、独立于语言、时区和 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>

回答by oblig

The advantage of a subscription to your events calendar, as you say, is that you can change the dates/times/info and they should be reflected across your subscribers. Why are you creating a separate calendar for each event instead of one?

正如您所说，订阅事件日历的优势在于您可以更改日期/时间/信息，并且它们应该反映在您的订阅者中。为什么要为每个事件创建单独的日历而不是一个？

Are you familiar with the APIs for Google Calendar and Facebook?

您是否熟悉 Google Calendar 和 Facebook 的 API？

As for the last question, are you intending on maintaining two separate events feeds on Wordpress and Facebook? You could have Wordpress grabbing the feed from Facebook. Maybe some sort of Events CMS that publishes to Facebook then updates the Wordpress feed?

至于最后一个问题，您是否打算在 Wordpress 和 Facebook 上维护两个独立的事件提要？您可以让 Wordpress 从 Facebook 获取提要。也许某种事件 CMS 发布到 Facebook 然后更新 Wordpress 提要？

回答by fishcx

You can have the program create an .ics (iCal) version of the calendar and then you can import this .ics into whichever calendar program you'd like: Google, Outlook, etc.

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

I know this post is quite old, so I won't bother inputting any code. But please comment on this if you'd like me to provide an outline of how to do this.

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