josephj / react-icalendar-link Goto Github PK

Ability to create a react link which allows user to download the ics file

HTML 4.48% JavaScript 24.52% CSS 0.65% TypeScript 70.35%

react-icalendar-link's Introduction

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 <[email protected]>",
        "Hey <[email protected]>",
      ]
    }
    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:[email protected]
ATTENDEE;CN="Wilfredo Sanchez Vega";CUTYPE=INDIVIDUAL;PARTSTAT=NEEDS-ACTION;ROLE=REQ-PARTICIPANT;RSVP=TRUE:mailto:[email protected]
ATTENDEE;CN="Bernard Desruisseaux";CUTYPE=INDIVIDUAL;PARTSTAT=NEEDS-ACTION;ROLE=REQ-PARTICIPANT;RSVP=TRUE:mailto:[email protected]
ATTENDEE;CN="Mike Douglass";CUTYPE=INDIVIDUAL;PARTSTAT=NEEDS-ACTION;RSVP=TRUE:mailto:[email protected]`;

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

License

MIT © josephj

react-icalendar-link's People

Contributors

Stargazers

Watchers

Forkers

bugatino aatif-shaikh tingchun0113 miguelenc hemanns codemonkeh-dave connectycube hundehausen vonstroheim ubiqueinnovation collabsoft phogel alexrogalskiy dlvoy

react-icalendar-link's Issues

How to add multiple events

I have a feature where I have to allow to export multiple events altogether. Can I add all events in an array and give it as a request?

how to add attendee/guests to calendar

I tried to check iCalendar docuemntation and then try to create an event like this

 const event = {
      title: "My Title",
      description: "My Description",
      startTime: "2021-04-20T10:30:00+05:30",
      endTime: "2021-04-20T12:00:00+05:30",
      location: "Jamangar",
      guests/attendees: "[email protected]"
    }

When generating link in chrome mobile opens a blank window with blob text file

Is there is a way to add support for chrome mobile?

Daylight savings is not supported?

Hi, the tool was working great, until I noticed it was shifting times by an hour. This is a result of the the archaic daylight savings thing we still do in my area.

I am very new to working with ical so forgive me if I am just failing to understand it.

From what I can see the tool doesn't have any options for it, and the solution involves adding a BEGIN:VTIMEZONE segment to the ical file which includes the STANDARD and DAYLIGHT times, but I can't just use the raw data slot of this tool for that. Using VTIMEZONE also seems to change the format of the events DTSTART from example DTSTART:20220716T150000Z to something like DTSTART;TZID="Eastern Standard Time":20211118T140000, and I am unsure if the tool supports that in any way.

an event description with /n (new lines) in it only shows the first line in the downloaded calendar event.

Blob error when packaged

Hi I have testet the component and it works fine in the workbench, but when it is packaged and installed in a sharepoint site, it gives a 404 error.. I have found out that it is missing this line.
linkEl.dataset.interception = 'off'

in the downloadBlob function

rawContent

Warning: React does not recognize the rawContent prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase rawcontent instead. If you accidentally passed it from a parent component, remove it from the DOM element.

Missing required PRODID property

Hi 👋

To be RFC5545 compliant we need to have the property PROID defined

3.7.3. Product Identifier

Property Name: PRODID

Purpose: This property specifies the identifier for the product that
created the iCalendar object.

Value Type: TEXT

Property Parameters: IANA and non-standard property parameters can
be specified on this property.

Conformance: The property MUST be specified once in an iCalendar
object.

Description: The vendor of the implementation SHOULD assure that
this is a globally unique identifier; using some technique such as
an FPI value, as defined in [ISO.9070.1991].
  This property SHOULD NOT be used to alter the interpretation of an
  iCalendar object beyond the semantics specified in this memo.  For
  example, it is not to be used to further the understanding of non-
  standard properties.
Format Definition: This property is defined by the following
notation:
   prodid     = "PRODID" pidparam ":" pidvalue CRLF

   pidparam   = *(";" other-param)

If you have time to add this would be great ! Thanks !

React 18 incompatible?

I get the error
Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<ICalLink> & Pick<Readonly<Props>, never> & InexactPartial<...> & InexactPartial<...>'.

is it because of this?

Invariant Violation: View config getter callback for component `a` must be a function (received `undefined`). Make sure to start component names with a capital letter.

Hey!

I am getting an error when going to a screen where I have the ICalendarLink tag added.
Is there any way to solve this issue? I haven't found anything on this error and I have already checked if there are components that don't start with a capital letter, all tags are starting with a capital letter.

Invariant Violation: View config getter callback for component `a` must be a function (received `undefined`). Make sure to start component names with a capital letter.

This error is located at:
    in a (created by ICalLink)
    in ICalLink (created by EditPartyScreen)
    in RCTView (created by View)
    in View (created by EditPartyScreen)
    in RCTView (created by View)
    in View (created by EditPartyScreen)
    in EditPartyScreen (created by SceneView)
    in StaticContainer
    in EnsureSingleNavigator (created by SceneView)
    in SceneView (created by SceneView)
    in RCTView (created by View)
    in View (created by DebugContainer)
    in DebugContainer (created by MaybeNestedStack)
    in MaybeNestedStack (created by SceneView)
    in RNSScreen (created by AnimatedComponent)
    in AnimatedComponent
    in AnimatedComponentWrapper (created by Screen)
    in MaybeFreeze (created by Screen)
    in Screen (created by SceneView)
    in SceneView (created by NativeStackViewInner)
    in RNSScreenStack (created by ScreenStack)
    in ScreenStack (created by NativeStackViewInner)
    in NativeStackViewInner (created by NativeStackView)
    in RNCSafeAreaProvider (created by SafeAreaProvider)
    in SafeAreaProvider (created by SafeAreaInsetsContext)
    in SafeAreaProviderCompat (created by NativeStackView)
    in NativeStackView (created by NativeStackNavigator)
    in Unknown (created by NativeStackNavigator)
    in NativeStackNavigator (created by App)
    in EnsureSingleNavigator
    in BaseNavigationContainer
    in ThemeProvider
    in NavigationContainerInner (created by App)
    in RCTView (created by View)
    in View (created by App)
    in App (created by ExpoRoot)
    in ExpoRoot
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in main(RootComponent)
at node_modules\expo\build\environment\react-native-logs.fx.js:27:4 in error
at node_modules\react-native\Libraries\Core\ExceptionsManager.js:95:4 in reportException
at node_modules\react-native\Libraries\Core\ExceptionsManager.js:141:19 in handleException
at node_modules\react-native\Libraries\Core\setUpErrorHandling.js:24:6 in handleError
at node_modules\expo-error-recovery\build\ErrorRecovery.fx.js:12:21 in ErrorUtils.setGlobalHandler$argument_0
at node_modules\regenerator-runtime\runtime.js:63:36 in tryCatch
at node_modules\regenerator-runtime\runtime.js:294:29 in invoke
at node_modules\regenerator-runtime\runtime.js:63:36 in tryCatch
at node_modules\regenerator-runtime\runtime.js:155:27 in invoke
at node_modules\regenerator-runtime\runtime.js:165:18 in PromiseImpl.resolve.then$argument_0
at node_modules\react-native\node_modules\promise\setimmediate\core.js:37:13 in tryCallOne
at node_modules\react-native\node_modules\promise\setimmediate\core.js:123:24 in setImmediate$argument_0
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:248:12 in _allocateCallback$argument_0
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:112:14 in _callTimer
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:166:14 in _callReactNativeMicrotasksPass
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:418:41 in callReactNativeMicrotasks
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:393:6 in __callReactNativeMicrotasks
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:135:6 in __guard$argument_0
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:370:10 in __guard
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:134:4 in flushedQueue

JSX element class does not support attributes because it does not have a 'props' property.

Get the error "JSX element class does not support attributes because it does not have a 'props' property." when implementing the very example provided on the usage page.

Any way to change the file name?

At the moment it just downoads as 'download.ics'.

Introudce husky and prettier

to enforce the file formatting

Have issue with downloading ics

Hello my friend i have one issue. I am usin ICalLink, but hide it, because i am receiving event after click, due to waiting for response from server and add some additional info, and in that case i ve decided to create another button and when click on it, and wait for all await to end, then i want to download, but i dont know, how to download it, because ref is not helping and varian with document.getElementsByClassName is an antipattern, so i will be very grateful if u could help me with this

Add a `onNotSupported` prop to display error message when users are on Chrome iOS

I recently wanted to render an error message for Chrome iOS users but had to do something like this because of the stop propagation call inside of the handleClick

const isChromeIOS = ...

const renderBtnContent = () => (
   <>
      ...
   </>
);

<Button onClick={showErrorMessage}>
   {isChromeIOS ? : renderBtnContent() : (
      <ICalendarLink>
         {renderBtnContent()}
      </ICalendarLink>
   )}
</Button>

So I wanted to propose a new prop to ICalendarLink... Something along the lines of onNotSupported to pass in a function that handles error messages. E.g.,

   <ICalendarLink onNotSupported={showErrorMessage>
      {renderBtnContent()}
   </ICalendarLink>

Let me know what you think, I can create a PR for this

how to add reminder (ex. alert before 10 minute)

ReferenceError: window is not defined

Using a react app created with create-react-app trows the following error:

webpack:///./client/node_modules/react-icalendar-link/dist/index.es.js?:137
 var ua = window.navigator.userAgent;
 
[1] ReferenceError: window is not defined
[1]     at isIOSChrome (webpack:///./client/node_modules/react-icalendar-link/dist/index.es.js?:137:14)

Warning: React does not recognize the `rawContent` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `rawcontent` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

Using ICalendarLink causing warning when used with React. Happening both when rawContent prop is passed, and when it is not.

import ICalendarLink from 'react-icalendar-link';

<ICalendarLink event={event}>
     Add to Calendar
</ICalendarLink>

Warning: React does not recognize the `rawContent` prop on a DOM element.
If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `rawcontent` instead.
If you accidentally passed it from a parent component, remove it from the DOM element.
 at a
    at ICalLink

Support for React 17?

We use React 17 in our project and get dependency conflicts trying to install this package. Would supporting React 17 require any changes to the package?

Ability to set raw data

As a developer
I would like to set some raw iCalendar fields which hasn't provided by this utility
so that I can keep using it

Currently there are several feature requests for the fields I haven't made. I think it's good to open the possibility for developer to set the iCalendar partial raw string directly.