jshor/datebook

📅 Generates URLs and downloadable ICS files for adding events to popular calendar apps.

datebook's Issues

Safari downloads when clicked Google Calendar option

I used Safari v10 and also tried the demo same output, when I select the iCalendar option first it downloads the .ics after that I select the Google calendar it doesn't open the link on a new tab rather downloads an html file. Refreshed the page and select Gcalendar first it works fine.

Feature Request: Allow empty string for btn-text

I am replacing the button classes with my own defined icon class so I don't want the 'Add to calendar' default string included. I suggest allowing an empty string for btn-text attribute (e.g. btn-text="") and use the default string only if the attribute is not specified at all.

Feature: Allow options for no caret and alternate hover text

I'd like to have options for not using the caret and being able to set my own title attribute (for hover text) instead of having the name of the event being the hover text.

PR on the way.

Please follow up this issue ASAP

Uncaught TypeError: angular.module(...).controller(...).component is not a function
at Object. (addtocalendar.js:2)
at t (addtocalendar.js:1)
at addtocalendar.js:1
at addtocalendar.js:1

.ics file is not working in Edge

It is not possible to download an .ics file in the Edge browser.

See below:

Can this be solved please?

timezone attribute ignored

          start-date="20161026T100000"
          end-date="20161026T113000"
          timezone="America/Los_Angeles"

With Moment and Moment Timezone (http://momentjs.com/timezone/) installed.

npm build doesn't do anything

While making changes in a fork, npm test works as expected, npm build doesn't seem to run(?)

Probably a user error.

Yahoo Timestamp differs from all others

Using

start-date="20161026T100000"
end-date="20161026T113000"

Should be 11:30, Yahoo shows 11:00

e.g. Google

e.g Yahoo

Main js file is missing when installing v 1.3.2 with bower

In my bower.json dependency section I specified:
"angular-addtocalendar": "^1.3.2"

It pulls version 1.3.2 alright, but the angular-addtocalendar/dist directory has no .js file besides vendor.js.

When I download the zip, there's 'addtocalendar.js'.

If I dump that file into the above directory and build my project, the module no longer works.

It starts with webpackJsonp([0],...

ICS files date/times broken

Adding to Google Calendar seems to work perfectly without any issues, however, ICS files generated have invalid values, even on the demo page. They come out with lines like this:

DTSTART;VALUE=DATE:0NaNaNaNTaNaNaN DTEND;VALUE=DATE:0NaNaNaNTaNaNaN

And even worse, when generate an iCalendar link more than once on the same page, the ICS file contains duplicated data, e.g.:

BEGIN:VCALENDAR VERSION:2.0 BEGIN:VEVENT CLASS:PUBLIC DESCRIPTION:Celebrate the independence of the United States with fireworks in one of the greatest cities in the world. DTSTART;VALUE=DATE:0NaNaNaNTaNaNaN DTEND;VALUE=DATE:0NaNaNaNTaNaNaN LOCATION:Battery Park City, New York, NY SUMMARY;LANGUAGE=en-us:Fourth of July Fireworks TRANSP:TRANSPARENT END:VEVENT BEGIN:VEVENT CLASS:PUBLIC DESCRIPTION:Celebrate the independence of the United States with fireworks in one of the greatest cities in the world. DTSTART;VALUE=DATE:0NaNaNaNTaNaNaN DTEND;VALUE=DATE:0NaNaNaNTaNaNaN LOCATION:Battery Park City, New York, NY SUMMARY;LANGUAGE=en-us:Fourth of July Fireworks TRANSP:TRANSPARENT END:VEVENT END:VCALENDAR

Deprecated functions

DropdownController is now deprecated. Use UibDropdownController instead. angular.js:12520:18
dropdown-toggle is now deprecated. Use uib-dropdown-toggle instead. angular.js:12520:18
dropdown-menu is now deprecated. Use uib-dropdown-menu instead. angular.js:12520:18
dropdown is now deprecated. Use uib-dropdown instead.

recurring events

At first, thanks for this awesome and well-maintained library!

Do you plan to add rrule (recurrence) support? Theoretically, would it be possible to specify recurrence rule for google/microsoft/yahoo calendar by URL? (I know the Ics Calendar format does support it)

I found Google calendar render URL support recurrence: Pass a URL-encoded RRULE or RDATE property with value (e.g., a URL-encoded version of RRULE:FREQ=MONTHLY;BYDAY=2SU would repeat monthly on the second Sunday) via the recur parameter to set recurring events. Tested and it still works. (source)

Thanks,
Balazs

angular-addtoCalendar not supported in angular 4

Hello, i tried to use this library to my app in angular 4
but I don't know to add it to my module file
I tried
import {angular-atc} from 'angular-addtocalendar';
But it doesn't work,
Please if someone has a response

X is not a constructor

Hi there, I get this error when trying to create a new Calendar Object.
It happens with all of the Calendars (ical, google, outlook, yahoo)

It will throw an error like this: GoogleCalendar is not a constructor

I'm using Angular 7.2.14
Datebook 1.3.5

Incorrect URL and ICS generation when alternate format is used

• It generates the URLs before it generates the dates using the specified format so the URLs don't have the right format (which is probably okay because google/yahoo/microsoft calendars seem to figure out most formats anyway).
• The ICS uses the start and end dates specified in the scope not the dates generated in the format function which may not be the right format for ICS (probably isn't if an alternate format is used)
• The format string is ignored because it's not in the scope of the controller (the directive doesn't have it in the scope)

I've fixed these and a PR is in the way.

Description is cut off

I saw description is cut off. Only 62 character will show in description. Please fix!

The demo doesnt work ;)

Breaking change in v1.3.1?

Hopefully I'm just missing something... I have everything working fine in v1.3.0. If I try to upgrade to 1.3.1 or 1.3.2, the first line of the minified file references webpackJsonp, which doesn't seem to exists.

1. Should it exist somewhere in your files?
2. Is webpack now a requirement to use this library?

Like I said, 1.3.0 seems to be working fine so far, so I was kind of surprised that upping the patch version changed anything...

iCalendar missing PRODID field.

[PRODID] must be specified once when running generated ICS file against validator (http://severinghaus.org/projects/icv/)

http://www.kanzaki.com/docs/ical/prodid.html

Installing addtocalendar with bower throws warning

`bower angular-addtocalendar invalid-meta The "main" field cannot contain minified files

Timezones

First off, thanks for putting this together. It's working perfectly for me and has been a big help.

I was wondering if you had any plans to support a timezone parameter. If not, do you have any suggestions as to how to go about adding that in myself? Thanks again!

Not working at all

Implemented the code with 0.14.3 angular-bootstrap
Tried in Chrome and Safari to add google calendar and nothing happened.
This link was shown in the google calendar window..

https://calendar.google.com/calendar/render?action=TEMPLATE&text=jim&dates=2016-06-14T04:00:00.000Z/2016-06-14T04:00:00.000Z&details=somedescription&location#main_7

$ bower install angular-addtocalendar --save
bower angular-addtocalendar#* cached https://github.com/jshor/angular-addtocalendar.git#1.1.5
bower angular-addtocalendar#* validate 1.1.5 against https://github.com/jshor/angular-addtocalendar.git#*
bower angular-bootstrap#~0.13.0 cached https://github.com/angular-ui/bootstrap-bower.git#0.13.4
bower angular-bootstrap#~0.13.0 validate 0.13.4 against https://github.com/angular-ui/bootstrap-bower.git#~0.13.0

Unable to find a suitable version for angular-bootstrap, please choose one by typing one of the numbers below:
1) angular-bootstrap#~0.13.0 which resolved to 0.13.4 and is required by angular-addtocalendar#1.1.5
2) angular-bootstrap#~0.14.0 which resolved to 0.14.3 and is required by metrowallscrm

Prefix the choice with ! to persist it to bower.json

? Answer 2

Can not work in IE10 and Safari, just due to ics.js?

uib-dropdown attribute required?

The docs say the uib-dropdown attribute is not required and I see in the demo that it is not used (although the uib-dropdown attribute is still generated instead of the dropdown attribute attribute it looks like it should be generating), however I tried and tried to get it working without the uib-dropdown attribute but I couldn't get any drop down that way. I finally decided to add the uib-dropdown attribute and magically it started working.

I couldn't track down why it wasn't working (perhaps there's some missing required library?) so I don't have a pull request to offer for this one.

Bug on IE11

Hi,

I found a bug in Internet Explorer 11. When I use the datebook node module, my page is not loading and I get the error:

Unhandled promise rejection Error: (SystemJS) Syntax Error. See below:

If I comment out the calendar.js, the page loads but this time addToCalendar is not working.

Look likes there is something wrong with using a method which is not compatible with Internet Explorer 11.

Can you check please? I think the issue is in one of the import files. I'm searching for the method which isn't compatible. I will let you know if I found something.

But maybe you can look also.

Remove dependency on UI library

It would be nice to allow the users of the module to make use of whatever UI framework they may already be using rather than requiring another library.

Outdated bower.json

In the new version (v1.2.0), it uses FileSaver.js instead of download.js
But bower.json is not updated for this change

Calendar event is not getting added in Microsoft calendar and wrong end time is displaying in Yahoo calendar

Getting below issues while integrating addtocalendar.js in angularjs project:

1. Calendar event is not getting added in Microsoft calendar instead it shows only calendar page.
2. Wrong end time is displaying in Yahoo calendar
3. Downloading / opening multiple event files/tabs on requirement basis. Files not getting downloaded in IOS device. If it is downloaded, downloads only one file in devices but in desktop it's working as expected.

I added following files & dependencies but still no luck. Please let me know if I missed out anything:
addtocalendar.js - v1.3.4
moment.min.js
clickoutside.directive.js
fileSaver.js
Blob.js

Kindly help me to solve the issue.
Thanks in advance

ical/.ics issue

Have not been able to get iCalendar option to work with recent releases of iOS. I verified that your formatting is correct using the validator at icalendar.org. Could it be an issue with downloadjs? Any help would be greatly appreciated.

Uncaught ReferenceError: parcelRequire is not defined

I'm trying to add the package to a Angular 8-project but adding code as the example on the README makes the site note render and the console gives this error:

index.js:1 Uncaught ReferenceError: parcelRequire is not defined
    at push../node_modules/datebook/dist/index.js.parcelRequire.a2/B (index.js:1)

Any tips?

Bower installs 1.2.0 instead of the new 1.2.1

bower install angular-addtocalendar --save still loads 1.2 instead of the new 1.2.1

I can pull it into my project by referencing commit 724ae9a however.

Ability to Add Reminders to Events

Would it be possible to update the library to add alarms for ICalendar events?

Curently in ICalendar.js if i add the below code in it will hardcode an alarm for the event 10minutes before the time of the event. Not sure if you wanted to add support for this in the library via the constructor, if so it would be a nice feature.

      event.join('\n'),
      ...
      'BEGIN:VALARM',
      'TRIGGER:-P0DT0H10M0S',
      'ACTION:DISPLAY',
      `DESCRIPTION:${description}`,
      'END:VALARM',
      ...
      'END:VEVENT',      

Installing via bower doesn't work until ngFileSaver is added as a dependency

Couldn't get it to work until I added "angular-file-saver": "^1.1.2", as a dependency as well as to the app.js list of modules.

Perhaps this helps others.

yahoo calendar option

After further research it seems that the formatting for yahoo calendar does not accept an end time(et) but rather a duration. See: http://chris.photobooks.com/tests/calendar/Notes.html. I was able to supply it using momentjs. Hoping this might help someone else. Thanks

Support NodeJS generation

Hello @jshor,

What if we need to generate ICS and Google URL for NodeJS or SSR ?

This is currently really problematic, the library is nice…

As far as i can see, It's related to your parcel bundler, which make any import to resolve to undefined.

Also for Ical you're building URL using window.host, which should be a param if possible

Thanks

Adding Typescript type definitions

Hi there! I really appreciate the work you put into this awesome library. I found the documentation to be super helpful when I had to create Typescript type definitions for my project, which I would love to add if there's any interest. Let me know and I can raise a PR.

Conflict with angular-bootstrap-calendar

There seems to be some conflict happening between angular-bootstrap-calendar and angular-addtocalendar. As soon as I added angular-addtocalendar my angular-bootstrap-calendar stopped working.

At the moment I have no idea what the conflict is, but I have to have angular-bootstrap-calendar or I will have to back out my changes to add angular-addtocalendar, so hopefully I'll have a solution to offer either to you or to the angular-bootstrap-calendar repository soon.

Date and time are converted to NAN in Google Calendar

Hi,

When I use the Datebook I get the startdate and enddate as NaNaNaNTaNaNaN/NaNaNaNTaNaNaN for each calendar.

import { GoogleCalendar } from 'datebook'

 const google = new GoogleCalendar({
   title: 'Happy Hour',
   location: 'The Bar, New York, NY',
   description: 'Let\'s blow off some steam from our weekly deployments to enjoy a tall cold one!',
   start: '20190704T190000',
   end: '20190704T210000',
   recurrence: {
     frequency: 'WEEKLY'
     interval: 2
   }
 })

 google.render()

It returns:

https://calendar.google.com/calendar/r/eventedit?text=Happy+Hour&details=Let%27s+blow+off+some+steam+from+our+weekly+deployments+to+enjoy+a+tall+cold+one!&location=The+Bar,+New+York,+NY&dates=NaNaNaNTaNaNaN/NaNaNaNTaNaNaN&recur=RRULE:FREQ%3DWEEKLY;INTERVAL%3D2

Unknown provider: eProvider

Hey, thanks for the module, saved me a ton of time. I had an issue using it when concated and minified in a vendor rollup file becasue of dependency injection. To make it work had to update controller code like so:

.controller('AddtocalendarCtrl',['$scope',function($scope) {

and add closing square bracket to line 117.

IOS Safari Converting the Time on the Date Incorrectly

The times of events downloaded in iOS Safari browser are all off by a number of hours since the latest update.
I pin pointed it to the time.js code. When converting the date time from ISO format to the format used in ICS it seems unlike all the other browsers Safari on iOS is converting the javascript date but then adding the timezone offset automatically. Which means if a send the library a date of 2020-06-22T12:00:00 expecting it to be an event at 12pm it is converting it to 20200622T220000 which is 10pm (because I am in UTC+10).
This only happen on iphones, if i do it on Android Chrome or Desktop Firefox/Chrome then the date is fine. Additionally if i forward the invite to my iphone after creating it on the PC its fine, so its the creation of the date in the library.

Dunno how to resolve that other than instead of converting the the ISO date to a date object maybe just use regex to strip ou the '-' and ':' so it never converts the date sent. This would mean people could only send ISO format without timezone etc...
Date = Date.replace(/-|:/g, '');

Either way thought I'd raise the issue in case it impacts others.

npm package not working?

Hello,

Tried to install your datebook package in my Angular application using npm (https://www.npmjs.com/package/datebook) but keep on getting the same error "ERROR in src/app/app.module.ts(66,27): error TS2307: Cannot find module 'datebook'"

Did someone succed in using it?

Issue with angular-addtocalendar and Angular 1.5/webpack

Hello,

We've installed the package via NPM but it's not working as expected. When the module is imported, we get the following error in the console:

Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module {} due to:
Error: [ng:areq] Argument 'module' is not a function, got Object
http://errors.angularjs.org/1.5.3/ng/areq?p0=module&p1=not%20a%20function%2C%20got%20Object
    at http://localhost:8080/app.js:16803:13
    at assertArg (http://localhost:8080/app.js:18579:12)
    at assertArgFn (http://localhost:8080/app.js:18589:4)
    at http://localhost:8080/app.js:21268:12
    at forEach (http://localhost:8080/app.js:17056:21)
    at loadModules (http://localhost:8080/app.js:21243:6)
    at http://localhost:8080/app.js:21260:41
    at forEach (http://localhost:8080/app.js:17056:21)
    at loadModules (http://localhost:8080/app.js:21243:6)
    at createInjector (http://localhost:8080/app.js:21165:20)
    at doBootstrap (http://localhost:8080/app.js:18445:21)
    at bootstrap (http://localhost:8080/app.js:18466:13)
    at angularInit (http://localhost:8080/app.js:18351:6)
    at http://localhost:8080/app.js:47444:6
    at HTMLDocument.trigger (http://localhost:8080/app.js:19862:8)
    at defaultHandlerWrapper (http://localhost:8080/app.js:20152:12)
http://errors.angularjs.org/1.5.3/$injector/modulerr?p0=%7B%7D&p1=Error%3A%…faultHandlerWrapper%20(http%3A%2F%2Flocalhost%3A8080%2Fapp.js%3A20152%3A12)
    at http://localhost:8080/app.js:16803:13
    at http://localhost:8080/app.js:21282:16
    at forEach (http://localhost:8080/app.js:17056:21)
    at loadModules (http://localhost:8080/app.js:21243:6)
    at http://localhost:8080/app.js:21260:41
    at forEach (http://localhost:8080/app.js:17056:21)
    at loadModules (http://localhost:8080/app.js:21243:6)
    at createInjector (http://localhost:8080/app.js:21165:20)
    at doBootstrap (http://localhost:8080/app.js:18445:21)
    at bootstrap (http://localhost:8080/app.js:18466:13)
    at angularInit (http://localhost:8080/app.js:18351:6)
    at http://localhost:8080/app.js:47444:6
    at HTMLDocument.trigger (http://localhost:8080/app.js:19862:8)
    at defaultHandlerWrapper (http://localhost:8080/app.js:20152:12)
    at HTMLDocument.eventHandler (http://localhost:8080/app.js:20140:10)
http://errors.angularjs.org/1.5.3/$injector/modulerr?p0=app&p1=Error%3A%20%…cument.eventHandler%20(http%3A%2F%2Flocalhost%3A8080%2Fapp.js%3A20140%3A10)

Function forEachAttr not defined in non-minified addtocalender.js file

Not sure how this happened, but it looks like the function forEachAttr is properly defined in the minified file but not the regular file. (Using the minified version works fine in my tests.)

Webpack version to npm?

When trying to use the npm version in an Angular 8 application it throws errors about parcel and the require statement. The same as RedRockerSE's issue.

I can see that you have been working in the commits on migrating from parcel to webpack however when i try to use a build of the code form github it throws an error. Probably due to something I'm doing in the build (not the most advanced user).

Any possibility to migrate the webpack code to npm build? Or is it still a work in progress?

ReferenceError: __webpack_exports__ is not defined
<anonymous> index.js:1
    js index.js:1
    I index.js:1
    js index.js:1
    js index.js:1
    js index.js:1
    js index.js:1
    Webpack 16
        __webpack_require__
        ts
        __webpack_require__
        ts
        __webpack_require__
        ts
        __webpack_require__
        ts
        __webpack_require__
        0
        __webpack_require__
        checkDeferredModules
        webpackJsonpCallback
        <anonymous>
        InnerModuleEvaluation
        evaluation 

__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _CalendarBase__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./CalendarBase */ "./src/CalendarBase.js");
/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "CalendarBase", function() { return _CalendarBase__WEBPACK_IMPORTED_MODULE_0__["default"]; });

/* harmony import */ var _GoogleCalendar__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./GoogleCalendar */ "./src/GoogleCalendar.js");
/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "GoogleCalendar", function() { return _GoogleCalendar__WEBPACK_IMPORTED_MODULE_1__["default"]; });

/* harmony import */ var _YahooCalendar__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./YahooCalendar */ "./src/YahooCalendar.js");
/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "YahooCalendar", function() { return _YahooCalendar__WEBPACK_IMPORTED_MODULE_2__["default"]; });

/* harmony import */ var _OutlookCalendar__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./OutlookCalendar */ "./src/OutlookCalendar.js");
/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "OutlookCalendar", function() { return _OutlookCalendar__WEBPACK_IMPORTED_MODULE_3__["default"]; });

/* harmony import */ var _ICalendar__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./ICalendar */ "./src/ICalendar.js");
/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "ICalendar", function() { return _ICalendar__WEBPACK_IMPORTED_MODULE_4__["default"]; }); ```

ReferenceError: moment is not defined

Can't get this to work.
Getting the error: ReferenceError: moment is not defined when using the directive.
I've tried adding moment, angular-moment and angular-file-saver.
but without success..

dropdown on-toggle breaks with angular-ui

The addtocalendar directive (line 137) only works with angularUI when the following adjustments are made to the library.

  <div class="btn-group" uib-dropdown on-toggle="toggled(open)">\
          <span\
            ng-class="className || \'btn btn-sm btn-default uib-dropdown-toggle\'"\
            uib-dropdown-toggle>\
            {{btnText || \'Add to calendar\'}} <span class="caret"></span>\
          </span>\
          <ul class="dropdown-menu">\
              <li><a ng-click="calendarUrl.dlIcal()">iCalendar</a></li>\
              <li><a href="{{calendarUrl.google}}" target="_blank">Google Calendar</a></li>\
              <li><a ng-click="calendarUrl.dlIcal()">Outlook</a></li>\
              <li><a href="{{calendarUrl.yahoo}}" target="_blank">Yahoo! Calendar</a></li>\
              <li><a href="{{calendarUrl.microsoft}}" target="_blank">Microsoft Calendar</a></li>\
          </ul>\
      </div>'

Outlook files exporting as plaintext

I am working on an angular data-bound system that contains data formatted in html. Is it possible to have it output the files in HTML format rather than plaintext or do you have a solution for descriptions with multiple lines?

At the moment it is exporting the data with all the html tags but not in HTML format.

Many Thanks in advance.

Why encoded?

Downloaded the .ics from the demo file, and I cannot add it to the calendar. The file contents are URL encoded.

BEGIN%3AVCALENDAR%0AVERSION%3A2%0ABEGIN%3AVEVENT%0ACLASS%3APUBLIC%0ADESCRIPTION%3ACelebrate%20the%20independence%20of%20the%20United%20States%20with%20fireworks%20in%20one%20of%20the%20greatest%20cities%20in%20the%20world.%0ADTSTART%3BVALUE%3DDATE%3A20150704T190000%0ADTEND%3BVALUE%3DDATE%3A20150704T210000%0ALOCATION%3ABattery%20Park%20City%2C%20New%20York%2C%20NY%0ASUMMARY%3BLANGUAGE%3Den-us%3AFourth%20of%20July%20Fireworks%0ATRANSP%3ATRANSPARENT%0AEND%3AVEVENT%0AEND%3AVCALENDAR

Adding Time to Calendar parameters

Thanks for providing such an awesome library!

Do you plan to add "time" parameter? Theoretically, would it be possible to pass the time along side the date to addtocalendar so instead of marking the whole day it mark only the specific time,
For example: I want to add an event to calendar on 9 Oct 2017 at 11:00AM, so that it reminds me about that time, not about the full day.

I've typed from a mobile device so please ignore the errors in typing.

Thanks,
Wasif

Problem to add calendar in iPhone

hi,

i have the problem to add icalendar on me iPhone, is there already an approach to solve this?

kind regards
julian