Premium support for our pure JavaScript UI components


Post by gorakh.nath »

Hi,
I want to set background colour as grey for non working time for all non working time , for example in weekend or if calendar data not set for any resource then it should have white as background colour.
Right now it is coming one resource as white and other for grey if calendar data not set which is causing confusing for the user.I attached the picture where I have pointer one grey and one white background colour in calendar.
I have also attached the sample application to debug the issue.
Please let me know how to remove this alternate colours that is coming in calendar and how I can set all background colour as white accept weekends.

Attachments
non-working-time.zip
(2.98 MiB) Downloaded 57 times
Screenshot 2021-07-21 at 12.36.58 PM.png
Screenshot 2021-07-21 at 12.36.58 PM.png (327.83 KiB) Viewed 788 times

Post by Maxim Gorkovsky »

Hello.
Row background that you show here is not related to the non working time, this is just a visual aid to tell one row from another. It is called stripe feature, which you enabled:

stripeFeature={true}
features = {{
    dependencies           : false,
    nonWorkingTime         : false,
    resourceNonWorkingTime : true,
    timeRanges             : {
        showCurrentTimeLine : true
    }
}}

I noticed you are mixing approaches to configure features. It should be either features config or ...Feature configs. Otherwise you can easily get confused.

To highlight weekends you can enable nonWorkingTime feature as we do in this demo: https://bryntum.com/examples/scheduler/nonworkingdays/


Post by gorakh.nath »

thanks for quick reply @ Maxim Gorkovsky. I saw the example of https://bryntum.com/examples/scheduler/nonworkingdays/ and added the calender data as :-

 "project"     : {
        "calendar" : "workhours"
    },
    "calendars"   : {
        "rows" : [
            {
                "id"                       : "workhours",
                "name"                     : "Working hours",
                "unspecifiedTimeIsWorking" : false,
                "intervals"                : [
                    {
                        "recurrentStartDate" : "at 8:00",
                        "recurrentEndDate"   : "at 17:00",
                        "isWorking"          : true
                    }
                ]
            }
        ]
    }

And also added listener as :-

listeners = {{
                        paint({ firstPaint }) {
                            if (firstPaint) {
                                LocaleManager.on({
                                    locale() {
                                        const
                                            days               = DateHelper.getDayShortNames(),
                                            weekends           = DateHelper.nonWorkingDays,
                                            { nonWorkingDays } = this.widgetMap;
                
nonWorkingDays.suspendEvents(); nonWorkingDays.eachWidget(button => { button.text = days[button.index]; button.pressed = weekends[button.index]; }); nonWorkingDays.resumeEvents(); }, thisObj : source }); } } }}

I have attached the sample application to replicate the issue.
Can you be more specific what need to add to show the weekends, whatever you shared have everything and its very hard to identify what need to modify.

Attachments
weekendsNonWorkingTIme.zip
(2.98 MiB) Downloaded 52 times

Post by alex.l »

Hi gorakh.nath,

As Maxim mentioned, you have double notation for features in your scheduler configuration. Please use nameFeature: {} notation as we recommended in our guide https://bryntum.com/docs/gantt/#Gantt/guides/integration/react.md#features

To highlight weekends please use https://bryntum.com/docs/gantt/#Scheduler/feature/NonWorkingTime#config-highlightWeekends which is disabled in your example:

nonWorkingTimeFeature={false}

Besides the moments I mentioned above, I don't see any issues in your example. It works as expected to me according to configuration you passed. Please check the screenshot attached.

Attachments
Screenshot 2021-07-22 at 09.20.25.png
Screenshot 2021-07-22 at 09.20.25.png (350.83 KiB) Viewed 767 times

All the best,
Alex


Post by gorakh.nath »

Hi @alex, resourceNonWorkingTimeFeature is working fine but even after setting nonWorkingTimeFeature={true} it is not showing the weekends as grey colour It added two config :-

nonWorkingTimeFeature={true}
highlightWeekends={true}

I assigned like this also but still not working

nonWorkingTimeFeature={ { highlightWeekends: true } }

Is this correct way to assign the weekendsHighlight feature? the screenshot you shared above has not weekends as grey colour.
The link that you shared above https://bryntum.com/docs/gantt/#Scheduler/feature/NonWorkingTime#config-highlightWeekends has scheduler not schedulerPro.
Is this feature is working in schedulerPro?


Post by Maxim Gorkovsky »

NonWorkingTime feature takes calendar from the project instance and you do not specify any. It should work just fine with this data change:

{
    "success": true,
    "project": {
        "calendar": "weekend" // id of the main project calendar
    },
    "calendars": {
        "rows": [
            {
                "id": "weekend", // <- calendar id
                "name": "Weekend",
                "unspecifiedTimeIsWorking": true,
                "intervals": [
                    {
                        "recurrentStartDate" : "on Sat at 0:00", // <- actual non working time
                        "recurrentEndDate"   : "on Mon at 0:00",
                        "isWorking"          : false
                    }
                ]
            },

Post Reply