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

Overview

Your next Add-to-Calendar Button

Add-to-Calendar Button

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

Use case // Who this is for

This is for everybody, who wants to include a button at his/her 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. Simply define your button configuration via JSON and everything else is automatically generated by the script. It is for this simple use case. No strings attached.

Background // Why this repo exists

While building a personal wedding page, I was confronted with the task to include a button, where invited people could save the event to their calendars. I did not want to build this from scratch (first) and therefore started the usual web research. Unfortunately, all I found where some extremely outdated code snippets, which did not really fit all the modern systems and calendar tools. Beside that, there was only the solution by AddEvent.com - all over the place. I was looking at CodePen and all I found where thousands of pens, which basically only included the AddEvent tool. The problems with AddEvent.com:

  • it holds tons of features, which I did not need. I do not want to track my button. I just want it to work.
  • it limits the free tier to 50 event adds per month (consider the wedding case - this is way too less).
  • it brings some data privacy issues, since you basically send your users to their service.
  • the UX/UI is not ideal (imho). Bottom line: Pay for features, which I do not need - at additional privacy "cost" - that made me create this solution (for you).

DEMO

See jekuer.github.io/add-to-calendar-button for a live demo.

Features

  • Simple and convenient integration of multiple buttons - configure them directly within the HTML code.
  • Optimized UX (for desktop and mobile) - adjustable.
  • Beautiful UI (the best combined from experts around the world).
  • Up-to-date integration of all popular calendars:
    • Google Calendar.
    • Yahoo Calender.
    • Microsoft 365 (and Outlook).
    • Automatically generated iCal/ics files (for all other calendars, like Apple).
  • Timed and all-day events.
  • Translatable labels and dynamic.
  • Well documented code, to easily understand the processes.

Demo Screenshot

Setup

Option 1: Simple

  1. Simply download the code from GitHub or clone the git repository.
  2. Copy the css (atcb.min.css) and js (atcb.min.js) files from the assets (not the "npm_dist"!) folders into your project (the .min. files are required, but it is recommended to also copy the raw and map files).
  3. Include those files in your project. As usual, the css goes into the (<link rel="stylesheet" href="./assets/css/atcb.min.css">), the js into the footer (<script src="./assets/js/atcb.min.js" defer></script>). You can also combine them with other files, if you want to.
  4. Create your button as can be seen in the "Configuration" section below.
  5. That is it. The script takes care of all the rest. :)

Option 2: npm

  1. Requires Node.js, npm, and a project, which builds on it (e.g. React or Angular).
  2. Run npm install add-to-calendar-button.
  3. Import the module into your project/component. For example with Angular/React: import { atcb_init } from 'add-to-calendar-button';.
  4. Init the js after the DOM has been loaded. To determine the right moment and execute, ...
  5. with Angular, you would use ngAfterViewInit() with atcb_init();;
  6. with React, you might want to include an event listener like document.addEventListener('DOMContentLoaded', atcb_init, false);.
  7. Include the css. For example with Angular or React, add the following to the global style.css: @import 'add-to-calendar-button/assets/css/atcb.min';
  8. Create your button as can be seen in the "Configuration" section below.
  9. That is it. The script takes care of all the rest. :)

Configuration

A button can be easily created by placing a respective placeholder, wherever you want the button to appear. (The style="display:none;" theoretically is not necessary, but should be used for better compatibility.)

<div class="atcb" style="display:none;">
  (...)
</div>

Within this placeholder, you can easily configure the button, by placing a respective JSON structure. Mind that with Angular, you might need to escape the { with {{ '{' }} and } with {{ '}' }}; with React it would be { '{' } and { '}' }.

Minimal structure (required)

<div class="atcb" style="display:none;">
  {
    "title":"Add the title of your event",
    "dateStart":"02-21-2022",
    "dateEnd":"03-24-2022",
    "options":[
      "Google"
    ]
  }
</div>

Full structure

<div class="atcb" style="display:none;">
  {
    "label":"Add to Calendar",
    "title":"Add the title of your event",
    "description":"A nice description does not hurt",
    "dateStart":"02-21-2022",
    "dateEnd":"03-24-2022",
    "timeStart":"10:13",
    "timeEnd":"17:57",
    "location":"Somewhere over the rainbow",
    "options":[
      "Apple",
      "Google",
      "iCal",
      "Microsoft365",
      "Outlook.com",
      "Yahoo"
    ],
    "timeZone":"Europe/Berlin",
    "timeZoneOffset":"+01:00",
    "trigger":"click",
    "iCalFileName":"Reminder-Event"
  }
</div>

Important information and hidden features

  • The "label" is optional, but enables you to customize the button text. Default: "Add to Calendar".
  • Dates need to be formatted as MM-DD-YYYY.
  • You can also use the word "today" as date. It will then dynamically use the current day at click.
  • Add "+5" at the end of the date to dynamically add 5 days (or any other number). "01-30-2022+12" would generate the 11th of February 2022. This can be interesting, when combined with "today".
  • Times need to be formatted as HH:MM.
  • Times are optional. If not set, the button generates all-day events.
  • 1 option is required. You can add as many as you want. The supported formats are listed above.
  • If you want to rename (or translate) a label, use the following schema at the options: optionName + Pipe + yourLabel. "Google|Google Kalender" would generate a Google Calendar option, but label it as "Google Kalender".
  • If no timeZone and no timeZoneOffset is provided, the date refers to UTC time.
  • You can add a timeZoneOffset or timeZone (TZ name). You can find a list of them at Wikipedia.
  • If the timeZoneOffset is set, it will always override the timeZone. It is recommended to only use 1 of them at a time.
  • The timeZone might not work in very old browsers, but also considers dynamic changes like summer/winter time.
  • timeZoneOffset works with older browsers, but is quite static.
  • You can set the trigger to "click". This makes the button open on click at desktop. Otherwise, the default would be to open on hover. On touch devices, this makes no difference.
  • If you want to define a specific name for any generated ics file (iCal), you can specify it via the "iCalFileName" option. The default would be "event-to-save-in-my-calendar".

Contributing

Anyone is welcome to contribute, but mind the guidelines:

License

The code is available under the GPU 3.0 license.

Changelog (major only)

  • v1.1.0 : npm functionality
  • v1.0.0 : initial release

Kudos go to

Comments
  • [Bug]: All day event dates are one day off on desktop, but correct on Iphone

    [Bug]: All day event dates are one day off on desktop, but correct on Iphone

    What happened?

    On Chrome 106.0.5249.119, dates are off by 1 day (minus 1 day)

    I configure: startDate: "2022-03-28", endDate: "2022-03-29",

    ICS file (Chrome): DTSTART;VALUE=DATE:20221027 DTEND;VALUE=DATE:20221029

    ICS file (other browsers): DTSTART;VALUE=DATE:20221028 DTEND;VALUE=DATE:20221030

    Unable to apply correction due to inconsistent behaviour across different browsers

    How to reproduce?

    add-to-calendar-button version: 1.18.3

    configure like this: startDate: "2022-03-28", endDate: "2022-03-29",

    Open app in Chrome 106.0.5249.119

    Now download ICS file, you will see: DTSTART;VALUE=DATE:20221027 DTEND;VALUE=DATE:20221029

    Also open Google Calendar -> you will see 27th October to 28 However, intented date was 28th to 29th

    The problem is that it is not behaving consistently across all browsers. Otherwise, it would be easy to just add 1 day to dates for correction

    Open app in any other browser (Opera, Firefox, Iphone iOS Chrome etc) Download ICS file and you will see: DTSTART;VALUE=DATE:20221028 DTEND;VALUE=DATE:20221030

    Also open Google Calendar -> you will see 28th October to 29 So on other browsers, it works as intended. But Desktop Chrome (106.0.5249.119) is 1 day off

    On top of that, I am getting following browser console log, when opening calendar (this error also happens in other browsers - not only Chrome):

    image

    Screenshots & more

    No response

    System & Environment

    add-to-calendar-button version: 1.18.3

    Days display 1 day earlier (e.g. I enter 2022-03-27 as begin, but on the Google Calendar I see 26th October): Device: PC, Windows 10, 64Bit Browser: Chrome 106.0.5249.119

    bug good first issue 
    opened by GorkemSinirlioglu 14
  • downloads not working in in-app browser (instagram)

    downloads not working in in-app browser (instagram)

    Somehow the Apple and ICS version are broken (do nothing) in the instagram in-app browser. I tried to find out why, because apparently other downloads work, so it is not an issue with instagram, but i could not verify that.

    would be great if this was fixed, because this totally breaks this tool for us.

    PS: thank you for the awesome package, otherwise it is working perfectly and looks clean and polished!

    bug 
    opened by svchostdotexe 11
  • [Bug]: Relax subscription protocol validation

    [Bug]: Relax subscription protocol validation

    What happened?

    Kind of in a chicken-or-the-egg situation right now. I've been digging into the newish support for subscriptions and it went pretty smoothly up until Google.

    Google Calendar redirects to: https://calendar.google.com/calendar/u/0/r?cid={url}, but I'm having an issue with getting my URL accepted. For some reason, https:// URLs don't seem to be allowed (or maybe there's a certain cert that they're looking for? StackOverflow answers were inconclusive), but http:// and webcal:// both work for me.

    Unfortunately, add-to-calendar-button requires https:// URLs as the icsFile value, so there's not an easy way for me to get both sides to agree on something that works. In an ideal world, I'd just use webcal:// or http:// (or really, figure out why Google doesn't like https).

    How to reproduce?

    Use an URL with https:// at the start for the value of icsFile.

    Screenshots & more

    No response

    System & Environment

    bug 
    opened by holman 10
  • [Bug]: 1.16.0 does not load

    [Bug]: 1.16.0 does not load

    What happened?

    This may just be because we are using React, but browser check seems to have broken with the most recent version. Console shows:

    no further initialization due to wrong environment (no browser)

    How to reproduce?

    We are running React and initialize like this:

    const AddToCalendarButton = (props) => {
      const { event } = props || {};
      useEffect(ATCBInit, []);
    
      if (!event) return null;
    
      return <div className="atcb">{JSON.stringify(event)}</div>;
    };
    

    Screenshots & more

    CleanShot 2022-10-01 at 18 31 13

    System & Environment

    1. macOS latest
    2. Chrome latest
    bug 
    opened by houmark 7
  • Make the script CSP compliant

    Make the script CSP compliant

    It uses new Function thus requiring CSP unsafe-eval. Here Luckily only uses it in the browser detection section. Here is the patched code.

    // CHECKING FOR SPECIFIC DEVICED AND SYSTEMS
    // browser
    const isBrowser = ()=>{try { return this===window; } catch(e) { return false; }}
    // iOS
    const isiOS = isBrowser()
      ? ()=>{
          if ((/iPad|iPhone|iPod/i.test(navigator.userAgent || navigator.vendor || window.opera) && !window.MSStream) || (navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1)) { return true; } else { return false; }
        }
      : ()=>{return false;}
    // Android
    const isAndroid = isBrowser()
      ? ()=>{
          if (/android/i.test(navigator.userAgent || navigator.vendor || window.opera) && !window.MSStream) { return true; } else { return false; }
        }
      : ()=>{return false;};
    // Chrome
    const isChrome = isBrowser()
      ? ()=>{
          if (/chrome|chromium|crios/i.test(navigator.userAgent)) { return true; } else { return false; }
        }
      : ()=>{return false;};
    // Mobile
    const isMobile = () => {
      if (isAndroid() || isiOS()) {
        return true;
      } else {
        return false;
      }
    };
    // WebView (iOS and Android)
    const isWebView = isBrowser()
      ? ()=>{
          if (/(; ?wv|(iPhone|iPod|iPad).*AppleWebKit(?!.*Safari))/i.test(navigator.userAgent || navigator.vendor)) { return true; } else { return false; }
        }
      : ()=>{return false;};
    // checking for problematic apps
    const isProblematicWebView = isBrowser()
      ? ()=>{
          if (/(Instagram)/i.test(navigator.userAgent || navigator.vendor || window.opera)) { return true; } else { return false; }
        }
      : ()=>{return false;};
    
    bug enhancement 
    opened by emilebosch 7
  • Provided time is not correct according to the timezone

    Provided time is not correct according to the timezone

    Example:

    <div class="atcb" style="display:none;"> { "name":"Reminder to star the add to calendar button repo", "description":"Check out the maybe easiest way to include add to calendar buttons to your website at:<br>‚Üí [url]https://github.com/add2cal/add-to-calendar-button[/url]", "startDate":"2023-02-14", "endDate":"2023-02-14", "startTime":"00:00", "endTime":"23:30", "location":"World Wide Web", "options":[ "Apple", "Google", "iCal", "Microsoft365", "MicrosoftTeams", "Outlook.com", "Yahoo" ], "timeZone":"America/Los_Angeles", "iCalFileName":"Reminder-Event" } </div>

    The result should show the start time 00:00 -> 1.00 and end time 23:30 -> 12:30 since I am in Asia/Dhaka Timezone. image but it is not.

    invalid 
    opened by mhasan-cmt 7
  • Support hooking into events

    Support hooking into events

    I'd like to track how many users actually follow through and click on one of the options (and possibly track which option they clicked to see which calendar apps are most relevant to support for my users).

    It'd be nice if browser events were triggered when users trigger the widget and (more importantly for me) when users select an option.

    enhancement 
    opened by treyhunner 6
  • Location not adding to Google Calendar app [iPhone Only]

    Location not adding to Google Calendar app [iPhone Only]

    When selecting the 'Google' option from the Add to Calendar dropdown, the 'Location' field is not being set in the Google Calendar app on iPhone. If the Google Calendar application is not installed on the device, the Calendar is opened in the Browser and is set appropriately.

    Issue is not reproducible on Desktops or Android devices. I have tested with the iCal and Apple options and Location is set as expected. All other values (Name, Description, Start/End Date+Times) seem to set as expected within Google Calendar.

    Test Site: https://www.musicofdenver.com/

    Replication Steps:

    1. Install Google Calendar application on iPhone
    2. Navigate to and select 'Add to Calendar' button
    3. Select 'Google' option
    4. Observe Location field is empty in Google Calendar app
    help wanted 
    opened by mlidsky 6
  • Add browserTZ option which allows the timezone to be the local browser timezone instead of UTC.

    Add browserTZ option which allows the timezone to be the local browser timezone instead of UTC.

    Thanks for the library. Worked almost perfectly except that I was asked to implement it for a situation in which the timezone wasn't specified in the date/time of the event.

    E.g. the data to be presented only had date, time and said "your local timezone."

    Given the nature of the setup - changing the business logic to force timezones into the existing legacy display of data wasn't an option.

    This feature request creates a new option "browserTz" which can override the specified timezone. If used it will create a link that uses the local users' timezone. Basically it strips the timezone field out of the ical/url link which causes the event to default to the browser/user's timezone. If that option is not specified then it does not change existing functionality.

    Types of changes

    • [ ] Bug fix (non-breaking change which fixes an issue)
    • [X ] New feature (non-breaking change which adds functionality)
    • [ ] Breaking change (fix or feature that would cause existing functionality to change)

    Checklist:

    • [X ] My code follows the code style of this project.
    • [X] My change requires a change to the Readme.md.
    • [X] I have updated the Readme.md accordingly.
    • [X] I have read the CONTRIBUTING document.
    duplicate 
    opened by AJRepo 6
  • Use of GPL license

    Use of GPL license

    Hi there, was the choice of GPL licensing intentional? GPL license makes it effectively impossible for anyone to use this for a commercial project.

    Seems like you've put a HUGE amount of work on this, I just don't want that to be wasted because of a restrictive license that means people won't see your awesome work.

    enhancement 
    opened by edmundmunday 6
  • [Bug]: Button is not being displayed in OUTLOOK/GMAIL

    [Bug]: Button is not being displayed in OUTLOOK/GMAIL

    What happened?

    I have followed the documentation and used provided code to send an email from Microsoft Power Automate. After sending the email, I cannot see button in our email. After digging it into developer tool in browser. I can see the class applied in DIV tag is being replaced with x_ i.e. x_atcb. That is why I suppose the button is not being displayed. Please help as soon as possible. Thank you so much in advance. :)

    How to reproduce?

    No response

    Screenshots & more

    No response

    System & Environment

    Browser (MS Edge, Google Chrome)

    bug 
    opened by Munavvar-Husein 5
  • Bump prettier from 2.7.1 to 2.8.1

    Bump prettier from 2.7.1 to 2.8.1

    Bumps prettier from 2.7.1 to 2.8.1.

    Release notes

    Sourced from prettier's releases.

    2.8.1

    ūüĒó Changelog

    2.8.0

    diff

    ūüĒó Release note

    Changelog

    Sourced from prettier's changelog.

    2.8.1

    diff

    Fix SCSS map in arguments (#9184 by @‚Äčagamkrbit)

    // Input
    $display-breakpoints: map-deep-merge(
      (
        "print-only": "only print",
        "screen-only": "only screen",
        "xs-only": "only screen and (max-width: #{map-get($grid-breakpoints, "sm")-1})",
      ),
      $display-breakpoints
    );
    

    // Prettier 2.8.0 $display-breakpoints: map-deep-merge( ( "print-only": "only print", "screen-only": "only screen", "xs-only": "only screen and (max-width: #{map-get($grid-breakpoints, " sm ")-1})", ), $display-breakpoints );

    // Prettier 2.8.1 $display-breakpoints: map-deep-merge( ( "print-only": "only print", "screen-only": "only screen", "xs-only": "only screen and (max-width: #{map-get($grid-breakpoints, "sm")-1})", ), $display-breakpoints );

    Support auto accessors syntax (#13919 by @‚Äčsosukesuzuki)

    Support for Auto Accessors Syntax landed in TypeScript 4.9.

    (Doesn't work well with babel-ts parser)

    class Foo {
      accessor foo: number = 3;
    </tr></table> 
    

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    dependencies 
    opened by dependabot[bot] 0
  • Bump @typescript-eslint/eslint-plugin from 5.47.1 to 5.48.0

    Bump @typescript-eslint/eslint-plugin from 5.47.1 to 5.48.0

    Bumps @typescript-eslint/eslint-plugin from 5.47.1 to 5.48.0.

    Release notes

    Sourced from @‚Äčtypescript-eslint/eslint-plugin's releases.

    v5.48.0

    5.48.0 (2023-01-02)

    Bug Fixes

    Features

    • eslint-plugin: specify which method is unbound and added test case (#6281) (cf3ffdd)
    Changelog

    Sourced from @‚Äčtypescript-eslint/eslint-plugin's changelog.

    5.48.0 (2023-01-02)

    Features

    • eslint-plugin: specify which method is unbound and added test case (#6281) (cf3ffdd)
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    dependencies 
    opened by dependabot[bot] 0
  • Bump eslint-config-prettier from 8.5.0 to 8.6.0

    Bump eslint-config-prettier from 8.5.0 to 8.6.0

    Bumps eslint-config-prettier from 8.5.0 to 8.6.0.

    Changelog

    Sourced from eslint-config-prettier's changelog.

    Version 8.6.0 (2023-01-02)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    dependencies 
    opened by dependabot[bot] 0
  • Bump @typescript-eslint/parser from 5.47.1 to 5.48.0

    Bump @typescript-eslint/parser from 5.47.1 to 5.48.0

    Bumps @typescript-eslint/parser from 5.47.1 to 5.48.0.

    Release notes

    Sourced from @‚Äčtypescript-eslint/parser's releases.

    v5.48.0

    5.48.0 (2023-01-02)

    Bug Fixes

    Features

    • eslint-plugin: specify which method is unbound and added test case (#6281) (cf3ffdd)
    Changelog

    Sourced from @‚Äčtypescript-eslint/parser's changelog.

    5.48.0 (2023-01-02)

    Note: Version bump only for package @‚Äčtypescript-eslint/parser

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    dependencies 
    opened by dependabot[bot] 0
  • Bump timezones-ical-library from 1.4.2 to 1.5.1

    Bump timezones-ical-library from 1.4.2 to 1.5.1

    Bumps timezones-ical-library from 1.4.2 to 1.5.1.

    Release notes

    Sourced from timezones-ical-library's releases.

    v1.5.1

    Stronger types

    v1.5.0

    new dist structure

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    dependencies 
    opened by dependabot[bot] 0
  • [Bug]: Brand icon and date box collapsed

    [Bug]: Brand icon and date box collapsed

    What happened?

    On the event selection window for multiple events, the brand icon and the date box collapsed down due to a global CSS property.

    How to reproduce?

    Set the following global css property (Automatically added by a library in my case): *, *::before, *::after { box-sizing: inherit; }

    Screenshots & more

    image

    System & Environment

    1. Linux Mint OS
    2. Chrome Browser
    bug 
    opened by fateslayer 2
Releases(v1.18.8)
Owner
Jens Kuerschner
Tech Founder, Leader, End-to-End Product/Program Manager, Full-Stack Developer.
Jens Kuerschner
Simple and flexible events calendar written in React

Simple and flexible events calendar written in React

Zach Silveira 120 Jan 1, 2023
Community events from TwitterSpaces to Live streams to Conferences

Community event calendar The goal of this project is to list all our awesome community virtual events like TwitterSpaces, Live Streams all in one plac

EddieHub 39 Jan 2, 2023
React calendar component with support for multiple views and events

Calend - calendar component for React Support for: day view three days view week view month view LIVE DEMO: https://calend.nibdo.com If given interfac

nibdo 135 Jan 1, 2023
A beautiful gradients timepicker component built in and for awesome React.

A beautiful gradients timepicker component built in and for awesome React.

Rahul Dhawani 22 Jul 28, 2022
A modern, beautiful, customizable date picker for React

react-modern-calendar-datepicker A modern, beautiful, customizable date picker for React. Installation ?? npm i react-modern-calendar-datepicker # or

Kiarash Zarinmehr 864 Jan 6, 2023
Beautiful, minimal and accessible date-picker for React.

sassy-datepicker Beautiful, minimal and accessible date-picker for react. Installation yarn add sassy-datepicker # or npm install sassy-datepicker Usa

null 43 Dec 31, 2022
Beautiful, minimal, accessible and customizable date-picker for React.

sassy-datepicker Beautiful, minimal, customizable and accessible date-picker for react. Installation yarn add sassy-datepicker # or npm install sassy-

null 43 Dec 31, 2022
A persian date input with picker, which allows the user to type or select the date from the picker.

React component for date and time input A persian(jalaali, jalali, shamsi) date input with picker, which allows the user to type or select the date fr

Kayvan Arianpour 9 Sep 8, 2022
Highly customizable animated progress timeline bar for React which emphasizes due proccess

progress-timeline-bar Highly customizable animated progress timeline bar for React which emphasizes due proccess current demo http://domosavant.com/ 2

Stephen Reed 20 Jun 10, 2022
react-daterange-picker 5.6 0.0 JavaScript A React based date range picker.

React Daterange Picker A React based date range picker. Demo Getting started Installation Add React Daterange Picker to your project by executing npm

onefinestay 560 Dec 10, 2022
Tempus Dominus is a powerful and robust date time picker for javascript.

Tempus Dominus Date/Time Picker v6.0.0-alpha14 Tempus Dominus is a powerful and robust date time picker for javascript. Version 6 is another major rew

Eonasdan 7.1k Jan 4, 2023
JavaScript Date Range, Date and Time Picker Component

Date Range Picker This date range picker component creates a dropdown menu from which a user can select a range of dates. I created it while building

Dan Grossman 10.6k Dec 30, 2022
A Bootstrap date picker component built with create-react-library.

A Bootstrap date picker component built with create-react-library.

Kamil PerczyŇĄski 2 Jan 27, 2022
React-dater - React date picker Made with create-react-library

React-dater - React date picker Made with create-react-library

Bidipto Bose 14 Dec 10, 2022
A React component to create horizontal timelines

horizontal-timeline A React component to create horizontal timelines Attention: this dependency requires Material-UI Installation npm install --save @

Mailtop 21 Oct 8, 2022
Snippet Box is a simple self-hosted app for organizing your code snippets. It allows you to easily create, edit, browse and manage your snippets in various languages.

Snippet Box is a simple self-hosted app for organizing your code snippets. It allows you to easily create, edit, browse and manage your snippets in various languages.

null 687 Jan 2, 2023
Simple date range picker extended from react-native-calendars

react-native-date-range-picker A simple Date Range Picker implemented with react-native-calendars. Getting started Install react-native-calendars. Cop

Nixon 94 Dec 28, 2022
ūüďč Task manager with react js you can add title add description , editūüďĚ, complete‚úĒ, remove‚ĚĆ, localstorage, dark mode ūüĆú

?? Task manager with react js you can add title add description , edit??, complete‚úĒ, remove‚ĚĆ, localstorage, dark mode ??

ali turkaman 17 Sep 23, 2022
Movies Reviewed by people, for people

PopCritic Movies Reviewed by people, for people PopCritic is a movie review website which is focussed on various aspects of films and help people find

Abhishek Chaudhary 74 Nov 13, 2022
A Whatsapp Clone which built with reactJS. You can sign in with your Google Account and you can chat in real time.

Whatsapp Clone with ReactJS In this app you can create a simple chat room and send messages to each other using our google accounts in the room. Whats

Mert Çankaya 10 Nov 13, 2022