Vue-add-to-calendar NPM

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>