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. Image for the cookie policy date

Resource schedule custom editor template + event price for month


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?

3 Replies

VD Vinitha Devi Murugan Syncfusion Team March 30, 2023 01:26 PM UTC

Hi Nikola,

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.Price /


              (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?



Nikola Škeva replied to Vinitha Devi Murugan March 30, 2023 02:13 PM UTC

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.

VD Vinitha Devi Murugan Syncfusion Team April 3, 2023 02:06 PM UTC

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')) {

row = createElement('div', { className:
'custom-field-row' });

formElement = args.element.querySelector('.e-description-row');





container = createElement('div', {



inputEle = createElement('input', {


          attrs: { name:
'Price' },




numaric = new











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.




false }}




  getDateHeaderText(value) {

skeleton = value.getDate() === 1 ? 'MMMd' : 'd';

this.instance.formatDate(value, { skeleton:
skeleton });


  dateHeaderTemplate(props) {

    return (








Live Chat Icon For mobile
Up arrow icon