Our pure JavaScript Scheduler component


Post by hltob »

Hello,

I use the calendars in our scheduler-pro-project to mark weekends. I set up the isWorking property to false.
But we want to be able to insert events on weekends. So I switched this property to true. Now the weekends are no longer marked. There is no special style anymore. I also can't style with the cls-property. Is the cls-property only used when isWorking set to false?

calendars          : [
    {
      id        : 'weekends',
      name      : 'Weekends',
      intervals : [
        {
          recurrentStartDate : 'on Sat at 0:00',
          recurrentEndDate   : 'on Mon at 0:00',
          isWorking          : false,
          cls: 'tt-scheduler-weekend'
        } as CalendarIntervalModel
      ]
    }
]
// has no effect...
.tt-scheduler-weekend {
  color: red;
}

How to mark weekends and use them as working time?

Attachments
scheduler-weekend-style.PNG
scheduler-weekend-style.PNG (14.01 KiB) Viewed 219 times

Post by alex.l »

All the best,
Alex


Post by mightym »

What I don't understand is why there is the option to set the param "isWorking" to "true". But which removes the the complete interval. I would assume that I still see the grey area from "recurrentStartDate" to "recurrentEndDate". Or are there still some classes in the dom by which I could manually style the weekends?
Timeranges is way more that I want. I just want to have the subtle indicator for the weekends in the grind and header like when using "isWorking=false"


Post by alex.l »

Hi,

isWorking flag has been added to make easier add intervals to calendar. Sometimes easier to add working intervals and set the rest of time as non working, sometimes easier to add non-working intervals and have all not specified time as working.
The UI is implemented to grey out only non working intervals after it calculated in current calendar, it doesn't grey out all intervals that added into calendar's intervals array.
If you want only visual effect there is a https://bryntum.com/products/schedulerpro/docs/api/Scheduler/feature/TimeRanges feature exists for this purposes. You can disable header, apply required styling and add recurrency.

All the best,
Alex


Post by hltob »

Just as @mightym explains, I don't understand the behaviour either. At least my CSS class could be taken so that I can define a style myself for the weekends.


Post by alex.l »

Hi hltob,

You can define CSS, what problem you have with that?
Here is docs: https://bryntum.com/products/schedulerpro/docs/api/SchedulerPro/model/CalendarIntervalModel#field-cls
Here is example
CSS

.b-sch-nonworkingtime.weekend-cls {
    background-color: red;
}

interval

    "calendars"    : {
        "rows" : [
            {
                "id"        : "general",
                "name"      : "General",
                "intervals" : [
                    {
                        "recurrentStartDate" : "on Sat at 0:00",
                        "cls"                : "weekend-cls",
                        "recurrentEndDate"   : "on Mon at 0:00",
                        "isWorking"          : false
                    }
                ]

All the best,
Alex


Post by hltob »

@Alex As I see it, I can only deposit a style if isWorking: false is set. That's what I mean.


Post by alex.l »

Yes, actually it is nonWorkingTime feature, so only non working time displayed. I will clarify that in our docs, thank you for your questions!

All the best,
Alex


Post Reply