**需求：**点击按钮后，将设定的一些信息插入到系统日历的日程安排中。
调研过程
- 先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
javascript
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);
}
}