I am having trouble getting adding extra fields on the eventeditor.
Please see code below. The features part is not working. What am I missing?
import React, { Component } from 'react';
import Loader from "components/Loader/Loader";
//import { BryntumScheduler } from 'bryntum-react-shared';
import BryntumScheduler from './BryntumScheduler';
import 'bryntum-scheduler/scheduler.stockholm.css';
import { Toast } from 'bryntum-scheduler/scheduler.umd';
const entries = [
{
resourceId: '200b948e-786e-4fbf-acd6-daaf93a35f0a',
startDate: "2020-12-09 10:00",
endDate: "2020-12-09 13:00",
name: "Reklamasjon",
location: "Kunde Nr. 39406",
eventType: "Reklamasjon",
iconCls: "b-fa b-fa-calendar",
eventColor: "red"
},
{
resourceId: 'c41af686-195d-4aef-8abe-af34f21c9d5f',
startDate: "2020-12-09 14:00",
endDate: "2020-12-09 15:00",
name: "Befaring",
location: "Kunde Nr. 39406",
eventType: "Befaring",
iconCls: "b-fa b-fa-calendar",
eventColor: "blue"
},
];
class Test extends Component {
state = {
events : entries,
barMargin: 5,
selectedEvent: '',
selectedEmployeesArray: [],
};
handleAddClick = event => {
}
async componentDidMount() {
this.setState({
loading: true,
});
//Load employeeArray
await fetch("https://someURL", {
method: "POST",
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
})
.then(res => res.json())
.then(
(result) => {
this.setState({
loading: false,
selectedEmployeesArray: result,
});
},
(error) => {
this.setState({
loading: false,
error
});
}
)
}
/**
* render method
*/
render = () => {
const { loading } = this.state;
if (loading) {
return <Loader />
}
return (
<div className="content">
<BryntumScheduler
ref={'scheduler'}
// Make grid grow to fit rows
autoHeight={true}
// Initial row height
barMargin={this.state.barMargin}
startDate={'2020-12-09 08:00'}
endDate={'2020-12-09 18:00'}
resources={this.state.selectedEmployeesArray}
events={this.state.events}
features={{
eventEditFeature: {
items: {
// Key to use as fields ref (for easier retrieval later)
color: {
type: 'combo',
label: 'Color',
items: ['red', 'green', 'blue'],
// name will be used to link to a field in the event record when loading and saving in the editor
name: 'eventColor'
}
}
}
}}
// mode = {'vertical'}
// Columns in scheduler
columns={[
{
field: 'userImage',
renderer: ({ record }) => ` <div class="b-resource-info"><img class="b-resource-image" draggable="false" src="data:image/png;base64, ${record.userImage}" /> <dl>${record.name}<dt><dd> ${record.events.length} events</dd></dl></div> `,
htmlEncode: false,
width: 50,
text: 'Montør',
width: 130,
},
{
text: 'Selskap',
field: 'company',
width: 100
},
]}
listeners={{
eventClick: ({ eventRecord }) => {
Toast.show(`You clicked <b>${eventRecord.name}</b>`)
}
}}
onEventSelectionChange={this.handleSelectionChange}
/> {/* eo BryntumScheduler */}
</div>
);
}; // eo function render
} // eo class Main
export default Test;