Event Timeline - Events
Define events for your Event Timeline.
Event properties
Resource
Use the resource property to link an event to its resource:
const event = {
// ...other properties
resource: 'work',
};
Dynamic resource
Use the eventModelStructure property to switch the resource between several fields:
All day
Use the allDay property to define an event as all-day:
const event = {
// ...other properties
allDay: true,
};
Timezone
Use the timezone property to define in which timezone an event's dates are defined:
const event = {
// ...other properties
timezone: 'America/New_York',
};
Color
Use the color property to define an event's color:
const event = {
// ...other properties
color: 'lime',
};
Here is the list of all the available color palettes:
Jul
Aug
Class name
Use the className property to apply custom CSS styles to an event:
const event = {
// ...other properties
className: 'highlighted-event',
};
Jul
Aug
Drag interactions
Use the draggable property on the event model to prevent an event from being dragged to another point in time:
const event = {
// ...other properties
draggable: false,
};
Use the resizable property on the event model to prevent an event from being resized by dragging its start or end edge:
const event = {
// ...other properties
resizable: false,
resizable: "start" // only the start edge is draggable.
resizable: "end" // only the end edge is draggable.
};
Read-only
Use the readOnly property to prevent an event from being modified:
const event = {
// ...other properties
readOnly: true,
};
Recurring events
Use the rrule property to define an event's recurring rule:
const event = {
// ...other properties
rrule: 'FREQ=WEEKLY;INTERVAL=2;BYDAY=TH',
};
Store data in custom properties
Use the eventModelStructure prop to define how to read and write properties of the event model when they don't match the model expected by the components:
const eventModelStructure = {
title: {
getter: (event) => event.name,
setter: (event, newValue) => {
event.name = newValue;
},
},
};
function Timeline() {
return (
<EventTimelinePremium
events={[{ name: 'Event 1' /** ... */ }]}
eventModelStructure={eventModelStructure}
/>
);
}
Jul
Aug