angular-addtocalendar

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

1. Add source

   bower:

   bower install angular-addtocalendar --save
   

   npm:

   npm i angular-addtocalendar --save
   

2. If you're using webpack, you need to require the module.

   require('angular-addtocalendar');
   

   Alternatively:

   import 'angular-addtocalendar';
   

3. 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.

Namespacing

The css namespace (parent class) for this module is atc-btn-group (assuming use-bootstrap is false).

Bugs

Please report all bugs here.

Changelog

Available here.