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}'. + + diff --git a/stories/props/eventIdAccessor.stories.js b/stories/props/eventIdAccessor.stories.js new file mode 100644 index 000000000..47ff82106 --- /dev/null +++ b/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) => ( +
+ +
+) + +export const EventIdAccessor = Template.bind({}) +EventIdAccessor.storyName = 'eventIdAccessor' +EventIdAccessor.args = accessorStoryArgs diff --git a/stories/props/storyDefaults.js b/stories/props/storyDefaults.js index 110ee0fc8..a77d18c70 100644 --- a/stories/props/storyDefaults.js +++ b/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 */