Our pure JavaScript Scheduler component


Post by melazhadi »

Hello,

how i can display today's date with a different color than white which is by default such as saturday and sunday are displayed with a different background than the others

Post by mats »

If you look in the DOM inspector, we add a special CSS class to today's cell:
.b-sch-dayheadercell-today { background:#000; }

Post by melazhadi »

for this class css you gave me it's just for the header me I want all of today's column to be with a different color than the other days

Post by mats »

Ok, then simply add an entry to the TimeRanges store with start/end of current day. Docs: https://bryntum.com/docs/scheduler/#Sch ... TimeRanges

Post by melazhadi »

I added this code to the components but nothing is displayed
//Scheduler.vue
treeFeature              : Boolean,
//schedulerConfig.js
timeRangesFeature :true, 
...
timeRangesFeature : [
        { id : 1, startDate : new Date(), duration : 1, durationUnit : 'day', timeRangeColor : 'red'  }
    ],

Post by pmiklashevich »

Hello @melazhadi,

Using timeRangesFeature config 2 times sounds wrongs. Probably should be
                timeRanges        : [...],
                timeRangesFeature : true,
But I can't say more without a context. Please upload a runnable testcase that I can inspect.

Cheers,
Pavel

Pavlo Miklashevych
Sr. Frontend Developer


Post by melazhadi »

Hello
you will find attached my project @Pavel I made the changes that you proposed to me but nothing is displayed
Last edited by melazhadi on Fri Apr 19, 2019 3:53 pm, edited 1 time in total.

Post by pmiklashevich »

TimeRanges feature passes its store to the CrudManager. So you can just simply add your time ranges to planningEquipe/public/data/data.json file:
{
    "success"  : true,
    "timeRanges"    : {
        "rows": [
            {
                "name"     : "Morning coffee",
                "cls"      : "coffee",
                "startDate": "2018-05-08",
                "endDate"  : "2018-05-09"
            }
        ]
    },
    ...
and leave just "timeRangesFeature: true" in planningEquipe/src/components/schedulerConfig.js

Cheers,
Pavel

Pavlo Miklashevych
Sr. Frontend Developer


Post by melazhadi »

Hello,

yes now it's good I just have two little problems for the date is a date damic it takes the date of the day
new date () 
And changed the color so that it will have a different color than the weekends

Is there a solution

thanks

Post by pmiklashevich »

You can get Time Ranges store from Crud Manager and set data you need.
Please open this demo and run in console: https://www.bryntum.com/examples/scheduler/timeranges/
scheduler.setStartDate(new Date());
scheduler.crudManager.getStore('timeRanges').data = [
    {startDate : new Date(), duration : 1, durationUnit : 'h', style : 'background: tomato;', cls : 'my-zone'}
]

Pavlo Miklashevych
Sr. Frontend Developer


Post Reply