npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@culturehq/add-to-calendar

v1.1.2

Published

A small package for adding an event to a calendar.

Downloads

6,477

Readme

@culturehq/add-to-calendar

Build Status Package Version

A small package for adding an event to a calendar.

Getting started

First, add @culturehq/add-to-calendar to your package.json dependencies, then install using either npm install or yarn install. Next, you can add the component through:

<AddToCalendar
  event={{
    name: "Happy Hour",
    details: "Let's go after work",
    location: "Boston, MA",
    startsAt: "2018-12-06T17:00:00-05:00",
    endsAt: "2018-12-06T18:00:00-05:00"
  }}
/>

To get the styles, be sure it import @culturehq/add-to-calendar/dist/styles.css into your application. You can style it appropriately for your app by overriding the CSS classes used internally. They are listed in styles.css.

children

The label for the button that triggers the dropdown. Defaults to "Add to My Calendar".

event

Should be an object representing the event to be added to the various calendars. The keys are:

  • name - the name of the event
  • details - the details of the event
  • location - the location of the event
  • startsAt - the start time of the event, formatted as an ISO string
  • endsAt - the end time of the event, formatted as an ISO string

open

Defaults to false. Whether or not the dropdown should start open. (Will be ignored after initial render.)

filename

Used to specify the name of the downloaded iCalendar file (where applicable - Apple Calendar, Outlook). Defaults to "download".

Development

You can run the tests by running yarn test and lint by running yarn lint. You can run the local server by running yarn start which will start the docs server on http://localhost:8080.

Contributing

Bug reports and pull requests are welcome on GitHub at https://github.com/CultureHQ/add-to-calendar.

License

The code is available as open source under the terms of the MIT License.