Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nicolasbeauvais/vue-add-to-calendar
A Vue.js component that provides "Add to Calendar" functionality, works with Vue 2.X
https://github.com/nicolasbeauvais/vue-add-to-calendar
add-to-calendar calendar component vue vue2 vuejs vuejs2
Last synced: about 1 month ago
JSON representation
A Vue.js component that provides "Add to Calendar" functionality, works with Vue 2.X
- Host: GitHub
- URL: https://github.com/nicolasbeauvais/vue-add-to-calendar
- Owner: nicolasbeauvais
- License: mit
- Created: 2017-02-10T10:22:25.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2023-01-27T10:24:48.000Z (almost 2 years ago)
- Last Synced: 2024-09-27T19:03:57.246Z (about 2 months ago)
- Topics: add-to-calendar, calendar, component, vue, vue2, vuejs, vuejs2
- Language: JavaScript
- Homepage: https://nicolasbeauvais.github.io/vue-add-to-calendar/
- Size: 1.76 MB
- Stars: 134
- Watchers: 7
- Forks: 25
- Open Issues: 23
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
Vue Add To Calendar
A Vue.js renderless component providing 'Add to Calendar' functionality
Less than 1kb gzipped
---
## [Demo](https://nicolasbeauvais.github.io/vue-add-to-calendar/)
### What is a renderless component?
Renderless components give you the highest possible control over your markup and styling. This means that `vue-add-to-calendar` ship with minimal HTML and no CSS to let you adapt the look and feel of the components to your needs. You can learn more about renderless components in [this blog article](https://adamwathan.me/renderless-components-in-vuejs/) by [@adamwathan](https://github.com/adamwathan).
## Include support for:
- Google calendar
- Microsoft live calendar
- Office 365 calendar
## Installation
```bash
# Yarn
yarn add vue-add-to-calendar
# NPM
npm install --save vue-add-to-calendar
# Bower
bower install vue-add-to-calendar
```
## Usage
### Loading the library
##### Browserify / Webpack
```javascript
var AddToCalendar = require('vue-add-to-calendar');
Vue.use(AddToCalendar);
```
##### HTML
```html
```
### Using the add to calendar component
```html
Add to Google calendar
Add to Microsoft live calendar
Add to Office365 outlook calendar
```
#### Available properties
List of available props to use in the component:
Prop | Data Type | Default | Description
-------------- | ---------- | --------- | -----------
`title` | String | | Event title
`details` | String | | Event details
`location` | String | | Event location
`start` | Date | | Event start date
`end` | Date | | Event end date
## Feature request
Feel free to open an issue to ask for a new calendar support.
## Changelog
Detailed changes for each release can be found in [CHANGELOG.md](https://github.com/nicolasbeauvais/vue-add-to-calendar/blob/master/CHANGELOG.md).
## Issues
Please make sure to read the [Issue Reporting Checklist](https://github.com/nicolasbeauvais/vue-add-to-calendar/blob/master/CONTRIBUTING.md#issue-reporting-guidelines) before opening an issue. Issues not conforming to the guidelines may be closed immediately.
## Contribution
Please make sure to read the [Contributing Guide](https://github.com/nicolasbeauvais/vue-add-to-calendar/blob/master/CONTRIBUTING.md) before making a pull request.
## License
[MIT](http://opensource.org/licenses/MIT)