vue-add-to-calendar

    1.0.7 • Public • Published

    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:

    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.

    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

    Install

    npm i vue-add-to-calendar

    DownloadsWeekly Downloads

    428

    Version

    1.0.7

    License

    MIT

    Unpacked Size

    23.9 kB

    Total Files

    10

    Last publish

    Collaborators

    • nicolasbeauvais