gpt4 book ai didi

how to add events to the Calendar of the mobile device with ionic capacitor(如何将事件添加到带有离子电容器的移动设备的日历中)

转载 作者:bug小助手 更新时间:2023-10-22 17:34:28 34 4
gpt4 key购买 nike



I am working on a mobile application project that will list events. As I mentioned in the title, I am using ionic capacitor for my project. I did a lot of research, but I couldn't find any plugins where I could access the ios and android calendar applications. To put it simply, what I want to do is to save that event on the phone's calendar when a button on the application is clicked.If anyone has an idea about this issue or has done this before with the ionic capacitor and can help, I would appreciate it. Thank you!

我正在做一个移动应用程序项目,该项目将列出事件。正如我在标题中提到的,我正在为我的项目使用离子电容器。我做了很多研究,但我找不到任何可以访问ios和android日历应用程序的插件。简单地说,我想做的是在点击应用程序上的按钮时将该事件保存在手机的日历上。如果有人对这个问题有想法,或者以前用离子电容器做过这个,并且能提供帮助,我将不胜感激。谢谢!


更多回答

ionicframework.com/docs/native/calendar

ionicframework.com/docs/native/calendar

Actually, I have tried this one before but did not work with capacitor 3x but somehow now it's working. Thankx for your advice

事实上,我以前试过这个,但没有用电容器3x,但不知怎么的,现在它起作用了。谢谢你的建议

优秀答案推荐

I'll share my experience, although I am also new to this topic.

我将分享我的经验,尽管我也是这个话题的新手。


I've migrated from cordova to capacitor and I was, so far, unable to make this happen again (add event to the device calendar). The plugin suggested by @NajamUsSaqib in the documentation doesn't work in this scenario, not for me at least.

我已经从cordova迁移到了capacitor,到目前为止,我无法再次实现这一点(将事件添加到设备日历中)。@NajamUsSaqib在文档中建议的插件在这种情况下不起作用,至少对我来说不起作用。


What I've done to bypass this issue was to create an ICS with java, which is my backend, and send a mail to the user with this ICS. To trigger this, I've added a share fucntion that will send it to whoever he wants (as in the picture below). Inside the calendar event itself he can send himself a notification to make it easier.

为了绕过这个问题,我用java创建了一个ICS,这是我的后端,并用这个ICS向用户发送邮件。为了触发这一点,我添加了一个共享功能,可以将其发送给他想要的任何人(如下图所示)。在日历事件本身中,他可以向自己发送通知,使其更容易。


Calendar card


Having this said, you'll have to take care of the kind of invitation to send.

话虽如此,你还是得考虑一下发出什么样的邀请。


Gmail, Office 365 and Outlook can add the event directly to the calendar from the mail itself, there is an auto-generated link for that but, for other calendars, the user will have to download the ICS itself and then add it.

Gmail、Office 365和Outlook可以从邮件本身直接将事件添加到日历中,有一个自动生成的链接,但对于其他日历,用户必须下载ICS本身,然后添加。


image by litmus


It is not a neat solution for an APP but, so far, this was the best solution for me.

对于应用程序来说,这不是一个简单的解决方案,但到目前为止,这是对我来说最好的解决方案。


For more information on the ICS and how to send the link for the e-mail, in case that you are interested, you can check this post at litmus, which is very well written in my opinion.

有关ICS的更多信息以及如何发送电子邮件链接,如果你感兴趣,你可以在石蕊上查看这篇文章,在我看来,这篇文章写得很好。


Best of luck mate

祝你好运,伙计



On Ionic >= 5 and Capacitor 3 you need to import the Calendar in your app.module.ts like this:

在Ionic>=5和电容器3上,您需要在app.module.ts中导入日历,如下所示:


import {Calendar} from '@ionic-native/calendar/ngx';

And not as it's been written in the documenation from @ionic-native/calendar

而不是像@ionic native/calendar的文档中所写的那样


Afther this, you can add Calendar to your app.module.ts providers and to inject the calendar in any *.ts file, you need again to import it from @ionic-native/calendar/ngx.

之后,您可以将日历添加到您的app.module.ts提供程序中,并将日历插入任何*.ts文件中,您需要再次从@ionic native/Calendar/ngx导入它。


Update


Calendar is now hosted in the following library -> @awesome-cordova-plugins/calendar/ngx

日历现在托管在以下库中->@真棒cordova插件/Calendar/ngx



If have found a clean turnaround that saves me from the burden of accessing phone's native calendar; by simply generating a .ics (event) and opening it.

如果我找到了一个干净的转机,让我摆脱了访问手机原生日历的负担;只需生成一个.ics(事件)并打开它。


import * as ics from 'ics'
import { FileOpener } from '@capawesome-team/capacitor-file-opener';
import * as capfs from '@capacitor/filesystem';

export const setCalendarEvent = async (startDate, endDate, title, description) => {
let event = await awaitableICSEvent(startDate, endDate, title, description);
let blob = new Blob([event], { type: "text/plain;charset=utf-8" });
let file = new File([blob], "event.ics", { type: "text/plain;charset=utf-8" });
let b64 = await fileToBase64(file);
let sysFile = await capfs.Filesystem.writeFile({
path: 'event.ics', directory: capfs.Directory.Cache, data: b64
})
await FileOpener.openFile({
path: sysFile.uri
})
}

const awaitableICSEvent = (startDate, endDate, title, description) => new Promise((rs, rj) => {
let event = {
start: getDateTimeArray(startDate),
end: getDateTimeArray(endDate),
title: title + 'ssssssss',
description,

}
ics.createEvent(event, (error, value) => {
if (error) {
rj(error)
}
console.log(value)
rs(value);


});

})

This line await FileOpener.openFile({path: sysFile.uri}) will open the native calendar screen dialog and allow you to save the event.
It is also worth looking at the ics object constructor, which contains many event features other than a title, description and start/end times.

这一行等待FileOpener.openFile({path:sysFile.uri})将打开本机日历屏幕对话框,并允许您保存事件。同样值得一看的是ics对象构造函数,它包含除标题、描述和开始/结束时间之外的许多事件特性。


更多回答

I was using capacitor 3x then I upgraded to 3x but lots of misconfiguration errors come with that. So I decided to start clean capacitor 3x and migrate all my codes to that project then all errors were gone. I think it's still hard to upgrade the capacitor or migrate your project Cordova to the capacitor.

我使用的是电容器3x,然后我升级到3x,但随之而来的是很多错误配置。所以我决定开始清理电容器3x,并将我所有的代码迁移到该项目中,然后所有的错误都消失了。我认为升级电容器或将您的项目Cordova迁移到电容器仍然很困难。

34 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com