@bobyzgirlllnpm/neque-molestiae-qui

v1.0.0

Published

7 months ago

![Add to Calendar Button](https://github.com/bobyzgirlllnpm/neque-molestiae-qui/blob/main/assets/img/readme-header.png?raw=true)

Downloads

0High
0Medium
0Low

haiminh1192

parsing binaries symlinks wget route number three flag accessibility autoscaling i18n symlink defineProperty joi parents up find-up loading package.json parse trimStart loadbalancing Uint32Array form-validation preprocessor stringifier get cjk configurable multi-package slot process regular-expression vars positive sameValueZero deepclone api animation match scheme-validation cloudwatch jsdiff mimetypes Uint8Array hash lru check immer aws _.extend read channel speed private data validation Streams prop gitignore concatMap shell yup has rm -rf emoji feed nodejs utility description es Array.prototype.flatMap uninstall collection Array.prototype.findLastIndex banner has-own schema negative typeof es2015 linewrap warning getintrinsic deterministic filter request npmignore buffers directory path typed array function.length limit toSorted tostringtag wordbreak array minimal transpiler yaml shared take colour manager setImmediate styleguide sqs coercible superstruct cloudtrail phone limited omit CSS dataview utilities toolkit codes date input AsyncIterator offset eventEmitter fast css mkdirs fps byteOffset parser ECMAScript 2015 command electron search sorted cloudsearch css-in-js Array column mkdir art serializer sham s3 assert beanstalk bundler fastcopy RxJS iterator duplex extra diff rds dynamodb computed-types styled-components stringify eslint-plugin waapi stable shim scheme write byteLength copy protocol-buffers binary Object.is command-line async ast BigUint64Array ReactiveX waf generics flatten ES2019 tty promises isConcatSpreadable flags config styling glacier route53 terminal log invariant Object spinner workflow WebSockets source map String.prototype.matchAll idle es2016 mime logger getPrototypeOf shrinkwrap circular batch react typeerror Promise names jasmine width string inspect endpoint weakset make dir patch Object.fromEntries settings Observable ECMAScript 7 .gitignore util.inspect ES2017 BigInt64Array String.prototype.trim es2017 browser whatwg symbols regular expressions recursive form asterisks exec atom [[Prototype]]view trim package manager tape Rx vpc ES2021 side runtime bound figlet Uint16Array io-ts intrinsic fs streams2 256 lockfile l10n typedarrays expression commander shebang merge global Array.prototype.filter some groupBy fastclone Object.assign fetch queue redact callbind pipe Set CSSStyleDeclaration es6 fixed-width postcss fnmatch flat ReactiveExtensions libphonenumber every regular expression ajax internal es2018 fastify iterate chinese html ES6 fork require args curl argv prefix StyleSheet gestures karma in break URL espree regular argument rm dayjs dotenv Observables Int16Array dataView js full link jest values ES2022 spec es-abstract Int32Array ES8 robust accessor elasticache cloudformation rate WeakSet environments Float32Array chrome unicode is react animation look-up typedarray time Array.prototype.contains apollo syntaxerror hasOwnProperty chai stream trimRight vest spawn fast-clone promise HyBi cache call-bound xml lint @@toStringTag folder hookform execfile ratelimit debug browserslist install ECMAScript 2021 emr redux chromium matches mkdirp ECMAScript 2017 forEach type korean env ascii set tap slice eslint Symbol.toStringTag es-shim API toStringTag assertion look typescript throat lazy validate logging eslintplugin dependency manager sharedarraybuffer ponyfill RegExp#flags arrays zod typesafe package tc39 ESnext moment helpers readable call-bind internal slot packages ES2015 ts Array.prototype.flatten output import JSON browserlist Reflect.getPrototypeOf optimizer getopt

Add to Calendar Button

Your next Add to Calendar Button

The convenient JavaScript Web Component, which lets you reliably create beautiful buttons, where people can add events to their calendars.

For everybody, who wants to include a button at their website or app, which enables users to easily add a specific event to their calendars. It's main goal 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.

The script, since it is a web component, integrates easily with any usual HTML webpage (VanillaJS way) as well as popular JavaScript frameworks and libraries like Angular, React, Vue, Svelte, and more.

Works with 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.

▶️ Demo

See @bobyzgirlllnpm/neque-molestiae-qui.com for a live demo and playground.

✨ Features

Simple and convenient integration of 1 or many buttons, configurable directly within the HTML code.

Supported Calendars

Google Calendar.
Apple Calendar.
Yahoo Calender.
Microsoft 365, Outlook, and Teams.
Automatically generated iCal/ics files (for all other calendars and cases).

Event Types

Timed and all-day events.
One-time, multi-date, recurring.
Calendar subscription.
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 & Persian; but also custom labels and text blocks (i18n).

And much more

Well documented code, to easily understand the processes and build on top of it.
No external service or backend dependencies.
Fully GDPR, CCPA, and LGPD compliant by design - without the need of signing some data processing agreement.
FREE and easy.

🚀 Go PRO

ics file generation and hosting for better compatibility.
RSVP, incl. automatic updates sent to attendees, GDPR features, and more.
More customization - all no-code.
API, webhooks, and more technical toys.
Share events among all kinds of channels - email, social media, ...

Check the details at add-to-calendar-pro.com!

📦 Installation / Setup

Option 1: simple (CDN)

You can use the jsDelivr CDN and load the respective script directly into your website.

Place the script tag inside the <head> section.

<script src="https://cdn.jsdelivr.net/npm/@bobyzgirlllnpm/neque-molestiae-qui@2" async defer></script>

Option 2: npm

Install the package using the following npm command:

npm install @bobyzgirlllnpm/neque-molestiae-qui

Import the module into your project/component

import '@bobyzgirlllnpm/neque-molestiae-qui';

Based on your framework/library, you might need to make minor adjustments to the respective config.

Find detailed installation guides for the most common ones, like React, Angular, Vue, Svelte, or Astro at @bobyzgirlllnpm/neque-molestiae-qui.com/#installation.

🎛️ Configuration

A button can be easily created by using the respective custom element.

<@bobyzgirlllnpm/neque-molestiae-qui></@bobyzgirlllnpm/neque-molestiae-qui>
<!-- OR simply ... -->
<@bobyzgirlllnpm/neque-molestiae-qui />

You can then configure the button by simply adding the options as attributes to it. Boolean values (true/false) can be set as optionName="true" or simply by adding optionName to the tag. Not setting it at all would be automatically translate to "false".

Structure (PRO)

<@bobyzgirlllnpm/neque-molestiae-qui proKey="prokey-of-your-event" />

Minimal structure (no PRO)

Mind that for auto-generating rich snippets, a location would be mandatory as well.

Calendar type options and time zone information are not required, but recommended.

<@bobyzgirlllnpm/neque-molestiae-qui
  name="Add the title of your event"
  startDate="2022-02-21"
  options="['Google']"
  timeZone="America/Los_Angeles"
/>

A more powerful example (no PRO)

<@bobyzgirlllnpm/neque-molestiae-qui
  name="Add the title of your event"
  description="A nice description does not hurt"
  startDate="2022-02-21"
  endDate="2022-03-24"
  startTime="10:13"
  endTime="17:57"
  location="Somewhere over the rainbow"
  options="['Apple','Google','iCal','Microsoft365','Outlook.com','Yahoo']"
  timeZone="Europe/Berlin"
  trigger="click"
  inline
  listStyle="modal"
  iCalFileName="Reminder-Event"
/>

More Examples • Full Configuration Documentation • PRO Version

🤗 Support it!

You like this project? It would be awesome if you would support it, so it lives on!

⭐ Star the repository in order to stay up-to-date and save it for later!
📣 Spread the word! On Twitter/X, Medium, Discord, Facebook, ...
✍️ Leave a review at ProductHunt.
💌 Send us some positive feedback at the discussion board.

⚡ Changelog

Find all changes in the dedicated file at CHANGELOG.md.

🙌 Contributing

Anyone is welcome to contribute, but mind the guidelines:

IMPORTANT NOTE: Run npm install and npm run format to auto-lint!

📃 Copyright and License

Licensed under Elastic License 2.0 (ELv2).

About open-source: We consider ourselves open-source. However, we are also aware of the controversy coming with licenses like the one selected. Therefore, and contrary to many other companies and products, we no longer use the term in any marketing statements unless it is about other pieces which really are under an official OSI license.

Speaking about the license: We love it, because it is so simple. Have a look! You are basically free to do anything unless you are not offering the tool itself as a product or service; or want to remove copyright and license stuff. In doubt, simply ask and we find a way. :)

💜 Kudos go to

...all amazing contributors: