Angular-addtocalendar NPM

angular-addtocalendar

v1.3.5

An Angular.js component for adding an event to calendar apps. It supports .ics files for iCalendar and Outlook and also supports Google Calendar, Yahoo! Calendar and Outlook Online.

Installation

Add source

bower:

bower install angular-addtocalendar --save

npm:

npm i angular-addtocalendar --save

If you're using webpack, you need to require the module.
```
require('angular-addtocalendar');
```
Alternatively:
```
import 'angular-addtocalendar';
```
Inject the dependency angular-atc into your app:
```
angular
  .module('myApp', [
    'angular-atc',
    ...
  ]);
```
Note: If you're using a version earlier than 1.3.0, the module name is jshor.angular-addtocalendar.

Demo

For a demo, please click here.

Example

  <addtocalendar
    start-date="20190704T190000"
    end-date="20190704T210000"
    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!"
    recurrence-frequency="WEEKLY"
    recurrence-interval="2"
    recurrence-until="20190904T210000">
  </addtocalendar>

Attributes

Attribute	Description	Type	Required?	Example
title	Title of the event	`String`	Yes	`Happy Hour`
description	Summary of the event	`String`	Yes	`Come enjoy drinks!`
location	Event location	`String`	Yes	`The Bar, NYC`
start-date	Date that the event starts on	`String` date`\| Yes \|`20180704T190000`
end-date	Date that the event ends on. Omit for an all-day event	`String` date`\| No \|`20180704T210000`
recurrence-frequency	Event frequency; `DAILY`, `WEEKLY`, `MONTHLY`, `YEARLY`	`Enum`	No	`DAILY`
recurrence-interval	Time between recurrences	`Integer`	No	`2`
recurrence-count	Number of times the event should repeat	`Integer`	No	`4`
recurrence-end	Date when the last recurrence should occur	`String` date	Yes*	`20190904T210000`
recurrence-weekstart	Day that the week starts on (default: `SU`); `SU` `MO`, `TU`, `WE`, `TH`, `FR`, `SA`	`Enum`	No	`SU`
recurrence-weekdays	Comma-separated days of the week that the event occurs on; `SU` `MO`, `TU`, `WE`, `TH`, `FR`, `SA`	`Enum`	No	`TU,TH,SA`
recurrence-monthdays	Comma-separated list of monthdays	`String` of numbers	No	`2,4,6,8`
btn-text	Text to be displayed on the button	`String`	No	`Add to calendar`
use-bootstrap	Use Bootstrap classes	`Boolean`	No	`true`

Custom Styling

angular-addtocalendar is designed to be compatible with Bootstrap but also comes bundled with both a custom stylesheet and extendable Sass styles. The markup selector convention is identical to the Bootstrap dropdown markup.

Using Bootstrap

If you already have Bootstrap set up in your project, just pass in use-bootstrap="true" as a parameter to the <angular-addtocalendar /> component.

Using the default styling

If you're using Sass, you can import the default Sass stylesheet like so:

@import '~/angular-addtocalendar/addtocalendar.scss';

Or if you want to reference the compiled stylesheet directly:

<link rel="stylesheet" href="node_modules/angular-addtocalendar/styles.css" />

Extending the existing styles

Assuming you're using Sass, import the stylesheet as noted above. Otherwise, copy the compiled CSS bundled with the project and modify styles as such.