@ubique-innovation/react-icalendar-link

react-icalendar-link

Ability to create link for downloading ics file

Install

npm install --save react-icalendar-link

Usage

import React from "react";
import ICalendarLink from "react-icalendar-link";

class App extends React.Component {
  render() {
    const event = {
      title: "My Title",
      description: "My Description",
      startTime: "2018-10-07T10:30:00+10:00",
      endTime: "2018-10-07T12:00:00+10:00",
      location: "10 Carlotta St, Artarmon NSW 2064, Australia",
      attendees: [
        "Hello World <[e-mail]>",
        "Hey <[e-mail]>",
      ]
    }
    return (
      <ICalendarLink event={event}>
        Add to Calendar
      </ICalendarLink>
    );
  }
}

Using a Different File Name

By default, the file name that a user downloads is download.ics. You can specify a different file name using the filename prop.

<ICalLink filename="blahblah.ics" {...{ event }} />

Using Raw Content

Currently it provides very few fields. You can provide the raw content for the extra fields instead.

import React from "react";
import ICalendarLink from "react-icalendar-link";

class App extends React.Component {
  render() {
    const event = {
      title: "My Title",
      description: "My Description",
      startTime: "2018-10-07T10:30:00+10:00",
      location: "10 Carlotta St, Artarmon NSW 2064, Australia",
    }
    const rawContent = `ATTENDEE;CN="Cyrus Daboo";CUTYPE=INDIVIDUAL;PARTSTAT=ACCEPTED:mailto:[e-mail]
ATTENDEE;CN="Wilfredo Sanchez Vega";CUTYPE=INDIVIDUAL;PARTSTAT=NEEDS-ACTION;ROLE=REQ-PARTICIPANT;RSVP=TRUE:mailto:[e-mail]
ATTENDEE;CN="Bernard Desruisseaux";CUTYPE=INDIVIDUAL;PARTSTAT=NEEDS-ACTION;ROLE=REQ-PARTICIPANT;RSVP=TRUE:mailto:[e-mail]
ATTENDEE;CN="Mike Douglass";CUTYPE=INDIVIDUAL;PARTSTAT=NEEDS-ACTION;RSVP=TRUE:mailto:[e-mail]`;

    return (
      <ICalendarLink event={event} rawContent={rawContent}>
        Add to Calendar
      </ICalendarLink>
    );
  }
}

License

MIT © josephj MIT © Ubique Innovation