Premium support for our pure JavaScript UI components


Post by gorakh.nath »

Hi Team,
I have to set the hex color on the resourceTimeRanges , I saw the example every where we are setting timeRangeColor as color name like red, blue etc, but I have to hex color like #F0F7FF.

 "resourceTimeRanges": [
        {
          "resourceId": "a",
          "timeRangeColor": "#F0F7FF",
          "endDate": "2022-09-22 13:00",
          "name": "11:00 AM - 5:30 PM",
          "id": 9,
          "startDate": "2022-09-22 5:30"
        }]

I tried above code but it is not working , How can I set hex color?


Post by marcio »

Hey gorakh.nath,

timeRangeColor accepts human-readable colors (red, yellow, indigo, cyan, etc) that we have in Bryntum's CSS files, to use HEX colors you can use cls and define a class with that color, or apply the color directly using style.

        { id : 8, resourceId : 'r7', startDate : '2019-01-01T12:00', endDate : '2019-01-01T18:00', name : 'Afternoon off (custom style)', style : 'background: rgba(255,165,0,.3); color : orange' },
        { id : 9, resourceId : 'r5', startDate : '2019-01-01T06:00', endDate : '2019-01-01T20:00', name : 'Parental leave (custom CSS)', cls : 'custom' }

https://www.bryntum.com/docs/scheduler-pro/api/Scheduler/model/ResourceTimeRangeModel#field-cls
https://www.bryntum.com/docs/scheduler-pro/api/Scheduler/model/ResourceTimeRangeModel#field-style

Best regards,
Márcio


Post Reply