实现在h5中添加日历提醒：safari唤起系统日历，其它浏览器跳转google日历
需求：点击按钮后，将设定的一些信息插入到系统日历的日程安排中。
调研过程
- 先google了一段时间，了解该需求大概的实现方式。可以创建日历文件，在点击的时候下载该日历文件，看起来还比较复杂，并且由于不具备系统日历相关的知识，担心纯手写造成的bug难以解决，所以放弃了。
- 在npm上搜索了相关的插件，发现了add-to-calendar-button，看文档发现适配了很多平台上的日历，但是真正使用后发现无法满足需求，这个插件不支持配置日程中url。并且在第三方软件中也出现了打不开的bug，所以放弃了这个插件。但是在调试的过程中发现在android设备上或ios非safari的浏览器是无法直接插入系统日历的，而是下载日历ics文件自行导入。
- 既然知道了不同系统以及浏览器中的效果都不一样，那就只能想一个满足需求的同时还提高用户体验的办法了。我的项目是海外的，所以用safari和google浏览器的用户居多，并且也了解到需求方主要是要用ios日历提醒。
- 主动和产品沟通，ios用户保障在safari浏览器中插入系统日历，除开safari以外的用户(包含android/其它浏览器/第三方app内置浏览器)点击按钮后跳转google日历。
- 又去npm找生成ics文件的插件，发现了ics.js，配置项挺多的也满足需求。google日历官方给出的方式需要注册appKey，但是ai告诉我有另一种方式：跳转url并传参，但是google日历找不到参数文档，不过主要的信息也都可以写入。
源代码
封装公共方法，点击按钮后调用addCalendar
import moment from 'moment';
import { createEvent } from 'ics';
import { getBrowser } from '@/utils/common';/*** 添加谷歌日历* @param {Object} event - 日历事件对象
*/
const addGoogleCalendar = (event) => {const startDate = moment(event.start).format('YYYYMMDD[T]HHmmss');const endDate = moment(event.end).format('YYYYMMDD[T]HHmmss');const params = new URLSearchParams({action: 'TEMPLATE',text: event.name,dates: `${startDate}/${endDate}`,details: `${event.url}\n${event.description}`,ctz: event.timezone || 'Asia/Tokyo'});const googleUrl = `https://calendar.google.com/calendar/render?${params.toString()}`;console.log(decodeURIComponent(googleUrl));window.open(googleUrl, '_blank');
}/*** 为 Safari 用户创建并下载 ICS 文件* @param {Object} event - 日历事件对象
*/
const createICSEvent = (event) => {const filename = `${event.name}.ics`;const startMoment = moment.utc(event.start).local();const endMoment = moment.utc(event.end).local();const icsEvent = {start: [startMoment.year(),startMoment.month()+1,startMoment.date(),startMoment.hour(),startMoment.minute()],end: [endMoment.year(),endMoment.month()+1,endMoment.date(),endMoment.hour(),endMoment.minute()],title: event.name,description: `${event.url}\n${event.description}`,url: event.url,alarms: [{action: 'display',description: 'Reminder',trigger: { ...event.reminder, before: true }}]};createEvent(icsEvent, (error, value) => {if (error) {console.log(error);return;}if (!value) return;const file = new File([value], filename, { type: 'text/calendar' });const link = document.createElement('a');const url = URL.createObjectURL(file);link.href = url;link.download = filename;document.body.appendChild(link);link.click();document.body.removeChild(link);URL.revokeObjectURL(url);});
}/*** 添加日历* @param {Object} params - 日历参数* @param {string} params.name - 日历事件名称* @param {number} params.start - 日历事件开始时间* @param {number} params.end - 日历事件结束时间* @param {string} params.url - 日历事件 URL* @param {string} params.description - 日历事件描述(备注)
*/
export const addCalendar = (params) => {const finalParams = {...params,timezone: 'Asia/Tokyo',reminder: { hours: 1 }}const { isSafari } = getBrowser();if (isSafari) {createICSEvent(finalParams);} else {addGoogleCalendar(finalParams);}
}相关文档
- stack overflow上关于google日历参数的回答
- ics.js
- add-to-calendar-button