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.
Support Forum
- Attachments
-
- non-working-time.zip
- (2.98 MiB) Downloaded 57 times
-
- Screenshot 2021-07-21 at 12.36.58 PM.png (327.83 KiB) Viewed 800 times
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/
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
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 (350.83 KiB) Viewed 779 times
All the best,
Alex
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?
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
}
]
},