Gathering detailed insights and metrics for @bobyzgirlllnpm/neque-molestiae-qui
Gathering detailed insights and metrics for @bobyzgirlllnpm/neque-molestiae-qui
Gathering detailed insights and metrics for @bobyzgirlllnpm/neque-molestiae-qui
Gathering detailed insights and metrics for @bobyzgirlllnpm/neque-molestiae-qui
npm install @bobyzgirlllnpm/neque-molestiae-qui
Typescript
Module System
Node Version
NPM Version
Cumulative downloads
Total Downloads
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
30
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.
See @bobyzgirlllnpm/neque-molestiae-qui.com for a live demo and playground.
Simple and convenient integration of 1 or many buttons, configurable directly within the HTML code.
Check the details at add-to-calendar-pro.com!
You can use the jsDelivr CDN and load the respective script directly into your website.
Place the script tag inside the <head>
section.
1<script src="https://cdn.jsdelivr.net/npm/@bobyzgirlllnpm/neque-molestiae-qui@2" async defer></script>
Install the package using the following npm command:
1npm install @bobyzgirlllnpm/neque-molestiae-qui
Import the module into your project/component
1import '@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.
A button can be easily created by using the respective custom element.
1<@bobyzgirlllnpm/neque-molestiae-qui></@bobyzgirlllnpm/neque-molestiae-qui> 2<!-- OR simply ... --> 3<@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".
1<@bobyzgirlllnpm/neque-molestiae-qui proKey="prokey-of-your-event" />
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.
1<@bobyzgirlllnpm/neque-molestiae-qui 2 name="Add the title of your event" 3 startDate="2022-02-21" 4 options="['Google']" 5 timeZone="America/Los_Angeles" 6/>
1<@bobyzgirlllnpm/neque-molestiae-qui 2 name="Add the title of your event" 3 description="A nice description does not hurt" 4 startDate="2022-02-21" 5 endDate="2022-03-24" 6 startTime="10:13" 7 endTime="17:57" 8 location="Somewhere over the rainbow" 9 options="['Apple','Google','iCal','Microsoft365','Outlook.com','Yahoo']" 10 timeZone="Europe/Berlin" 11 trigger="click" 12 inline 13 listStyle="modal" 14 iCalFileName="Reminder-Event" 15/>
More Examples • Full Configuration Documentation • PRO Version
You like this project? It would be awesome if you would support it, so it lives on!
Find all changes in the dedicated file at CHANGELOG.md.
Anyone is welcome to contribute, but mind the guidelines:
IMPORTANT NOTE: Run npm install
and npm run format
to auto-lint!
Copyright (c) Jens Kuerschner.
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. :)
...all amazing contributors:
No vulnerabilities found.
No security vulnerabilities found.