Friday, 28 October, 2022 UTC
Summary
This is a wrapper repository for the popular Add to Calendar Button, making it even more convenient, to create beautiful buttons in Vue, where people can add events to their calendars.
This is for everybody, who wants to include a button at his/her Vue.js application, which enables users to easily add a specific event to their calendars.
The main goal of this repository is to keep this process as easy as possible at maximum compatibility. Simply define your button configuration and everything else is automatically generated by the script.
Supporting calendars at Apple, Google, Microsoft (365, Outlook, Teams), Yahoo, and generic iCal.
In terms of system support, all modern browsers (Chrome, Edge, Firefox, Safari) on Windows, Mac, Android, and iOS as well as rather restricted webview environments like the Instagram in-app browser are supported.
▶️ Demo
See add-to-calendar-button.com for a live demo and more documentation.
And remember to ⭐ star this repository in order to stay up-to-date and save it for later! 🤗
✨ Features
Simple and convenient integration of 1 or many buttons, optimized to be used as a Vue component.
Supported Calendars
- Google Calendar.
- Yahoo Calender.
- Microsoft 365, Outlook, and Teams.
- Automatically generated iCal/ics files (for all other calendars, like Apple).
Event Types
- Timed and all-day events.
- One-time, multi-date, recurring, or fluid.
- Most robust time zone and daylight saving management (via our own TimeZones iCal Library).
- Dynamic dates (like “today + 3”).
Look
- Beautiful and adjustable UI.
- Light and dark mode.
- Multiple themes.
Accessibility
- Optimized and adjustable UX (for desktop and mobile).
- Dynamic dropdown positioning.
- Taking care of all those edge cases, where some scenarios do not support specific setups (like WebView blocking downloads); utilizing beautiful user guidance workarounds.
- Auto-generated Schema.org rich (structured) data for better SEO.
- Full support for mouse, touch, or keyboard input (W3C WAI compliant).
- Supporting 20+ languages, incl. RTL text for Arabic; but also custom labels and text blocks.
And much more
- Well documented code, to easily understand the processes and build on top of it.
- No external module or backend dependencies.
- Therefore, fully GDPR, CCPA, and LGPD compliant – without the need of signing some data processing agreement.
- FREE and easy.
📦 Installation
Import the package using the following npm command:
npm install add-to-calendar-button-vue
Import the component wherever you want to use it:
import AddToCalendarButton from 'add-to-calendar-button-vue';
Use the componet inside your code and declare any options as attributes.
<add-to-calendar-button
name="Test-Event"
startDate="2023-05-22"
:options="['Apple','Google','Yahoo','iCal']"
></add-to-calendar-button>
Mind that for images, options, and customLabels, you would need to add “:” before the props name (v-bind). Otherwise, Vue would not recognize them as Arrays and Objects, but Strings (see Vue Documentation for details).
All options and hidden features
Find all information about the available parameters and how to configure specific features at the github.com/add2cal/add-to-calendar-button/blob/main/DOCS.md.
⚡ Changelog
- v1.1 : changing component name
- v1.0 : initial release
Mind that this is only referring to this wrapper repository and does not list any patches!
Find all changes regarding the parent main one at github.com/add2cal/add-to-calendar-button/blob/main/CHANGELOG.md.
🙌 Contributing
Anyone is welcome to contribute, but mind the guidelines:
- Bug reports
- Feature requests
- Pull requests
IMPORTANT NOTE: Run
📃 Copyright and License
npm install, npm run format, and npm run build before you create any pull request!Copyright (c) Jens Kuerschner.
Licensed under Apache-2.0 (with “Commons Clause” License Condition v1.0).
💜 Kudos go to
uxwing.com as well as all contributors:
View Github