[VUE 3] NonWorkingTime feature not working

[rytis.i]

I'm trying to enable NonWorkingTime feature as described here (https://www.bryntum.com/products/scheduler/docs/api/Scheduler/feature/NonWorkingTime).

const schedulerConfig = {
    features:{
        stripe: true,
        dependencies: false,
        nonWorkingTime: true,
    },
....

setting nonWorkingTime to true has no effect. Other features like stripe and dependencies work fine. Example project attached.

[tasnim]

Hi,

As you're using schedulerpro, for non-working time you'd need to use calendars
Please check this calendars guide https://www.bryntum.com/products/schedulerpro/docs/guide/SchedulerPro/basics/calendars
Replacing the scheduler config in your test case with the config below should make the non working time hilighted

const schedulerConfig = {
    features:{
        stripe: true,
        dependencies: false,
        // nonWorkingTime: true,
    },
    columns: [
        { text: 'Name', field: 'name', width: 130 },
    ],
    project : {
        calendar : 'weekends'
    },
    calendars : [
        {
            id        : "weekends",
            name      : "Weekends",
            intervals : [
                {
                    recurrentStartDate : "on Sat at 0:00",
                    recurrentEndDate   : "on Mon at 0:00",
                    isWorking          : false
                }
            ]
        }
    ],
    eventStore: {
        autoLoad: true,
        autoCommit: true,
        readUrl: 'http://localhost:3030/event',
        createUrl: 'http://localhost:3030/event',
        updateUrl: 'http://localhost:3030/event',
        deleteUrl: 'http://localhost:3030/event',
        useRestfulMethods: true
    },
    resources: [
        { id: 'r1', name: 'Mike' },
        { id: 'r2', name: 'Linda' },
        { id: 'r3', name: 'Arnold' },
        { id: 'r4', name: 'Angelo' },
        { id: 'r5', name: 'Celia' },
        { id: 'r6', name: 'Kate' },
        { id: 'r7', name: 'Linda' },
        { id: 'r8', name: 'Mark' },
        { id: 'r9', name: 'Rob' },
        { id: 'r10', name: 'Maxim' }
    ],
} as Partial<SchedulerConfig>;

Best of luck ,
Tasnim

[rytis.i]

aahh, that was not obvious, thank you!

[rytis.i]

Hi,

As you're using schedulerpro, for non-working time you'd need to use calendars
Please check this calendars guide https://www.bryntum.com/products/schedulerpro/docs/guide/SchedulerPro/basics/calendars
Replacing the scheduler config in your test case with the config below should make the non working time hilighted

const schedulerConfig = {
    features:{
        stripe: true,
        dependencies: false,
        // nonWorkingTime: true,
    },
    columns: [
        { text: 'Name', field: 'name', width: 130 },
    ],
    project : {
        calendar : 'weekends'
    },
    calendars : [
        {
            id        : "weekends",
            name      : "Weekends",
            intervals : [
                {
                    recurrentStartDate : "on Sat at 0:00",
                    recurrentEndDate   : "on Mon at 0:00",
                    isWorking          : false
                }
            ]
        }
    ],
    eventStore: {
        autoLoad: true,
        autoCommit: true,
        readUrl: 'http://localhost:3030/event',
        createUrl: 'http://localhost:3030/event',
        updateUrl: 'http://localhost:3030/event',
        deleteUrl: 'http://localhost:3030/event',
        useRestfulMethods: true
    },
    resources: [
        { id: 'r1', name: 'Mike' },
        { id: 'r2', name: 'Linda' },
        { id: 'r3', name: 'Arnold' },
        { id: 'r4', name: 'Angelo' },
        { id: 'r5', name: 'Celia' },
        { id: 'r6', name: 'Kate' },
        { id: 'r7', name: 'Linda' },
        { id: 'r8', name: 'Mark' },
        { id: 'r9', name: 'Rob' },
        { id: 'r10', name: 'Maxim' }
    ],
} as Partial<SchedulerConfig>;

Best of luck ,
Tasnim

I've added the calendars config, but the weekends are still not displayed. Am I missing some CSS settings?

[tasnim]

Hi,

It is working fine here with your app. I'm attaching your demo app below (edited version) so you can check what's missing

Best of luck ,
Tasnim

[rytis.i]

I've missed the setting of project calendar.

    project : {
        calendar : 'weekends'
    },

Thanks for the help!

[rytis.i]

I still need a bit of help. I'm trying to create something similar to this demo https://bryntum.com/products/scheduler/examples/nonworkingdays/ The weekends are highlighted but events still can be placed. isWorking: false prevents events from being placed on the interval. I've tried setting isWorking: true and changing the interval color with cls, but cls is ignored for isWorking: true according to docs https://bryntum.com/products/schedulerpro/docs/api/SchedulerPro/model/CalendarIntervalModel#config-cls

How can I achieve the same behavior as in the demo (weekends highlighted but still usable) with SchedulerPro?

[tasnim]

Hi,

If you don't want these nonworking days to effect the scheduling. Then you should use TimeRanges feature instead https://www.bryntum.com/products/gantt/docs/api/Scheduler/feature/TimeRanges

Here is a codepen demo for you https://codepen.io/dv-auntik/pen/RwOZgPR?editors=0010

Hope it helps.

Best of luck ,
Tasnim

[rytis.i]

Thank you for prompt answer, @tasnim. Is there a way to display the date, or make the the date visible, in your example the time range covers the actual date. Is there easy way to do this or do I have to mess with CSS?

[tasnim]

Hi,

You can simply remove it by setting https://www.bryntum.com/products/gantt/docs/api/Scheduler/feature/TimeRanges#config-showHeaderElements to false

	features : {
		timeRanges : {
			showHeaderElements : false
		}
	},

Best of luck ,
Tasnim