React: Milestone Scheduler | DayPilot Code
source link: https://code.daypilot.org/31918/react-milestone-scheduler
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Overview
Learn how to use the React Scheduler to display milestones.
By default, the milestones are displayed using green diamonds.
You can change the milestone color, shape, and description.
Milestones can use custom SVG icons.
You can use visual links to connect related milestones.
Includes a trial version of DayPilot Pro for JavaScript (see License below)
License
Licensed for testing and evaluation purposes. Please see the license agreement included in the sample project. You can use the source code of the tutorial if you are a licensed user of DayPilot Pro for JavaScript. Buy a license.
React Scheduler Component
This milestone view is based on the React Scheduler component from DayPilot Pro for JavaScript library.
The Scheduler is designed to display events but it can also display milestones - icons placed at specified date/time locations.
How to display a milestone in the scheduler?
To display a milestone, include a new item in the events
array and set type: "Milestone"
.
The required data fields:
id
start
resource
type
You don’t have to include end
date. The text
property is not required either - it is not displayed anyway. To learn how to display a description next to the milestone, see below.
this.setState({
events: [
{
id: 1,
start: "2022-01-03T00:00:00",
resource: "B",
type: "Milestone",
},
// ...
],
});
How to use custom milestone colors?
You can set a custom color of the milestone icon using backColor
property of the data object.
Blue milestone
this.setState({
events: [
{
id: 2,
start: "2022-01-03T00:00:00",
resource: "C",
type: "Milestone",
backColor: "#3c78d8",
text: "Milestone 2"
},
// ...
],
});
Yellow milestone
this.setState({
events: [
{
id: 3,
start: "2022-01-04T00:00:00",
resource: "D",
type: "Milestone",
backColor: "#f1c232",
text: "M3"
},
// ...
],
});
Red milestone
this.setState({
events: [
{
id: 4,
start: "2022-01-02T00:00:00",
resource: "E",
type: "Milestone",
backColor: "#cc0000",
text: "M4"
},
// ...
],
});
Color defined using CSS
Another option is to use a custom CSS class that will define the background-color
style:
this.setState({
events: [
{
id: 8,
start: "2022-01-09T00:00:00",
resource: "B",
type: "Milestone",
cssClass: "milestone-black",
text: "M8"
},
// ...
],
});
Scheduler.css:
.milestone-black .scheduler_default_event_inner {
background-color: black;
}
How to display a milestone description next to the icon?
Standard Scheduler events use the text
property of the data object to specify the text that will be displayed in the event box. Milestones are too small to display any text inside so by default the text property is ignored.
To display the text property value on the right side of a milestone, you can use the htmlRight
property.
Remember that all properties that start with html*
treat the content as raw HTML which will not be encoded. If the text is provided by the user, it’s necessary to encode the text to prevent XSS attacks.
This onBeforeEventRender handler uses the description specified using text property and displays it next to the icon on the right side.
onBeforeEventRender: args => {
if (args.data.type === "Milestone") {
args.data.htmlRight = DayPilot.Util.escapeHtml(args.data.text);
}
},
To control the distance between the milestone icon and the description, use the eventHtmlRightMargin
property. The default value is 10 (pixels).
this.state = {
eventHtmlRightMargin: 0,
// ...
};
By default, the text is vertically centered. You move the text to the top of the row using CSS:
.scheduler_default_event_right {
align-items: start;
}
After reducing the margin and moving the text to the top it looks like this:
How to change the milestone icon shape?
The default shape is a diamond - created using a square that is rotated using CSS.
Circle icon
Milestone:
{
id: 5,
start: "2022-01-04T00:00:00",
resource: "C",
type: "Milestone",
backColor: "#cc0000",
cssClass: "milestone-circle",
text: "M5"
},
.milestone-circle .scheduler_default_event_inner {
border-radius: 25px;
}
Square icon
Milestone:
{
id: 6,
start: "2022-01-04T00:00:00",
resource: "C",
type: "Milestone",
backColor: "#cc0000",
cssClass: "milestone-square",
text: "M6"
},
.milestone-square .scheduler_default_event_inner {
transform: rotate(0);
}
SVG icon
You can also hide the default object and display a custom icon using an active area:
this.setState({
events: [
{
id: 7,
start: "2022-01-11T00:00:00",
resource: "E",
type: "Milestone",
cssClass: "milestone-blank",
text: "M7",
areas: [
{left: 0, right:0, top: 0, bottom: 0, symbol: "daypilot.svg#figure", fontColor: "#00639e"}
]
},
// ...
],
});
.milestone-blank .scheduler_default_event_inner {
transform: rotate(0);
background: none;
}
How to restrict drag and drop moving to horizontal (time) direction?
Use moveVDisabled: true
in the event data object.
onBeforeEventRender: args => {
if (args.data.type === "Milestone") {
// ...
args.data.moveVDisabled = true;
}
},
How to delete a milestone?
Standard events use a built-in icon displayed in the upper-right corner. In case of a milestone, this icon will be misplaced and it’s better to turn it off.
Globally:
eventDeleteHandling = "Disabled"
Per item (add to the event data object):
onBeforeEventRender: args => {
if (args.data.type === "Milestone") {
// ...
args.data.deleteDisabled = true;
}
},
You can add an option to delete a milestone using a custom context menu:
onBeforeEventRender: args => {
if (args.data.type === "Milestone") {
// ...
args.data.contextMenu = new DayPilot.Menu({
items: [
{
text: "Delete", onClick: args => this.scheduler.events.remove(args.source)
}
]
})
}
},
How to add links between milestones?
The Scheduler supports links between events and you can also use links to connect two milestones or a milestone with an event:
this.setState({
// ...
links: [
{
from: 4,
to: 5
},
{
from: 5,
to: 6
},
]
});
By default, the links use FinishToStart
type that connect the end of the source (from
) milestone with the start of the target (end
) milestone.
You can change the link type using type property:
this.setState({
// ...
links: [
{
from: 4,
to: 5,
type: "StartToStart"
},
]
});
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK