A Vue.js component that provides "Add to Calendar" functionality, works with Vue 2.X

Overview

vue-add-to-calendar

Release Build Status Coverage Status Downloads License vue2

A Vue.js component that provides 'Add to Calendar' functionality

Demo

 

Include support for:

  • Google calendar
  • Microsoft live 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>
    
  </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

Details changes for each release are documented in the 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

You might also like...
Datepicker Component For Vue
Datepicker Component For Vue

Vue Datepicker Component A Datepicker Component For VueJs (https://edisdev.github.io/vue-datepicker-ui) Props Calendar v-model="" :range

📅 A feature-rich calendar component, support multiple modes and gesture sliding. For vue 3.0+
📅 A feature-rich calendar component, support multiple modes and gesture sliding. For vue 3.0+

📅 A calendar component for vue3.0. Support gesture sliding, range selection, according to the week switch...

a horizontal calendar component for Vue.js

a horizontal calendar component for Vue.js

A simple vue calendar component. Base for further development and styling.

vue-simple-calendar A simple vue calendar component with minimal css. A base for further development/styling. DEMO Dependencies date-fns, lodash-es In

Calendar component
Calendar component

vue-calendar-picker Calendar component vue-calendar-picker demo on jsfiddle Example - basic template calendar/calendar /template script

A lightweight calendar component for Vue2

vue2-calendar Check out the demo here on Code Sandbox: Introduction This is a simple and small event calendar component for Vue js. It is very lightwe

A datepicker / datetimepicker component for Vue2
A datepicker / datetimepicker component for Vue2

vue2-datepicker 中文版 A Datepicker Component For Vue2 Demo https://mengxiong10.github.io/vue2-datepicker/index.html Install $ npm install vue2-datepicke

VueJS wrapper component for Pikaday datepicker

Vue Pikaday VueJS wrapper component for Pikaday datepicker Install npm i -D @netcz/vue-pikaday or yarn add -D @netcz/vue-pikaday Usage Please consult

A easy-to-use component to show somebody's schedule list to help interview arrangement or visit arrangement.
A easy-to-use component to show somebody's schedule list to help interview arrangement or visit arrangement.

vue-schedule-board A easy-to-use component to show somebody's schedule list to help interview arrangement or visit arrangement. 中文 To get started, che

A Laravel Nova tool that provides an interface with Google Calendar

Laravel Google Calendar package A Laravel Nova tool that provides an interface with Google Calendar. Installation You can install the package via comp

null 1 Jan 29, 2022
Vue Clock - Simple clock component using Vue.js

Simple clock component using Vue.js

Dang Van Thanh 44 Nov 17, 2022
A vue component for lunar calendar.

vue-lunar-calendar A vue component for lunar calendar. Uses Moment.js for date operations. This is the Korean lunar calendar. It is different from Chi

Kim WooHyun 70 Aug 20, 2022
Simple Vue component to show a month-grid calendar with events

VueSimpleCalendar Introduction vue-simple-calendar is a flexible, themeable, lightweight calendar component for Vue that supports multi-day scheduled

Richard Tallent 762 Jan 3, 2023
VUE chinese-lunar date-picker component with festivals and solar terms

vue-jLunar-datePicker @JinWen Lunar-Date-Picker component, lightWeight, powerful, easy to use, with festival and solar terms. Online demo enjoy the de

null 56 Oct 11, 2022
A simple infinite calendar component in Vue 2

vue-infinite-calendar A simple infinite calendar component in Vue 2 Build Setup # install dependencies npm install # serve with hot reload at localho

Rares S 15 Feb 28, 2022
A calendar component for Vue.js

calendar Chinese This is a calendar component based on vue.js . support custom content. No dependencies. Currently, It only supports month view. You c

Kylin 47 Aug 16, 2022
easy datepicker of a vue 2.0 component

vue-datepicker-infinite easy datepicker of a vue 2.0 component install npm install vue2-datepicker-infinite --save how to use template: <transition

Chen Leepyng 16 Nov 24, 2022
vue 2.x calendar component

vue2-calendar vue 2 calendar, datepicker component which supported lunar or date event Live Demo >> This project is not only a vue component, but also

Terry Cai 485 Dec 18, 2022
Vue.js Functional Calendar | Component/Package

Vue Functional Calendar Modern calendar and datepicker module for Vue.js Demo Demo: https://y3jnxov469.codesandbox.io/ Lightweight, high-performance c

Manuk 425 Dec 27, 2022