Giter Site home page Giter Site logo

wdenouden / add-to-calendar-button Goto Github PK

View Code? Open in Web Editor NEW

This project forked from add2cal/add-to-calendar-button

0.0 0.0 0.0 9.94 MB

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

Home Page: https://add-to-calendar-button.com

License: Other

JavaScript 59.78% CSS 40.22%

add-to-calendar-button's Introduction

Add to Calendar Button

Code Quality npm Installations Total npm Installations per Month jsDelivr npm Hits npm bundle size


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.

#1 Product of the Day on ProductHunt



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.

Supported Calendars: Apple (via iCal), Google, Microsoft (365, Outlook, Teams), Yahoo, 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.

Supported Technology: Angular, React, Vue, Svelte, and every other project that can load JavaScript

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 playground.

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, 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; 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.



📦 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/add-to-calendar-button@2" async defer></script>

Option 2: npm

Import the package using the following npm command:

npm install add-to-calendar-button

Import the module into your project/component

import 'add-to-calendar-button';

Based on your framework/library, you might need to make minor adjustments to the respective config. Find the details for the most common ones below.


Angular

At the app.module.ts, import CUSTOM_ELEMENTS_SCHEMA from @angular/core and add the following to the @NgModule block:

@NgModule({
  //(...),
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})

React

Option A:

With basic React projects, the web component works out-of-the-box.

If you are working with TypeScript or other stricter setups, you would need to define a respective global JSX interface.

declare global {
  namespace JSX {
    interface IntrinsicElements {
      ['add-to-calendar-button']: CustomElement<AddToCalendarButton>;
    }
  }
}

Option B:

If this does not work OR if you want to keep it more convenient, you should use the official Add to Calendar Button React Wrapper (click here).

This approach also enables you to provide object and array type props as objects and arrays. Find all further information within the wrapper repository's Readme file.


Vue 3

In the vite.config.js/ts, add the following compiler option to treat all tags with a dash as custom elements and get rid of the warning. Anything else works out-of-the-box.

compilerOptions: {
  isCustomElement: (tag) => tag.includes('-')
}

If you want to be more precise, you can also write something like tag.startsWith('add-') to apply this rule only to tags starting with "add-".


Svelte

Works out-of-the-box. Nice!


Astro

For Astro as well as other SSR setups, you might want to include the script from the CDN rather than working with the npm package!

If you still want to go for the npm way, you would need to add something like this to your page (instead of the import statement):

<script type="module" hoist>
  const observer = new IntersectionObserver((entries) => {
    for (const entry of entries) {
      if (!entry.isIntersecting) continue;
      observer.disconnect();
      import('../../node_modules/add-to-calendar-button/dist/module/index.js');
    }
  });
  const instances = document.querySelectorAll('add-to-calendar-button');
  for (const instance of instances) observer.observe(instance);
</script>



🎛️ Configuration

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

<add-to-calendar-button></add-to-calendar-button>

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".

Theoretically, you could also add all the configuration as JSON structured String by placing this string as the TextContent of the tag. This is mainly due to backwards compatibility reasons and no longer recommended, since it also does not detect changes!


Minimal structure (required)

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

A time zone is not required, but recommended.

<add-to-calendar-button
  name="Add the title of your event"
  startDate="2022-02-21"
  options="['Google']"
>
</add-to-calendar-button>

A more powerful example

<add-to-calendar-button
  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"
>
</add-to-calendar-button>

You can find more examples as well as an interactive playground at the demo page: add-to-calendar-button.com.



All options and features

Find all information about the available attributes and how to configure specific features on the demo page at add-to-calendar-button.com/configuration.




⚡ Changelog

npm Version Build Status

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

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. :)




💜 Kudos go to

uxwing.com as well as all contributors:


add-to-calendar-button's People

Contributors

jekuer avatar dependabot[bot] avatar add-to-calendar avatar chadoh avatar bryan-brancotte avatar nticaric avatar ortovoxx avatar denperidge avatar c0rychu avatar ssaaiidd avatar killerrin avatar emilebosch avatar acm-will avatar turcuciprian avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.