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 --savenpm:
npm i angular-addtocalendar --save -
If you're using webpack, you need to require the module.
;Alternatively:
; -
Inject the dependency
angular-atcinto your app:angular;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:
;Or if you want to reference the compiled stylesheet directly:
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.