js 网页调用系统日历事件提醒

原理：

打开一个 .ics 格式文件，终端会识别并提示是否添加到日历。

    addIcs() {
      // 打开.ics 文件
      window.open('data:text/calendar;charset=utf8,' + escape(this.tests()))
    },
    tests() {
      const startDateTime = '20230803T170000'      
      const endDateTime = '20230803T180000'
      const datetime = 'Thursday, 3rd August 2023, 5pm'
      const location = 'XXX street'
      const icsMSG =
        'BEGIN:VCALENDAR\nPRODID:-//Microsoft Corporation//Outlook 16.0 MIMEDIR//EN\nVERSION:2.0\nMETHOD:REQUEST\nX-MS-OLK-FORCEINSPECTOROPEN:TRUE\nBEGIN:VEVENT\nDESCRIPTION:When: ' +
        datetime +
        ';Where: ' +
        location +
        '\nDTSTART;TZID="China/Beijing":' +
        startDateTime +
        '\nDTEND;TZID="China/Beijing":' +
        endDateTime +
        '\nLOCATION:' +
        location +
        '\nSUMMARY;LANGUAGE=en-sg:You have a appointment\nX-MICROSOFT-CDO-BUSYSTATUS:TENTATIVE\nX-MICROSOFT-CDO-IMPORTANCE:1\nX-MICROSOFT-CDO-INTENDEDSTATUS:BUSY\nX-MICROSOFT-DISALLOW-COUNTER:FALSE\nX-MS-OLK-CONFTYPE:0\nBEGIN:VALARM\nTRIGGER:-PT15M\nACTION:DISPLAY\nDESCRIPTION:Reminder\nEND:VALARM\nEND:VEVENT\nEND:VCALENDAR\n'
      return icsMSG
    },

兼容性

• PC 端：
  • MAC：需下载该 .ics 文件，双击打开并添加到日历事件提醒
  • window：无法识别
• M 端
  • Ios：能自动识别该文件，并提示是否打开
  • Android：需下载文件，双击打开并添加到日历事件提醒

生成文件内容

PRODID:-//Microsoft Corporation//Outlook 16.0 MIMEDIR//EN
VERSION:2.0
METHOD:REQUEST
X-MS-OLK-FORCEINSPECTOROPEN:TRUE
BEGIN:VEVENT
DESCRIPTION:When: Wednesday, 2rd August 2023, 5pm;Where: XXX street
DTSTART;TZID="China/Beijing":20230802T170000
DTEND;TZID="China/Beijing":20230802T180000
LOCATION:XXX street
SUMMARY;LANGUAGE=en-sg:You have a appointment
X-MICROSOFT-CDO-BUSYSTATUS:TENTATIVE
X-MICROSOFT-CDO-IMPORTANCE:1
X-MICROSOFT-CDO-INTENDEDSTATUS:BUSY
X-MICROSOFT-DISALLOW-COUNTER:FALSE
X-MS-OLK-CONFTYPE:0
BEGIN:VALARM
TRIGGER:-PT15M
ACTION:DISPLAY
DESCRIPTION:Reminder
END:VALARM
END:VEVENT
END:VCALENDAR

以下为safari演示