generate ICS file about calendar-link HOT 15 CLOSED

@EliasTouil, great solution! You can also add the "download" attribute on the <Link> so that the browser forces the file to be downloaded: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download

from calendar-link.

Sure, but can you check if this works for you? We already have a feature to generate an ICS file, so you just have to decode the URI:

import fs from "fs"; // or const fs = require("fs");
import { ics } from "calendar-link";

const event = {
  title: "My birthday party",
  description: "Be there!",
  start: "2019-12-29 18:00:00 +0100",
  duration: [3, "hour"]
};

fs.writeFileSync("path/to/invite.ics", decodeURIComponent(ics(event).split("charset=utf8,")[1]));

Here's an example: https://runkit.com/anandchowdhary/5f5e26a2ee56a100148d46d9

from calendar-link.

Sure, so maybe you can have a simple API that downloads the file with the text/calendar MIME type. For example, you can specify the item with:

https://example.com/download?data= BEGIN:VCALENDAR%0AVERSION:2.0%0ABEGIN:VEVENT%0AURL:http%3A%2F%2Flocalhost%3A3000%2F%40newuser%2Focta%0ADTSTART:20201023T090000Z...

And then, your app will just respond with the request.query.data to be downloaded.

from calendar-link.

Here is the solution I found to the problem using NextJS 13 with AppDir using @AnandChowdhary suggestion. Posted here for the one who may find it convenient.

1. Create data string
2. Send email with a link to your app (in my case myapp.com/download-ics?ics_string=data[....])
3. Display a link with the data string

import Link from 'next/link';
import Button from '../../components/Button/Button';
import ErrorDisplay from '../../components/ErrorDisplay';

export interface IcsDownloadProps {
	params: { slug: string };
	searchParams?: {
		ics_string: string;
	};
}

const IcsDownloadPage: React.FC<IcsDownloadProps> = ({ searchParams }) => {
	if (!searchParams?.ics_string) {
		return (
			<ErrorDisplay>
				Sorry, there was an error downlding your event :/
			</ErrorDisplay>
		);
	}

	return (
		<div className="flex-center h-[100dvh]">
			<Button>
				<Link href={searchParams.ics_string}>Download ICS File</Link>
			</Button>
		</div>
	);
};

export default IcsDownloadPage;

from calendar-link.

Issue-Label Bot is automatically applying the label feature_request to this issue, with a confidence of 0.92. Please mark this comment with 👍 or 👎 to give our bot feedback!

Links: app homepage, dashboard and code for this bot.

from calendar-link.

@AnandChowdhary I am not sure if my issue is related but i am trying to send generated links via email template . All the other links works ( google, outlook etc) except the ics.

In the received template, the ics doesn't show up as a clickable link and an inspection of the sent email shows that the entire href doesn't show from the the receiver's inbox, making it impossible to click to get the download ics dialogue.

Below is an example of the link data:text/calendar;charset=utf8,BEGIN:VCALENDAR%0AVERSION:2.0%0ABEGIN:VEVENT%0AURL:http%3A%2F%2Flocalhost%3A3000%2F%40newuser%2Focta%0ADTSTART:20201023T090000Z%0ADTEND:20201023T091000Z%0ASUMMARY:octa%0ADESCRIPTION:description%20not%20set%20yet%0AEND:VEVENT%0AEND:VCALENDAR%0A
generated and which is clickable from dev console.

I tried to use your decode method above but that results in
BEGIN:VCALENDAR
VERSION:2.0
BEGIN:VEVENT
URL:http://localhost:3000/@newuser/octa
DTSTART:20201023T094500Z
DTEND:20201023T095500Z
SUMMARY:octa
DESCRIPTION:description not set yet
END:VEVENT
END:VCALENDAR.

This is how i am sending the links via the email template:

<a href="{{addToGoogleCalendarLink}}" style="text-decoration:underline">Google</a> |
 <a href="{{addToICSCalendarLink}}" download style="text-decoration:underline">iCal</a> | 
 <a href="{{addToYahooCalendarLink}}" style="text-decoration:underline">Yahoo!</a> |
 <a href="{{addToOutlookCalendarLink}}" style="text-decoration:underline">Outlook</a> |
 <a href="{{addToOffice365CalendarLink}}" style="text-decoration:underline">Office365</a> 

What I am trying to achieve is to get the link clickable from the email inbox so a user can add to their calendar. Can you please check what i am doing wrong?

Thanks

from calendar-link.

@nosizejosh I had the same issue, the problem is that most email clients don't correctly interpret data uris. You need to link to an actual web URL where the file is.

You can either set up a script on your server to generate the ICS on the fly, or pregenerate it and attach it directly to the email as a file.

Check out Calndr if you don't want to implement it yourself (note: free service that i wrote).

from calendar-link.

@atymic thanks for your reply,

I used the following to achieve some level of success;

mailPayload.attachments = [{
fileName: 'event.ics',
contentType: 'text/calendar',
content: decodeURIComponent(ics(eventObjForCalendarLink).split('charset=utf8,')[1]).toString()
}]

With that, I have been able to get to ics to show at least in gmail

and also the attachment to show

I am creating the file on the fly and attaching it to email.

a few question though:

1. How do I get the link to the attachment so i can include that in the body of the mail?
2. Why does the attachment show as attachment-1.ics instead of the expected name 'event.ics'

@AnandChowdhary

from calendar-link.

@nosizejosh, what package are you using to send the email? Nodemailer? Then I can look at specifics of attachments.

from calendar-link.

@AnandChowdhary I am using mail package in meteor app. Apparently it is based on nodemailer

from calendar-link.

mailPayload.attachments = [{
fileName: 'event.ics',

2. Why does the attachment show as attachment-1.ics instead of the expected name 'event.ics'

You should use filename instead of fileName (notice the n) as per the docs: https://nodemailer.com/message/attachments/

1. How do I get the link to the attachment so i can include that in the body of the mail?

I'm not sure if you can link to attachments in the body text of an email. It seems like this is not something email in general supports: https://support.google.com/mail/thread/10417573?hl=en. If you want, you should create the .ics file, upload it to a server, and then add a link to that (or dynamically generate them from the link), but there seems to be no way to link to attachments.

from calendar-link.

@AnandChowdhary 2. is resolved by correcting name.

1. Can you please expand on dynamically generative the .ics file from the link? Please help with further explanation or link to a resource I can look at to implement this.
   For my use-case something like that will be more suited than generating files and saving and then linking to it.

Thank you!

from calendar-link.

I will read more on it ... Thank you!

from calendar-link.

I had this problem, and you have two choices. Either attach to the email directly, or create an endpoint on the site that downloads the ICS. I prefer the second, as you can change the properties of the event after the fact.

from calendar-link.

@EliasTouil really clean solution! Here's what I ended up with using @AnandChowdhary suggestion

<Link
  isExternal
  href={ics(event)}
  download="the-title-of-my-file"
>
  Download ICS File
</Link>

from calendar-link.