We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Hi,
I'm trying to create a resource scheduler, resources are cars and events are reservations for those cars. I'm trying to make a custom editor that has all default options plus contactNumber, price, receiptNumber. Price should be default 0 if not inputted. Also, I am trying to create a table of monthly income from events. But the problem I'm having is that all reservations are all day and when I create an event from lets say 28/03 to 31/03 it says that the event ends on 01/04 because it's all day and I don't want it to calculate that day in the monthly income. Also if a reservation is from 15/03 to 15/04 it should split the income accordingly for each month.
And can you make it so the timeline is 30 days but it always starts with today's day and 3 days before?
Q1 You can achieve your requirement by utilizing the eventRendered and databinding events of the Schedule with the code below
onEventRendered(args) {
this.totalPricePerMonth +=
args.data.StartTime.getMonth() != args.data.EndTime.getMonth() &&
args.data.data &&
args.data.data.count
? args.data.data.count *
(args.data.Price /
Math.ceil(
(args.data.EndTime.getTime() - args.data.StartTime.getTime()) /
(1000 * 60 * 60 * 24)
))
: args.data.Price;
}
onDataBinding(args) {
this.totalPricePerMonth = 0;
}
Q2: And can you make it so the timeline is 30 days but it always starts with today's day and 3 days before
Can you please confirm if you want to display the scheduler from three days before the current date to the next 30 days? For instance, if today's date is March 30th, do you want to show the scheduler from March 27th, 2023, to April 25th, 2023?
Regards,
Vinitha
Yes, that's it.
Also answer for Q1 is close to what I need but not good enough I need to be able to get for a chosen period of months totalprice, also I need the custom editor to input the price for events.
Hi Nikola,
Please find below a sample that meets all of your requirements
Q1: We added an additional field called "Price" in the editor window using the "popupOpen" event with the following code:
onPopupOpen(args) {
if (args.type === 'Editor') {
// Create required custom elements in initial time
if (!args.element.querySelector('.custom-field-row')) {
let
row = createElement('div', { className:
'custom-field-row' });
let
formElement = args.element.querySelector('.e-description-row');
formElement.firstChild.insertBefore(
row,
formElement.firstChild.firstChild
);
let
container = createElement('div', {
className:
'custom-field-container',
});
let
inputEle = createElement('input', {
className:
'e-field',
attrs: { name:
'Price' },
});
container.appendChild(inputEle);
row.appendChild(container);
let
numaric = new
NumericTextBox({
value:
args.data.Price,
min:
0,
format:
'###.##',
placeholder:
'Price',
});
numaric.appendTo(inputEle);
inputEle.setAttribute('name', 'Price');
}
}
}
Additionally, you can obtain the details of the selected period in the "onEventRendered" method. Here, you can perform your necessary calculations to determine the price based on your specific scenario.
onEventRendered(args) {
// Here, you can obtain the details of the selected period from this.startDateForPriceCalculation and this.endDateForPriceCalculation. You can filter the data based on the selected period and calculate the price accordingly.
}
Q2: We achieved your
requirement using TimelineDay view with interval
and timescale option of view
property and dateHeaderTemplate of our scheduler using below code.
<ViewsDirective>
<ViewDirective
option="TimelineDay"
timeScale={{ enable:
false }}
interval={33}
/>
</ViewsDirective>
getDateHeaderText(value) {
var
skeleton = value.getDate() === 1 ? 'MMMd' : 'd';
return
this.instance.formatDate(value, { skeleton:
skeleton });
}
dateHeaderTemplate(props) {
return (
<div>
<div>{this.getDateHeaderText(props.date)}</div>
</div>
);
}
Regards,
Vinitha
