feat: adds a new event id accessor (#2693)

if id is found, used as a react 'key', falls back to default

src/Calendar.js

@@ -225,6 +225,17 @@ class Calendar extends React.Component {
      */
     endAccessor: accessor,
 
+    /**
+     * The id of the event. Must resolve to a string or number. Used as the key for the event in the DOM. If not provided, the event will be given a key of 'evt\_{index}'.
+     *
+     * ```js
+     * string | number | (event: Object) => string | number
+     * ```
+     *
+     * @type {(func|string)}
+     */
+    eventIdAccessor: accessor,
+
     /**
      * Returns the id of the `resource` that the event is a member of. This
      * id should match at least one resource in the `resources` array.
@@ -898,6 +909,8 @@ class Calendar extends React.Component {
     resourceIdAccessor: 'id',
     resourceTitleAccessor: 'title',
 
+    eventIdAccessor: 'id',
+
     longPressThreshold: 250,
     getNow: () => new Date(),
     dayLayoutAlgorithm: 'overlap',
@@ -923,6 +936,7 @@ class Calendar extends React.Component {
     resourceAccessor,
     resourceIdAccessor,
     resourceTitleAccessor,
+    eventIdAccessor,
     eventPropGetter,
     backgroundEventPropGetter,
     slotPropGetter,
@@ -971,6 +985,7 @@ class Calendar extends React.Component {
         resource: wrapAccessor(resourceAccessor),
         resourceId: wrapAccessor(resourceIdAccessor),
         resourceTitle: wrapAccessor(resourceTitleAccessor),
+        eventId: wrapAccessor(eventIdAccessor),
       },
     }
   }

src/DayColumn.js

@@ -210,6 +210,7 @@ class DayColumn extends React.Component {
     return styledEvents.map(({ event, style }, idx) => {
       let end = accessors.end(event)
       let start = accessors.start(event)
+      let key = accessors.eventId(event) ?? 'evt_' + idx
       let format = 'eventTimeRangeFormat'
       let label
 
@@ -230,7 +231,7 @@ class DayColumn extends React.Component {
           style={style}
           event={event}
           label={label}
-          key={'evt_' + idx}
+          key={key}
           getters={getters}
           rtl={rtl}
           components={components}

stories/props/eventIdAccessor.mdx

@@ -0,0 +1,10 @@
+import { Canvas, Story } from '@storybook/addon-docs'
+
+# eventIdAccessor
+
+- type: `string | number | function (event: Object) => string | number`
+- default: 'id'
+
+The id of the event. Must resolve to a string or number. Used as the key for the event in the DOM. If not provided, the event will be given a key of 'evt\_{index}'.
+
+<Story id="props--event-id-accessor" />

stories/props/eventIdAccessor.stories.js

@@ -0,0 +1,33 @@
+import React from 'react'
+import { Calendar } from '../../src'
+import { accessorStoryArgs } from './storyDefaults'
+import mdx from './eventIdAccessor.mdx'
+
+export default {
+  title: 'props',
+  component: Calendar,
+  argTypes: {
+    localizer: { control: { type: null } },
+    events: { control: { type: null } },
+    defaultDate: {
+      control: {
+        type: null,
+      },
+    },
+  },
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
+}
+
+const Template = (args) => (
+  <div className="height600">
+    <Calendar {...args} />
+  </div>
+)
+
+export const EventIdAccessor = Template.bind({})
+EventIdAccessor.storyName = 'eventIdAccessor'
+EventIdAccessor.args = accessorStoryArgs

stories/props/storyDefaults.js

@@ -28,6 +28,7 @@ export const accessorStoryArgs = {
   titleAccessor: 'label',
   tooltipAccessor: 'label',
   startAccessor: 'startDate',
+  idAccessor: 'id',
 }
 /** END Specific to event key accessors */