Additional data fields in event and display then in eventPopover

[jonaslimniatis]

Checklist

• I've looked through the README
• I've verified that I am running react-big-schedule version 4.2.0 or above.
• I've searched the existing issues and discussions for a similar question
• I've provided relevant code snippets or error messages
• I've included steps to reproduce the issue
• I've checked the browser console for any errors
• I've tested the issue with the latest version of react-big-schedule

Please make sure the question is worded well enough to be understood

Is there a possiblity to display in popover additional data fields for events (e. g. total sales revnue, next event for same resource).

[ansulagrawal]

@jonaslimniatis thanks for using our library. We will update the questions.

Yes you can use additional data in for in events.

For not is not possible to display more fields.
you can make a custom one and don't display the orignal popover

[jonaslimniatis]

@ansulagrawal Thanks for your quick response.

It's great to know that events can be customized. However, I encountered a bug while trying to add custom fields. After adding the fields and the summary function, I can no longer see the trips in the calendar. Only the summary value is displayed in the cell.

I have thoroughly reviewed all the documentation and examples, but I couldn't find the issue. Do you happen to know how to resolve it?

[ansulagrawal]

Can you share the code or create a demo of it in code sandbox and provide a video for same bug if possible.

Thanks again for using our project

[jonaslimniatis]

import React, { Component } from 'react';
//update to US Datetime format
import * as dayjsLocale from 'dayjs/locale/en-gb';
import * as antdLocale from 'antd/locale/en_US';
import '../css/style.css';
import {Scheduler, SchedulerData, ViewType, DemoData, wrapperFun, DATE_FORMAT,SummaryPos} from '../index';
import dayjs from "dayjs";
import Tripdata from "../sample-data/sample1";

class Basic extends Component {
constructor(props) {
super(props);

let schedulerData = new SchedulerData('2023-06-01', ViewType.Month, false, false, undefined,{
  getSummaryFunc: this.getSummary},
  {
  dayMaxEvents: 99,
  weekMaxEvents: 9669,
  monthMaxEvents: 9669,
  quarterMaxEvents: 6599,
  yearMaxEvents: 9956,
  customMaxEvents: 9965,
  eventItemPopoverTrigger: 'click',
  schedulerContentHeight: '500px',
});
schedulerData.setSchedulerLocale(dayjsLocale);
//schedulerData.setCalendarPopoverLocale(antdLocale);
schedulerData.setResources(Tripdata.resources);
schedulerData.setEvents(Tripdata.events);
this.state = {
  viewModel: schedulerData,
};

}

render() {
const { viewModel } = this.state;

let leftCustomHeader = (
    <div><span style={{fontWeight: 'bold'}}><a onClick={this.changeSummaryPos}>Change summary position</a></span></div>
);
return (

      <Scheduler
          schedulerData={viewModel}
          prevClick={this.prevClick}
          nextClick={this.nextClick}
          onSelectDate={this.onSelectDate}
          onViewChange={this.onViewChange}
          eventItemClick={this.eventClicked}
          viewEventClick={this.cancelEventUpdateForm}
          viewEventText='Close'
          viewEvent2Text='Edit trip'
          viewEvent2Click={this.updateEvent}
          updateEventStart={this.updateEventStart}
          updateEventEnd={this.updateEventEnd}
          moveEvent={this.moveEvent}
          newEvent={this.newEvent}
          onScrollLeft={this.onScrollLeft}
          onScrollRight={this.onScrollRight}
          onScrollTop={this.onScrollTop}
          onScrollBottom={this.onScrollBottom}
          toggleExpandFunc={this.toggleExpandFunc}
        />
);

}
setDate = schedulerData => {
setDate(date=moment().format(DATE_FORMAT));
}
prevClick = schedulerData => {
schedulerData.prev();
schedulerData.setEvents(Tripdata.events);
this.setState({ viewModel: schedulerData });
};

nextClick = schedulerData => {
schedulerData.next();
schedulerData.setEvents(Tripdata.events);
this.setState({ viewModel: schedulerData });
};

onViewChange = (schedulerData, view) => {
const start = new Date();
schedulerData.setViewType(view.viewType, view.showAgenda, view.isEventPerspective);
schedulerData.setEvents(Tripdata.events);
this.setState({ viewModel: schedulerData });
function secondsBetween(date1, date2) {
var diff = Math.abs(date1.getTime() - date2.getTime());
return diff / 1000;
}

console.log('Elapsed seconds: ' + secondsBetween(start, new Date()));

};

onSelectDate = (schedulerData, date) => {
schedulerData.setDate(date);
schedulerData.setEvents(Tripdata.events);
this.setState({
viewModel: schedulerData,
});
};

eventClicked = (schedulerData, event) => {
alert(TODO: ADD FORM ON CLICK AND UPDATEEVENTHANDLER: {id: ${event.id}, title: ${event.title}});
};

//TODO implement onclick to close event
cancelEventUpdateForm = (schedulerData, event) => {
alert(You just executed ops1 to event: {id: ${event.id}, title: ${event.title}});
};

//TODO implement onclick for edit button that opens edit form of trip
updateEvent= (schedulerData, event) => {
alert(You just executed ops2 to event: {id: ${event.id}, title: ${event.title}});
};

//this function is implemented but wont be used
//maybe in future if ECT decides to only use pasCal as Trip creation system
newEvent = (schedulerData, slotId, slotName, start, end, type, item, vehicleType) => {
if (confirm(Do you want to create a new event? {slotId: ${slotId}, slotName: ${slotName}, start: ${start}, end: ${end}, type: ${type}, item: ${item}}, vehicleType: ${vehicleType})) {
let newFreshId = 0;
schedulerData.events.forEach(item => {
if (item.id >= newFreshId) newFreshId = item.id + 1;
});

  let newEvent = {
    id: newFreshId,
    title: 'New event you just created',
    start: start,
    end: end,
    resourceId: slotId,
    vehicleType :vehicleType,
    bgColor: 'purple',
  };
  schedulerData.addEvent(newEvent);
  this.setState({
    viewModel: schedulerData,
  });
}

};
//this function is implemented but wont be used
//reason: Enduser dont want to update trip start end endtime to adjust schedule, only update vehicle id
updateEventStart = (schedulerData, event, newStart) => {
if (confirm(Do you want to adjust the start of the event? {eventId: ${event.id}, eventTitle: ${event.title}, newStart: ${newStart}})) {
schedulerData.updateEventStart(event, newStart);
}
this.setState({
viewModel: schedulerData,
});
};
//this function is implemented but wont be used
//reason: Enduser dont want to update trip start end endtime to adjust schedule, only update vehicle id
updateEventEnd = (schedulerData, event, newEnd) => {
if (confirm(Do you want to adjust the end of the event? {eventId: ${event.id}, eventTitle: ${event.title}, newEnd: ${newEnd}})) {
schedulerData.updateEventEnd(event, newEnd);
}
this.setState({
viewModel: schedulerData,
});
};

//this function is implemented but wont be used
//reason: Enduser dont want to update trip start end endtime to adjust schedule, only update vehicle id
moveEvent = (schedulerData, event, slotId, slotName, start, end) => {
if (
confirm(
Do you want to move the event? {eventId: ${event.id}, eventTitle: ${event.title}, newSlotId: ${slotId}, newSlotName: ${slotName}, newStart: ${start}, newEnd: ${end}
)
) {
schedulerData.moveEvent(event, slotId, slotName, start, end);
this.setState({
viewModel: schedulerData,
});
}
};

onScrollRight = (schedulerData, schedulerContent, maxScrollLeft) => {
if (schedulerData.ViewTypes === ViewType.Day) {
schedulerData.next();
schedulerData.setEvents(Tripdata.events);
this.setState({
viewModel: schedulerData,
});

  schedulerContent.scrollLeft = maxScrollLeft - 10;
}

};

onScrollLeft = (schedulerData, schedulerContent, maxScrollLeft) => {
if (schedulerData.ViewTypes === ViewType.Day) {
schedulerData.prev();
schedulerData.setEvents(Tripdata.events);
this.setState({
viewModel: schedulerData,
});

  schedulerContent.scrollLeft = 10;
}

};

onScrollTop = (schedulerData, schedulerContent, maxScrollTop) => {
console.log('onScrollTop');
};

onScrollBottom = (schedulerData, schedulerContent, maxScrollTop) => {
console.log('onScrollBottom');
};
getSummary = (schedulerData, headerEvents, slotId, slotName, headerStart, headerEnd) => {
let text = headerEvents.length.toString();
let color = '#d9d9d9';
if(headerEvents.length > 0)
color = headerEvents.length <= 1 ? 'green': 'red';
return {text: text, color: color, fontSize: '12px'};
}
changeSummaryPos = () => {
let schedulerData = this.state.viewModel;
schedulerData.config.summaryPos = schedulerData.config.summaryPos === SummaryPos.TopRight ? SummaryPos.BottomRight : SummaryPos.TopRight;
this.setState({
viewModel: schedulerData
})
}

toggleExpandFunc = (schedulerData, slotId) => {
schedulerData.toggleExpandStatus(slotId);
this.setState({
viewModel: schedulerData,
});
};

}

export default wrapperFun(Basic);

[jonaslimniatis]

For the Summar component i have made no changes, so i wont think this would be the issue

[ansulagrawal]

Thanks for providing code, will check and provide you solution as soon as possible

[JitendraSoni1234]

@jonaslimniatis can you please elaborate on your issue so that it can be rectified more easily? If possible can you share video for better understanding

[jonaslimniatis]

@JitendraSoni1234 @ansulagrawal Thanks for your help. I figured it out myself. I duplicated the project and made custom adjustments. Afterwards, the summary function worked and the event slots were displayed in the frontend. Before, I could only see the summary values.

But I have another question. I am currently working on a custom Popover template where I want my frontend users to be able to make updates from the dialog. I created an onchange property for the field (view picture below), made the value editable, and defined an onChange event. The missing piece is how to update the defined field value for the specific eventItem. I went through the documentation and code, but I couldn't find which function is responsible for showing and loading the specific event. I need this information to update the value.

#

[ansulagrawal]

@jonaslimniatis can you attach the proper image we can't see the image so

[jonaslimniatis]

@ansulagrawal
Here the updated picture. Thanks in advance for all ur help!

[ansulagrawal]

@jonaslimniatis thanks for sharing the image.

you will have the id for the slot, call a function to get all event slot, update the data you want to update in the slot and use setEvents funtion and re-render the scheduler, it will update the slot.

For now you can do this for future we will add one more function in the scheduler to update the event.

If you need code for same Please message so will provide you the code

[jonaslimniatis]

Hey Ansul,

thanks for the good and detailed response.
I've tried different methods regarding the setEvents function, but non-worked.

In the attachment you find a picture with corresponding code to the above highlighted data field. Can you please provide code to get the current value of the slot id (defaultValue) and how to update it.

Let me know if you need more code snippets to solve the content

[ansulagrawal]

@jonaslimniatis sorry I was too bussy so did not able to provide you the code, please give me 2hrs max will provide you the solution

[ansulagrawal]

@JitendraSoni1234 or @DamyanBG can you help. I tried from my side it did not work so

[DamyanBG]

I will take a look these days.

[ansulagrawal]

@DamyanBG thank you for looking into the issue