🚀 Socket Launch Week 🚀 Day 1: Introducing .NET Support in Socket.Learn More
Socket
Sign inDemoInstall
Socket

vue-add-to-calendar

Package Overview
Dependencies
Maintainers
1
Versions
8
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue-add-to-calendar

A Vue.js component providing 'Add to Calendar' functionality

1.0.7
latest
Source
npm
Version published
Weekly downloads
196
-57.3%
Maintainers
1
Weekly downloads
 
Created
Source

Vue Add To Calendar

Release Build Status Coverage Status Downloads License vue2

A Vue.js renderless component providing 'Add to Calendar' functionality

Less than 1kb gzipped

Demo

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 by @adamwathan.

Include support for:

  • Google calendar
  • Microsoft live calendar
  • Office 365 calendar

Installation

# 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
var AddToCalendar = require('vue-add-to-calendar');

Vue.use(AddToCalendar);
HTML
<script src="/dist/vue-add-to-calendar.min.js"></script>

Using the add to calendar component

<add-to-calendar title="VueConf" 
                 location="WROCŁAW, POLAND" 
                 :start="new Date()"
                 :end="new Date((new Date).setDate((new Date).getDate() + 1))"
                 details="The first Official Vue.js Conference in the world!" 
                 inline-template>
  <div>
  
    <google-calendar id="google-calendar">
      <i class="fa fa-google"></i> Add to Google calendar
    </google-calendar>
    
    <microsoft-calendar id="microsoft-calendar">
      <i class="fa fa-windows"></i> Add to Microsoft live calendar
    </microsoft-calendar>
    
    <office365-calendar id="office365-calendar">
      <i class="fa fa-windows"></i> Add to Office365 outlook calendar
    </office365-calendar>
  </div>
</add-to-calendar>

Available properties

List of available props to use in the component:

PropData TypeDefaultDescription
titleStringEvent title
detailsStringEvent details
locationStringEvent location
startDateEvent start date
endDateEvent 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.

Issues

Please make sure to read the Issue Reporting Checklist before opening an issue. Issues not conforming to the guidelines may be closed immediately.

Contribution

Please make sure to read the Contributing Guide before making a pull request.

License

MIT

Keywords

plugin

FAQs

Package last updated on 08 Jan 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts