Adding custom date and time field to event editor.

[inet]

Hey everyone,

I was attempting to add an additional field to the event editor. I was able to add the description to the event editor using the extra widgets and passing it into the scheduler, such as:

  eventEdit = {
    extraWidgets: [
    {
      type: 'textarea',
      name: 'desc',
      label: 'Note',
      index: 1
    }
    ]
  };

However, when attempting to add a new field type 'requiredOnSiteDateTime', or any other non built in field name I get an empty value.

So I guess I have a few questions. Right now on the scheduler I'm just supplying a custom object and adding it to the event. Is there a way to access these custom fields inside when creating the custom widget. I looked at the documentation and noticed that creating a subclass of EventModel was the way to go, but when attempting that I get a " Class constructor EventModel cannot be invoked without 'new' " when calling its constructor with super.

Is there another way to do it such as:

  eventEdit = {
    extraWidgets: [
    {
      type: 'date',
      name: 'requiredOnSiteDateTime',
      label: 'Note',
      index: 1,
      value: event => event.requiredOnSiteDateTime
    }
    ]
  };

Thanks in advanced.
-Phil

[pmiklashevich]

Hi Phil,

Please see beforeEventEditShow event. You can load and set your data to custom fields there. Please also check out "examples/drag-onto-tasks/lib/Schedule.js" file from "Drag equipment onto tasks" demo for reference.

Best,
Pavel

[inet]

Hey Pavel,

Thank you so much. With your help I was able to get it to work!

Just one last question. What is the secret to getting everything to line up just like the default start and end date?

eventEdit = {
    // Add extra widgets to the event editor
    extraWidgets: [
    {
      type: 'textarea',
      name: 'desc',
      label: 'Note',
      index: 1
    },
    {
      type: 'timefield',
      ref: 'requestedOnSiteTimeField',
      name: 'requestedOnSiteTime',
      label: ' ',
      index: 3,
      style: 'flex: 1 0 40%'
    },
    {
      type: 'datefield',
      ref: 'requestedOnSiteDateField',
      name: 'requestedOnSiteDate',
      label: 'Requested On Site Date Time',
      index: 3,
      style: 'flex: 1 0 60%'
    }
    ]
  };

Thanks so much,
-Phil

[pmiklashevich]

Hello Phil,

Basically you can check out our lib/Scheduler/feature/EventEdit.js class and see our date/time field configuration.
What's missing is actually 'b-inline' css class on the datefield and 'b-match-label' css class on the timefield. Please try out this config:

features : {
    eventEdit : {
        // Add extra widgets to the event editor
        extraWidgets : [
            {
                type  : 'textarea',
                name  : 'desc',
                label : 'Note',
                index : 1
            },
            {
                type  : 'date',
                label : 'Requested On Site Date Time',
                name  : 'requestedOnSiteDate',
                ref   : 'requestedOnSiteDateField',
                index : 3,
                cls   : 'b-inline',
                flex  : '1 0 60%'
            },
            {
                type  : 'time',
                name  : 'requestedOnSiteTime',
                ref   : 'requestedOnSiteTimeField',
                index : 4,
                cls   : 'b-match-label',
                flex  : '1 0 40%'
            }
        ]
    }
}

Best,
Pavel