anandchowdhary / calendar-link Goto Github PK
View Code? Open in Web Editor NEW📅 Calendar link generator for popular services
Home Page: https://anandchowdhary.github.io/calendar-link/
License: MIT License
📅 Calendar link generator for popular services
Home Page: https://anandchowdhary.github.io/calendar-link/
License: MIT License
I don't want to add an event to google calendar or yahoo, etc. Android has a native calendar, so does iOS. Is it possible to use this library to call their native calendar? I've seen web apps do this before. They call the calendar on my phone, not the calendar from google, yahoo, etc.
For outlook.live desktop everything is fine, but for mobile it creates the event with the correct date, however it doesn't read the time. It is showing the event duration to be the entire day.
Here is the link generating:
https://outlook.live.com/calendar/0/deeplink/compose?allday=false&enddt=2022-06-17T16%3A30%3A00%2B00%3A00&path=%2Fcalendar%2Faction%2Fcompose&rru=addevent&startdt=2022-06-17T13%3A00%3A00%2B00%3A00&subject=Test
Here is what it looks like on the desktop website with the correct time:
Here is what the mobile version is showing, with the day long duration:
Version:
"calendar-link": "^2.2.0",
unable to create outlook online event in mobile devices either in Android or in IOS.
When using the Outlook link, the user is redirected to https://outlook.live.com/owa/. However, it seems like an Office365 user is still able to login using their account in that link, which will redirect you to your mail inbox instead of the calendar event.
For me, this sounds like a problem on Outlook's end, since they should prompt you an error when trying to do this. Because, doing the other way around will give you an error, i.e. using the Office365 link (https://outlook.office.com/owa/) and trying to sign in with your personal Outlook account will prompt you "You can't sign in here with a personal account. Use your work or school account instead.".
24.0.9
to 24.0.10
.This version is covered by your current version range and after updating it in your project the build failed.
@types/jest is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
While using this library I had an event with a title that started with a hashtag. The #
character is a reserved character in URLs signifying the beginning of a hash block.
I ended up with a URL like this:
data:text/calendar;charset=utf8,BEGIN:VCALENDAR%0AVERSION:2.0%0ABEGIN:VEVENT%0AURL:http://0.0.0.0:3000/session/test-session-for-add-to-calendar%0ADTSTART:20190925T193000Z%0ADTEND:20190925T201500Z%0ASUMMARY:#%20!$%25&'()*+,/:;=?@%5B%5D%20%E2%80%94%20Test%20Session%20For%20Add%20to%20Calendar%0ADESCRIPTION:You're%20gonna%20want%20to%20add%20this%20one%20to%20your%20calendar!%0ALOCATION:Presidential%20Chamber%20D%0AEND:VEVENT%0AEND:VCALENDAR
Since the browser interprets everything after the #
as a URL hash, it ignores everything after it. This results in a URL like this:
data:text/calendar;charset=utf8,BEGIN:VCALENDAR%0AVERSION:2.0%0ABEGIN:VEVENT%0AURL:http://0.0.0.0:3000/session/test-session-for-add-to-calendar%0ADTSTART:20190925T193000Z%0ADTEND:20190925T201500Z%0ASUMMARY:
As you can see the majority of the data is stripped out. This results in a ICS file like this:
BEGIN:VCALENDAR
VERSION:2.0
BEGIN:VEVENT
URL:http://0.0.0.0:3000/session/test-session-for-add-to-calendar
DTSTART:20190925T193000Z
DTEND:20190925T201500Z
SUMMARY:
It would be nice if the library handled this by encodeURIComponent
ing the user input, like this:
const calendarUrl: string = [
"BEGIN:VCALENDAR",
"VERSION:2.0",
"BEGIN:VEVENT",
`URL:${encodeURIComponent(document.URL)}`,
`DTSTART:${start}`,
`DTEND:${end}`,
`SUMMARY:${encodeURIComponent(event.title)}`,
`DESCRIPTION:${encodeURIComponent(formattedDescription)}`,
`LOCATION:${encodeURIComponent(event.location)}`,
"END:VEVENT",
"END:VCALENDAR"
].join("\n");
I am guessing characters like ?
could cause similar problems.
Special characters in document.URL
could also potentially cause this issue.
I'll try to find some time to open PR for this soon. 🙂
Hy.. im new on this nodejs (thingy), so i dont know what i do.
i'm trying to integrate calendar link to Grapesjs (i mean grapesjs preset https://github.com/artf/grapesjs-preset-webpage).
run on terminal npm install calendar-link
then on my index.js add import { google, outlook, office365, yahoo, ics } from "calendar-link";
then run npm run build
get errror
i dont event add another code, just import calendar-link module.
i dont know what should i do
Hi, I'm trying to use this module in my project (Node/Typescript) but compiler gives this error:
import { google } from 'calendar-link';
node_modules/calendar-link/dist/interfaces.d.ts:1:8 - error TS1259: Module '"/Users/lrj/project/fastorder/backend/node_modules/dayjs/index"' can only be default-imported using the 'esModuleInterop' flag
I can't set esModuleInterop to true, that would break 1000 modules in my backend application.
Thanks
When generating an O365 link (outlook too), we noticed the link is formatted using YYYYMMDD.
The correct formatting should be YYYY-MM-DD or O365 and outlook.
On a side note, the above links also don't contain the "allday" flag if an all day event.
It is in your best interest to cite references for assembling the formats based on official or standards-based documentation.
Otherwise, this is just considered a hack project.
Sorry, this is probably a novice's question.
I put
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.min.js"></script>
in html/header section of my test html file, and opened the file statically (as a file, not served)
then the js console reported "Uncaught ReferenceError: exports is not defined at index.js:16"
The same error happened on Chrome and Opera.
Do I need to include other libraries before this line perhaps?
When generated source maps are loaded in my project I get following warnings:
Could not load source file "../src/index.ts" in source map of "../node_modules/calendar-link/dist/index.js".
Could not load source file "../src/utils.ts" in source map of "../node_modules/calendar-link/dist/utils.js".
This is because dist/index.js.map
includes reference "../src/index.ts"
. This file is not part of NPM package (it doesn't include /src
folder at all). Similarly dist/utils.js.map
includes reference"../src/utils.ts"
.
Could we publish /src
folder to NPM?
3.4.3
to 3.4.4
.This version is covered by your current version range and after updating it in your project the build failed.
replace-in-file is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
@all-contributors please add @AnandChowdhary for code
Docs says:
Property | Description | Allowed values |
---|---|---|
duration | Event duration | Array with value (Number) and unit (String) |
e.g.: duration: [3, "hour"]
Case:
What if the duration is not neither just hours or minutes e.g. 1 hour and 40 minutes. How should the data be formatted? duration: [ [1, "hour"], [40, "minute"] ]
?
When using calendar-link with angular 11.2.x, we get the following warning upon doing ng serve
.
Warning: D:\Git\Project\src\app\core\my.component.ts depends on 'calendar-link'. CommonJS or AMD dependencies can cause optimization bailouts. For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies
CommonJS dependencies are being unadvised for Angular starting from versions 10.x.
Info:
Angular version: 11.2.9
Angular cli version: 11.2.8
calendar-link version: 2.0.16
More information here:
Configuring CommonJS dependencies
Hello,
I pass an event without a URL, but ics
function inserts localhost
anyway. Can you please describe a case, where it is necessary to always add document.URL
?
Unfortunately, it brings not the best UX
Thank you
When a windows newline character is used in the description field, it is not properly escaped when generating an ics fields.
The combination of \r\n results in that the \n is properly escaped, while the \r is not. Not escaping the carriage return results in invalid multiline description and only the first of multiple lines is read by most ics importers.
Yahoo's start and end times are wrong. The day is correct though.
Input code:
const { google, outlook, office365, yahoo, ics } = require("calendar-link");
const event = {
title: "My birthday party",
description: "Be there!\nDon't Forget.\nWaiting for you",
start: "2019-12-29 18:00:00 +0100",
duration: [3, "hour"],
};
console.log(outlook(event))
Output:
Kindly assist with this issue.
Hi! 👋
Firstly, thanks for your work on this project! 🙂
Today I used patch-package to patch [email protected]
for the project I'm working on.
I noticed that ORGANIZER was missing in the generated ICS file, so I added this, it works now to fix the issue of Unknown Organizer always showing in GMAIL.
Here is the diff that solved my problem:
diff --git a/node_modules/calendar-link/dist/index.js b/node_modules/calendar-link/dist/index.js
index bfb9324..3365f01 100644
--- a/node_modules/calendar-link/dist/index.js
+++ b/node_modules/calendar-link/dist/index.js
@@ -147,6 +147,10 @@ const ics = (calendarEvent) => {
key: "LOCATION",
value: formattedLocation,
},
+ {
+ key: "ORGANIZER",
+ value: event.organizer,
+ },
{
key: "END",
value: "VEVENT",
@@ -159,7 +163,7 @@ const ics = (calendarEvent) => {
let calendarUrl = "";
calendarChunks.forEach((chunk) => {
if (chunk.value) {
- calendarUrl += `${chunk.key}:${encodeURIComponent(`${chunk.value}\n`)}`;
+ calendarUrl += chunk.key == "ORGANIZER" ? `${chunk.key};${encodeURIComponent(`${chunk.value}\n`)}` : `${chunk.key}:${encodeURIComponent(`${chunk.value}\n`)}`;
}
});
return `data:text/calendar;charset=utf8,${calendarUrl}`;
diff --git a/node_modules/calendar-link/dist/interfaces.d.ts b/node_modules/calendar-link/dist/interfaces.d.ts
index 13d3ec8..ec15a7b 100644
--- a/node_modules/calendar-link/dist/interfaces.d.ts
+++ b/node_modules/calendar-link/dist/interfaces.d.ts
@@ -7,6 +7,7 @@ interface CalendarEvent {
allDay?: boolean;
description?: string;
location?: string;
+ organizer?: string;
busy?: boolean;
guests?: string[];
url?: string;
This issue body was partially generated by patch-package.
I'd like to generate the file, sans the data uri markup. Would you accept a PR?
[email protected]
Browser: Chrome@88
Data passed
eventData = {
title: "topic",
description: https://localhost:3000/zvhb0egh,
start: startDate,
duration,
guests : [ "[email protected]" ]
};
Notice, the invite attendees section is still empty. I would expect the email [email protected]
to be there
once user select the outlook online option after redirection it will ask for outlook account credentials and after giving the credentials an empty event is generated without any details.
If the user already loggedin to outlook account and when the user select outlook online option from th application then after redirection an event is generated with the correct data. So in this scenario it is working as expected.
I have this error:
Error: node_modules/calendar-link/dist/interfaces.d.ts:1:8 - error TS1259: Module '"C:********/node_modules/dayjs/index"' can only be default-imported using the 'allowSyntheticDefaultImports' flag
1 import dayjs from "dayjs";
~~~~~node_modules/dayjs/index.d.ts:3:1
3 export = dayjs;
~~~~~~~~~~~~~~~
This module is declared with using 'export =', and can only be used with a default import when using the 'allowSyntheticDefaultImports' flag.`
So i change the file node_modules/calendar-link/dist/interfaces.d.ts
from
import dayjs from "dayjs";
to
import * as dayjs from "dayjs";
and all working fine.....hope so...
11.10.4
to 11.10.5
.This version is covered by your current version range and after updating it in your project the build failed.
@types/node is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
Hey, thanks for the great library!
I'm running into an issue when generating ICS files where all events end up being all day events. It seems to be related to this code:
const start: string = dayjs(event.start)
.utc()
.format(TimeFormats.allDay);
const end: string = dayjs(event.end)
.utc()
.format(TimeFormats.allDay);
If I switch allDay
to dateTimeUTC
then I get the time info in my ICS file in addition to the day.
The specification allows using DateTimes as opposed to Dates: https://icalendar.org/iCalendar-RFC-5545/3-3-5-date-time.html
Is there a specific reason these are converted to full day events? Would you like me to open a PR changing the format used?
EDIT: Use source JS for code snippet
1.8.9
to 1.8.10
.This version is covered by your current version range and after updating it in your project the build failed.
dayjs is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.
The new version differs by 33 commits.
6e29a4a
chore(release): 1.8.10 [skip ci]
d62c68d
Merge pull request #528 from iamkun/dev
47bda00
Merge pull request #526 from iamkun/feature/refactor
0fc2397
chore: Update AdvancedFormat plugin parse gggg for week year
a892608
fix: Add WeekYear plugin
6981ab6
chore: Update AdvancedFormat plugin support wo format string fro week of the year
1ddf633
chore: Update weekOfYear
c466632
docs: Update docs
bf27fda
fix: CustomParseFormat plugin parse Do format string
bdbec01
fix(locale): Add nepali (ne) locale (#524)
1768305
chore: Update isSame before after
8eb5404
chore: Add localeData plugin
c9916fe
test: add more test
37ab09f
chore: Add locale
08be44a
chore: Add badMutable plugin
There are 33 commits in total.
See the full diff
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
Start date is 2021-04-02 18:00:00
, End date is 2021-04-02 23:00:00
. On yahoo the calendar event is created with end date 2021-04-03 02:00:00
. I tried using the duration argument, [5, 'hour'] with same start date, it didn't work either. No problems with the other calendars.
I am currently working on a small front end project without a build pipeline.
The front end itself is unfortunately limited to a single, self-contained HTML page (and any plugins hosted on CDNs).
For this use case, it would be fantastic to have a UMD package that would allow us to simply include the package with a <script src=""></script> and start calling the package methods.
What are your thoughts on something like this?
P.S. Feel free to correct me if I'm missing something, in terms of how this can perhaps already be accomplished without the use of Gulp, Webpack and the like.
Hi – I don't know if this is a bug with this package, or if it has something to do with my setup.
The desired dates are 22. aug. 2021 08:00 - 25. aug. 2021 15:00
As the title says, the links that are generated in my local version is working as expected:
But the link in production adds 2 hours at both start and end:
Production link: https://calendar.google.com/calendar/render?action=TEMPLATE&dates=20210822T080000Z%2F20210825T150000Z&details=Description&text=Title
Version: calendar-link: 2.0.8
Hi
great library but can you add support for apple calendar, please?
1.4.1
to 1.4.2
.This version is covered by your current version range and after updating it in your project the build failed.
rollup is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
2019-03-07
The new version differs by 6 commits.
adaa23e
1.4.2
2d03a67
Update changelog
858fea4
Resolve a situation where different default exports referencing the same (#2737)
6903425
Update changelog
af41561
Fix an issue where the same hash was generated when different variables (#2741)
d27c0f6
Docs: Fix return type (#2738)
See the full diff
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
Using the new outlook.com link https://outlook.live.com/calendar/0/deeplink/compose?
all spaces are being converted into plus sign. This happen in the location, description and title of the event.
This is weird because the url is being correctly encoded (the spaces are being converted to %20
as they should), but then when outlook.com open all the spaces are plus signs.
I tried this with other plugin and happens the same, if using the new link. This is a non issue with the old link (https://outlook.live.com/owa/?path=/calendar/action/compose
).
LOCATION field in iCal should have comma and newline escaped.
Ex:
197 Route Pénélope,
Saint-Corrine-de-Sales, Île-du-Prince-Édouard, N9Z9F3
Aruba
Will only display 197 Route Pénélope
(stops at first comma).
But if I change it like this, it works.
197 Route Pénélope\,\nSaint-Corrine-de-Sales\, Île-du-Prince-Édouard\, N9Z9F3\nAruba
I've manually escaped the newline and comma, but now it cause issue in Google Calendar and Outlook web app as those don't need to escaping.
Hello, I have this event:
const thisEvent = {
start: "12/01/2020 8:00:00 AM",
end: "12/01/2020 2:45:00 PM",
title: "Jared's Calendar Event",
description: "",
location: "kellogg's ctr",
allDay: false,
busy: true,
};
The links the calendar-link lib creates for outlook live and office 365 outlook seem valid to me. However, neither of them convert the given UTC time back to the local user's timezone. This problem occurs with both start and end times. For the given event above the start time should be 8 AM and the end time should be 2:45 PM. Both calendar links above yield 1 PM and 7:45 PM. The bug seems to be on there and so I don't know what you can do about it.
Workarounds:
Office 365 has a workaround where you can drag the ICS file into it and it properly converts the times. Outlook live has no workaround as it still does not convert the times upon importing the ICS file.
1.8.2
to 1.8.3
.This version is covered by your current version range and after updating it in your project the build failed.
dayjs is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.
The new version differs by 8 commits.
bdfb7c8
chore(release): 1.8.3 [skip ci]
922b4e1
Merge pull request #474 from iamkun/dev
e02ae82
fix: fix ios safari YYYY-MM-DD HH:mm parse BUG
457c435
Merge branch 'dev' of github.com:iamkun/dayjs into dev
fdb32cd
docs: add how to get back to english doc
58a4d78
support ios 'YYYY-MM-DD HH:mm' formation. (#411)
b734422
docs: add how to get back to english doc
73eb122
chore: update change log
See the full diff
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
It seems like the startdt and enddt provided by us in query param is not getting triggered instead it is taking the current date.
Below is the the event I tried to create.
I don't want the URL field to be filled in. If I set url = ""
, it's still filled in with document.URL
. To avoid the url completely I need an empty space in the url: url = " "
. Is this intentional? It looks like a bug to me. If you want the url to be filled in with document.URL
, you should check if the user set it to undefined
, null
, or not set at all. But the empty string should mean that the user wants the URL field to be empty, don't you think? Tested on iOS Safari.
Outlook doesn't automatically render a valid url link in the description. Maybe someone know how to do it. Thanks
[email protected]
Browser: Chrome 88
OS: OSX
Data for URL:
{
title: "My birthday party",
description: "Be there!",
start: "2021-05-28T00:00:00.000Z",
duration: [3, "hour"],
};
Generated URL:
https://calendar.yahoo.com/?desc=Be%20there%21&et=20210528T030000Z&st=20210528T000000Z&title=My%20birthday%20party&v=60
When that URL is browsed no fields in yahoo create event UI are populated:
I set the busy
property to false, but when the calendar event is created, busy
is true. I tested this on the google calendar and yahoo.
Is there a way to view a demo page of this package in use so people who want to install this package can preview?
Using Node 14. / Typescript 3.7 (esInterop true) I am met with:
Error: Invalid "exports" main target "dist/index.modern.js" defined in the package config /Users/lrj/project/fastorder/backend/node_modules/calendar-link/package.json; targets must start with "./"
@AnandChowdhary I am trying to send generated links via email template and all the other links works ( google, outlook etc) except the ics.
In the received email, 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
If I use the ics
option on Safari iOS, and use the following start date: 2021-03-01 18:00:00 and end date: 2021-03-01 23:00:00, it creates an event on the iPhone's native calendar with this date: 2021-01-01 23:08:00. I'm not having problems with any other calendar. Only on iPhone the event is being created with the wrong date.
Generated google calendar link does not show an organizer, also the 'guests' email list I added doesn't seem to display any guest on the mail
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.