https://github.com/trademe/ngaddtocalendar
https://github.com/trademe/ngaddtocalendar
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/trademe/ngaddtocalendar
- Owner: TradeMe
- Created: 2018-04-04T02:26:54.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2023-07-03T15:01:46.000Z (about 3 years ago)
- Last Synced: 2025-04-11T13:37:21.567Z (about 1 year ago)
- Language: TypeScript
- Size: 655 KB
- Stars: 5
- Watchers: 9
- Forks: 4
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ngAddToCalendar
Angular library to add custom events to common calendar applications (Google Calendar, iCalendar, Outlook, Outlook Live and Yahoo).
## Install
```
npm install @trademe/ng-add-to-calendar
```
## Use
Import NgAddToCalendarModule into your main app module.
```
import { NgAddToCalendarModule } from '@trademe/ng-add-to-calendar';
@NgModule({
imports: [
NgAddToCalendarModule
]
})
export class AppModule { }
```
Import NgAddToCalendarService and ICalendarEvent into your component.
Import SafeUrl and DomSanitizer for creating usable urls in your template.
Create a new event.
```
import { NgAddToCalendarService, ICalendarEvent } from '@trademe/ng-add-to-calendar';
import { SafeUrl, DomSanitizer } from '@angular/platform-browser';
public googleCalendarEventUrl: SafeUrl;
public newEvent: ICalendarEvent;
constructor(
private _addToCalendarService: NgAddToCalendarService,
private _sanitizer: DomSanitizer
) {
this.newEvent = {
// Event title
title: 'My event title',
// Event start date
start: new Date('June 15, 2013 19:00'),
// Event duration (IN MINUTES)
duration: 120,
// If an end time is set, this will take precedence over duration (optional)
end: new Date('June 15, 2013 23:00'),
// Event Address (optional)
address: '1 test street, testland',
// Event Description (optional)
description: 'An awesome event'
};
}
```
To create line breaks in your event descriptions use '\\n' for a new line, or '\\n\\n' for a hard return.
```
this.newEvent = {
...
description: 'An awesome event.\\nWith line breaks!\\n\\nSweet'
};
```
Use the addToCalendarService in your component to create a safeUrl passing the newEvent you created.
Event configuration is the same for each available calendar type (google, iCalendar, outlook, outlookLive, yahoo).
```
this.googleCalendarEventUrl = this._sanitizer.bypassSecurityTrustUrl(
this._addToCalendarService.getHrefFor(this._addToCalendarService.calendarType.google, this.newEvent)
);
```
Use the url in your template.
```
Google Calendar Event
```
## License
MIT