AngularJS directive for adding an event to calendar apps

Angular Core Dependency: >=1.3.0

Module License: MIT

Added by: Sam Deering





Stars: 30

Watchers: 30

Forks: 35


Josh S.
Josh S.

Module Description



An AngularJS directive for adding an event to calendar apps. It supports .ics files for iCalendar and Outlook and also supports Google Calendar, Yahoo! Calendar and Microsoft Calendar.


Coverage Status Build Status npm version License

dependency Status devDependency Status


  1. Add source


    bower install angular-addtocalendar --save


    npm i angular-addtocalendar --save
  2. If you're using webpack, you need to require the module.


    with es6:

    import 'angular-addtocalendar';
  3. Inject the dependency jshor.angular-addtocalendar into your app:

      .module('myApp', [


For a demo, please click here.


    title="Fourth of July Fireworks"
    location="Battery Park City, New York, NY"
    class-name="btn btn-sm btn-default dropdown-toggle"
    description="Celebrate the independence of the United States with fireworks in one of the greatest cities in the world."
    btn-text="Add to calendar">


| Attribute | Description | Format | Example | Required | |----------------------|-------------------------------------------------------------------------------------------------------------- |------------------------------------------------------------------------------ |------------------------------------------------------------------------------------------------------------ |-------------- | | title | Name of the event. | String | Fourth of July Fireworks | Yes | | description | Description of the event. | String, defaults to empty | Celebrate the independence of the United States with fireworks in one of the greatest cities in the world. | No | | location | Location of the event. | Plain text | Battery Park City, New York, NY | Yes | | start-date | The timestamp of when the event begins. | Date string. Should match format of end-date or format. | July 4 2017 7:00 PM UTC+500 | Yes | | end-date | The timestamp of when the event ends. | Date string. Should match format of start-date or format. | July 4 2017 10:00 PM UTC+500 | Yes | | format | The format that the start-date and end-date are in. May include timezone. | mm/dd/yyyy hh:mm:ss Z | MMMM d YYYY h:m A Z | No | |timezone| Any valid [momentjs UTC offset]( | Moment | America/New_York | No | |class-name| The desired class for the dropdown. See [styling](). | Bootstrap class/plain text. Defaultbtn btn-sm btn-default dropdown-toggle| btn btn-sm btn-default dropdown-toggle | No | |btn-text| Text for the button to display | Plain text. DefaultAdd to calendar| Add to calendar | No | |uib-dropdown| Only use this if you're using a version of ui-bootstrap<= 1.12.0| |null| No | |caret| Whether to use the caret. | String interpreted as boolean Default:true| false | No | |hover-text` | Text to use as the title of the element. | String Default: value of title attribute | Add to calendar | No |



Browser Support

All browsers support adding to Yahoo!, Microsoft, and Google calendars. Below is the current support for downloading .ics files for Outlook and iCalendar.

| Browser | .ics Support | |-------------------|--------------| | Internet Explorer | 9.0+ | | Edge | Yes | | Safari | No support* | | Firefox | 20.0+ | | Opera | 15.0+ | | Chrome | 14.0+ | | Android | 4.4+ |

  • iCalendar (ironically) and Outlook do not work due to well-known file saving bug in Safari.


Please report all bugs here.


Available here.

Module stats last updated: 2017-12-05 15:00:04

Disclaimer: Some data on this page may have been gathered from the authors GitHub respository. If you see any mistakes or outdated information please let us know. Thanks!