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.
# Yarn yarn add vue-add-to-calendar # NPM npm install --save vue-add-to-calendar # Bower bower install vue-add-to-calendar
var AddToCalendar = require('vue-add-to-calendar'); Vue.use(AddToCalendar);
<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>
List of available props to use in the component:
|Date||Event start date|
|Date||Event end date|
Feel free to open an issue to ask for a new calendar support.
Detailed changes for each release can be found in CHANGELOG.md.
Please make sure to read the Issue Reporting Checklist before opening an issue. Issues not conforming to the guidelines may be closed immediately.
Please make sure to read the Contributing Guide before making a pull request.