[ANGULAR] Disabled Periods

[thomasb]

Hello,

We are having scheduler pro version using with angular. I have a requirement that I want periods of time to be blocked
for exampl
period 1: 01.01.2025 - 31.03.2025 --> blocked (disabled)
period 2: 01.04.2025 - 30.04.2025 --> visible und functional
period 3: 01.05.2025 - 31.12.2025 --> blocked (disabled)

How I can achieve this? can you provide a code example in angular?

thanks for you help.

Best Thomas

[ghulam.ghous]

Hey Thomas,

Seems like you are looking for non-working time using calendars. Checkout this guide here: https://bryntum.com/products/schedulerpro/docs/guide/SchedulerPro/basics/calendars and this feature: https://bryntum.com/products/schedulerpro/docs/api/Scheduler/feature/NonWorkingTime

We have this example in the angular, please check it out:
https://bryntum.com/products/schedulerpro/examples/frameworks/angular/non-working-time/dist/non-working-time/

So what you need to do is define a non-working time using the calendar and then assign that calendar to the project. https://bryntum.com/products/schedulerpro/docs/api/SchedulerPro/model/ProjectModel#field-calendar

And if you want to see the non-working time visually, you need to turn on the non-working time feature.

[thomasb]

Hi Ghulam

Thanks for your help, that's working. One last question: is it possible to visually highlight this non working time blocks. like colorize them and name label them?

Thats how I integrate the blocked periods. is there a property for in the intervals, to label or style it?

project: {
    // use our store for time ranges (crudManager will load it automatically among other project stores)
    timeRangeStore: shiftTimeRangeStore,
    // calendar: 'holidays'
    calendar: 'closedperiods',
    calendars : [
      // Calendar definition
      {
        id        : 'closedperiods',
        name      : 'closedperiods',
        intervals : [
          {
            startDate : moment().startOf('year').toDate(),
            endDate   : moment().startOf('week').toDate(),
            isWorking          : false

      }
    ]
  }
]
  },

Thanks
Thomas

[alex.l]

Hi Thomas,

I recommend you to check our demos https://bryntum.com/products/schedulerpro/examples/non-working-time/
Resource calendars are also support it https://bryntum.com/products/schedulerpro/examples/resource-non-working-time/

[thomasb]

Hi Alex,

Sometimes its not really clear how to implement it just with the examples.
I tried to add a cls properts as described here, but that has no effect, : https://bryntum.com/products/schedulerpro/docs/api/SchedulerPro/model/CalendarIntervalModel#field-color

 intervals: [
          {
            startDate: moment(snapshotStart).subtract(10, 'years').toDate(),
            endDate: snapshotStart.toDate(),
            isWorking: false,
            cls: 'closed-period'
          },
          {
            startDate: snapshotEnd.toDate(),
            endDate: moment(snapshotEnd).add(10, 'years').toDate(),
            isWorking: false
          }
        ]

also the property "color" is not working, any idea?

[ghulam.ghous]

Hey Thomas,

After applying cls in the data, you will also need to define the styles you wana use let's say color in the css. Check out the css of the this example: https://bryntum.com/products/schedulerpro/examples/non-working-time/, it has applying custom styling for the factory shutdown non-working time. This was the data for the factoryShutdown:

  "calendars" : {
    "rows" : [
      {
        "id"                       : "workhours",
        "name"                     : "Working hours",
        "unspecifiedTimeIsWorking" : true,
        "intervals"                : [
          {
            "recurrentStartDate" : "at 16:00",
            "recurrentEndDate"   : "at 00:00",
            "isWorking"          : false,
            "name"               : "Non working time"
          },
          {
            "startDate" : "2020-03-23T02:00",
            "endDate"   : "2020-03-23T04:00",
            "isWorking" : false,
            "cls"       : "factoryShutdown",
            "name"      : "Factory shutdown"
          }
        ]
      }
    ]
  },

and css:

.b-sch-nonworkingtime.factoryShutdown{
  background:transparent repeating-linear-gradient(-55deg, rgba(221, 221, 221, 0.6), rgba(221, 221, 221, 0.6) 10px, rgba(238, 238, 238, 0.6) 5px, rgba(238, 238, 238, 0.6) 20px);
}
.b-grid-header .b-sch-nonworkingtime.factoryShutdown{
  opacity:0.7;
}

[thomasb]

Hi Ghulam

Thanks for your answer. Thats works fine. Now hopefully my last question

I want to switch the calendars (non working time block) during runtime:

Ill do that like here

this.scheduler.project.calendars = [
      // Calendar definition
      {
        id: 'snapshotperiods',
        name: 'snapshotperiods',
        unspecifiedTimeIsWorking: true,
        intervals: [
          {
            startDate: moment(snapshotStart).subtract(10, 'years').toDate(),
            endDate: snapshotStart.toDate(),
            isWorking: false,
            cls: 'nosnapshotperiod',
            // @ts-ignore
            name: this.translateService.instant('SNAPSHOT_OUT_OF_PLAN')
          },
          {
            startDate: snapshotEnd.toDate(),
            endDate: moment(snapshotEnd).add(10, 'years').toDate(),
            isWorking: false,
            cls: 'nosnapshotperiod',
            // @ts-ignore
            name: this.translateService.instant('SNAPSHOT_OUT_OF_PLAN')
          }
        ]
      }
    ]

The thing is the scheduler doesn't get updated. do I need to refresh it somehow? Or how I can I achieve this?

Thanks,
Thomas

[ghulam.ghous]

Hey Thomas,

This is not gonna work, instead first please unassign the existing calendars:

schedulerPro.project.calendar  = null

And now please remove all the records:

schedulerPro.project.calendarManagerStore.removeAll()

https://bryntum.com/products/schedulerpro/docs/api/SchedulerPro/data/CalendarManagerStore

And now you can add your new calendars:

https://bryntum.com/products/schedulerpro/docs/api/SchedulerPro/data/CalendarManagerStore#function-add

schedulerPro.project.calendarManagerStore.add(newCalendars)

And again assign the calendar:

schedulerPro.project.calendar = newCalendarID

Hope this helps