Our pure JavaScript Scheduler component


Post by Mattis »

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;

Post by saki »

Do not set features like that. The following will work:

    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'
        }
      }
    }}

Post by Mattis »

Thank you!!


Post by Mattis »

and if I for example want to set the
eventMenu: false,
scheduleMenu: false,
timeAxisHeaderMenu: false

How do I do that?


Post by pmiklashevich »

Absolutely the same way!

eventMenuFeature = {false}
scheduleMenuFeature = {false}
timeAxisHeaderMenuFeature = {false}

Please see the guide: https://www.bryntum.com/docs/scheduler/#guides/integration/react.md#supported-options

Pavlo Miklashevych
Sr. Frontend Developer


Post by shaveta »

saki wrote: Wed Dec 09, 2020 2:17 pm

Do not set features like that. The following will work:

    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'
        }
      }
    }}

This will add the fields at end. Is there a way to add it at top or specific position? Can we set index where the field should get added?


Post by mats »

Please study docs carefully here: https://bryntum.com/docs/scheduler/#Scheduler/feature/EventEdit

See the 'weight' mentioned, so please use this to control the position.


Post Reply