diff --git a/src/Calendar.js b/src/Calendar.js
index 6025cda32..65dcd9a4d 100644
--- a/src/Calendar.js
+++ b/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),
},
}
}
diff --git a/src/DayColumn.js b/src/DayColumn.js
index c126385fc..27eac9917 100644
--- a/src/DayColumn.js
+++ b/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}
diff --git a/stories/props/eventIdAccessor.mdx b/stories/props/eventIdAccessor.mdx
new file mode 100644
index 000000000..ae1385557
--- /dev/null
+++ b/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}'.
+
+