Premium support for our pure JavaScript UI components


Post by gorakh.nath »

Hi team,
We are trying to render the events in the non-working interval, but they are getting rendered as milestones even though the timings of the event are not of milestone use-case. This is not happening when the event is in the working interval.
Reproduced the issue in the sample app with sample data as :

calenders: [
        {
          "intervals": [
            {
              "endDate": "2023-03-01 12:30:00.000",
              "name": "",
              "startDate": "2023-03-01 10:30:00.000",
              "isWorking": true
            }
          ],
          "name": "Time Slot",
          "id": "2023-3-1 16:00:00 - 2023-3-1 18:00:00",
          "unspecifiedTimeIsWorking": false
        }
      ],
events:[
        {
          "workOrderTaskAppointmentWindowStartDate": "2023-03-01 10:30:00.000",
          "minStartDate": "2023-03-01 10:30:00.000",
          "maxEndDate": "2023-03-01 12:30:00.000",
          "resourceId": "5L11CTAH9E",
          "workOrderTypeId": "VPHX9O8BRF",
          "endDate": "2023-03-01 02:00:00.000",
          "statusColor": "#0aa9c2",
          "customerCompanyName": "Saurav as a customer",
          "regionName": "Bellandur-Bengaluru",
          "siteName": "Saurav's new home site",
          "type": "Corrective Maintenance - Single Technician",
          "taskAtRisk": 0,
          "taskTypeName": "Corrective Maintenance - Single Technician",
          "tooltipHeader": "<b>Corrective Maintenance - Single Technician</b><br/>TSK000053",
          "taskTypeId": "L4SW9O8XJU",
          "scheduledStartTime": "2023-03-01 11:00:00.000",
          "customerId": "2C06N8CT4A",
          "workOrderTaskId": "TSK000053",
          "workOrderTaskEstimatedDuration": 1,
          "id": "7AV86PEEJ6-5L11CTAH9E",
          "multiBreakdownTaskFlag": false,
          "workOrderTaskEstimatedDurationMinutes": 60,
          "workOrderTaskAppointmentWindowEndDate": "2023-03-01 12:30:00.000",
          "priorityIndex": "10",
          "alloweEventOverlap": false,
          "workOrderTaskAppointmentBasedFlag": 1,
          "calendar": "2023-3-1 16:00:00 - 2023-3-1 18:00:00",
          "workOrderTaskAppointmentWindow": "[{\"start\":\"2023-03-01 10:30:00.000\",\"end\":\"2023-03-01 12:30:00.000\"}]",
          "workOrderTaskAppointmentWindowId": "NIE86PE7AB",
          "scheduledEndTime": "2023-03-01 12:00:00",
          "resultWebPageId": "GEZKCPA4BA",
          "icons": "",
          "taskTypeCrewTask": 0,
          "crewTask": 0,
          "workOrderTaskTypeId": "L4SW9O8XJU",
          "statusId": "workOrderTaskScheduled",
          "regionId": "ZVVLECEO96",
          "eventColor": "#0aa9c2",
          "name": "[High] TSK000053",
          "workOrderTaskScheduledDate": "2023-03-01 11:00:00.000",
          "workOrderRequestedDate": "2022-12-29 09:14:03.486",
          "startDate": "2023-03-01 01:00:00.000",
          "status": "Scheduled"
        }
      ]         

And manuallyScheduled: true

Tried to resolve this issue by removing the milestone CSS and adding our own CSS in the eventRenderer, but we have the usecase where we need to add dynamic eventColor and this is not possible using external CSS.

How can we show the event in the non-working interval not as a milestone?

Any help is appreciated, Thank you.

Attachments
sampleApp.zip
(2.91 MiB) Downloaded 19 times
Screenshot 2023-03-01 at 12.02.47 PM.png
Screenshot 2023-03-01 at 12.02.47 PM.png (295.95 KiB) Viewed 611 times

Post by arcady »

You did not provide duration for the event. So the Scheduling Engine calculates its value. And duration definition is amount of working time between the event start and end dates. Thus the event duration is calculated as zero ..since there is not working time between those start/end dates.

So please provide duration value or put event to proper consistent dates.


Post by gorakh.nath »

Hi arcady,
After adding the duration and durationUnit to the event it turned from a milestone to a single line. Again this happens only when the event is in a non-working interval.

Added duration:60 and durationUnit: 'minute' for an event that lasts an hour. Recreated the issue in the sample app. Please check and get back to us.

Attachments
Screenshot 2023-03-01 at 9.40.18 PM.png
Screenshot 2023-03-01 at 9.40.18 PM.png (305.28 KiB) Viewed 572 times
Sample App.zip
(2.92 MiB) Downloaded 19 times

Post by alex.l »

Hello,

Because your calendar doesn't have working periods in future.
startDate of your event is "2023-03-01 16:30:00.000", the only working period you defined in calendar looks like

          "intervals": [
            {
              "endDate": "2023-03-01 12:30:00.000",
              "name": "",
              "startDate": "2023-03-01 10:30:00.000",
              "isWorking": true
            },

So, it ends before your event started, and no others working periods available to schedule your event.
When I basically added that period, I see the expected result:

          "intervals": [
            {
              "endDate": "2023-03-01 12:30:00.000",
              "name": "",
              "startDate": "2023-03-01 10:30:00.000",
              "isWorking": true
            },
            {
              // I added this period, after startDate of your task with duration >= of task duration
              "startDate": "2023-03-01 17:30:00.000",
              "endDate": "2023-03-01 19:30:00.000",
              "name": "",
              "isWorking": true
            }
          ],
Screenshot 2023-03-02 at 16.12.44.png
Screenshot 2023-03-02 at 16.12.44.png (56.66 KiB) Viewed 517 times

All the best,
Alex


Post by gorakh.nath »

Hi Alex,

Everytime there is a change in the startDate of the event, do we have to add that non-working interval to the calendar? If we are dragging and dropping the event several times on the calendar, then do we have to add intervals to all the changes of the startDate? Isn't that inefficient?

Also we are using these working intervals to highlight the events in our calendar by highlightEventCalendars(). By adding this non-working interval to the calendar, the interval also gets highlighted which we don't want.


Post by alex.l »

Hi gorakh.nath,

You don't need to add intervals every time. You only need keep in mind that events may be scheduled only on working time periods. And if no working time available to schedule the event, you will get the result you saw before. So, if your calendar doesn't have working intervals in the future, that's correct that drag and drop to next days won't be succeed.

Also we are using these working intervals to highlight the events in our calendar by highlightEventCalendars(). By adding this non-working interval to the calendar, the interval also gets highlighted which we don't want.

Sorry, it's not clear to me. Could you please share the code you used, steps to reprduce, actual result and expected result?

All the best,
Alex


Post by gorakh.nath »

Hi Alex,
In our use-case, we are trying to highlight the time intervals just as in the demos https://bryntum.com/products/schedulerpro/examples/highlight-time-spans/ and https://bryntum.com/products/schedulerpro/examples/highlight-event-calendars/. We are highlighting the working intervals of the events with the highlightEventCalendars() and timeSpanHighlight features.

For our use-case, we want to show the event even when it is dropped outside the highlighted region. Currently, when we are doing this the event is rendered as a milestone. If duration and durationUnit is added it is rendered as a single line as discussed above. Please see the attached video to get a detailed understanding.

features={{
            timeSpanHighlight: true,
            calendarHighlight: {
              calendar: 'event'
            }
          }}
calendars: [{
    "intervals": [
        {
            "endDate": "2023-03-07 12:30:00.000",
            "name": "",
            "startDate": "2023-03-07 10:30:00.000",
            "isWorking": true
        }
    ],
    "name": "Time Slot",
    "id": "2023-3-7 16:00:00 - 2023-3-7 18:00:00",
    "unspecifiedTimeIsWorking": false
}]
events: [{
    "workOrderTaskAppointmentWindowStartDate": "2023-03-07 10:30:00.000",
    "minStartDate": "2023-03-07 10:30:00.000",
    "maxEndDate": "2023-03-07 12:30:00.000",
    "resourceId": "0XS5U3DD7K",
    "workOrderTypeId": "VPHX9O8BRF",
    "endDate": "2023-03-07 12:00:00.000",
    "statusColor": "#0aa9c2",
    "customerCompanyName": "Customer1",
    "regionName": "Whitfield-Bangalore",
    "siteName": "Customer Site1",
    "type": "Corrective Maintenance - Single Technician",
    "taskAtRisk": 0,
    "taskTypeName": "Corrective Maintenance - Single Technician",
    "tooltipHeader": "<b>Corrective Maintenance - Single Technician</b><br/>TSK000062",
    "taskTypeId": "L4SW9O8XJU",
    "scheduledStartTime": "2023-03-07 11:00:00.000",
    "customerId": "2SZ37NBGS3",
    "workOrderTaskId": "TSK000062",
    "workOrderTaskEstimatedDuration": 1,
    "id": "AMDRMWE45K-0XS5U3DD7K",
    "multiBreakdownTaskFlag": false,
    "deadline": "2023-03-10 06:30:00.000",
    "workOrderTaskEstimatedDurationMinutes": 60,
    "workOrderTaskAppointmentWindowEndDate": "2023-03-07 12:30:00.000",
    "priorityIndex": "30",
    "alloweEventOverlap": false,
    "workOrderTaskAppointmentBasedFlag": 1,
    "calendar": "2023-3-7 16:00:00 - 2023-3-7 18:00:00",
    "workOrderDeadline": "2023-03-10 06:30:00.000",
    "workOrderTaskAppointmentWindow": "[{\"start\":\"2023-03-07 10:30:00.000\",\"end\":\"2023-03-07 12:30:00.000\"}]",
    "workOrderTaskAppointmentWindowId": "8U9EMWERU7",
    "scheduledEndTime": "2023-03-07 12:00:00",
    "resultWebPageId": "GEZKCPA4BA",
    "icons": "",
    "taskTypeCrewTask": 0,
    "crewTask": 0,
    "workOrderTaskTypeId": "L4SW9O8XJU",
    "statusId": "workOrderTaskScheduled",
    "regionId": "TK1JT3DCEK",
    "eventColor": "#0aa9c2",
    "name": "[Low] TSK000062",
    "workOrderTaskScheduledDate": "2023-03-07 11:00:00.000",
    "workOrderRequestedDate": "2023-03-06 03:01:37.556",
    "startDate": "2023-03-07 11:00:00.000",
    "status": "Scheduled"
}]
Attachments
Screen Recording 2023-03-06 at 3.00.41 PM.mov
(10.17 MiB) Downloaded 19 times

Post by alex.l »

The behaviour I see on the video is correct. The mechanics of work I described a bit in my previous reply: If no working time available - duration will be 0. If no constraints for the event - the event will be re-scheduled to the nearest working period. If no working periods available in the future - you will see scheduling conflict or invalid drop, depends on the situation.
If you want to ignore project's calendar or resource's calendar, you can specify own calendar for the event.
All about scheduling here https://bryntum.com/products/schedulerpro/docs/api/guides-scheduling

All the best,
Alex


Post by gorakh.nath »

Hi Alex,

Can you be a bit more specific? In our use-case, we want to see the event normally (instead of as a milestone or single line) even when it is dropped outside in the grey highlighted area (in non-working time intervals). And we are using manual scheduling instead of default automatic scheduling.
How can we achieve this?


Post by alex.l »

Hi,

Unfortunately, I still cannot get the logic of that, how it should be handled by Scheduling Engine, because it sounds like a scheduling conflict. What about use timeRanges instead of calendars, if you only want visual effect? https://bryntum.com/products/schedulerpro/docs/api/Scheduler/feature/ResourceTimeRanges
https://bryntum.com/products/scheduler/examples/resourcetimeranges/

That I meant in my last reply, try to set https://bryntum.com/products/schedulerpro/docs/api/SchedulerPro/model/EventModel#field-calendar for that event which has more working time than highlighted calendar. As example 24/7 working time.

All the best,
Alex


Post Reply