This is a migrated thread and some comments may be shown as answers.

Reduce the cell size of each cell

3 Answers 32 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
Nithin
Top achievements
Rank 1
Nithin asked on 16 May 2018, 01:30 PM

Hi,

I'm trying to reduce the cell width in the scheduler and also change the weekend highlight which is by default from Saturday to Sunday and change it to Friday to Saturday .
Is there any CSS hack for this requirement?

Thanks 

3 Answers, 1 is accepted

Sort by
0
Dimitar
Telerik team
answered on 18 May 2018, 12:06 PM
Hello Nithin,

The Kendo UI Scheduler provides the views.columnWidth options that can be used to modify the width of the columns in "timeline", "timelineWeek", "timelineWorkWeek" or "timelineMonth" views. For additional suggestions on how to apply a custom approach to achieve similar result with the week views, please refer to the following forum thread.

Concerning the weekend highlight, you could utilize the workWeekEnd configuration option to specify the end of the work week. This is applicable for the "day" and "week" views and can be observed on the following Dojo example.

In case you also need to modify the background color, modify the following selector:
<style>
  .k-nonwork-hour {
    background-color: orange;
  }
</style>

Regards,
Dimitar
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Nithin
Top achievements
Rank 1
answered on 22 May 2018, 01:54 PM
Hi,
I'm expecting weekends to be something like this in the image

0
Ivan Danchev
Telerik team
answered on 25 May 2018, 06:11 AM
Hi Nitin,

You can highlight Friday and Saturday as non-working days by setting both workWeekStart and workWeekEnd options:
workWeekStart: 7,
workWeekEnd: 4,

As for the size of the cells, by default the Scheduler occupies 100% of the container's width and this way when the container is resized the Schedule (and its cells) resizes accordingly. Therefore reducing the width of the cells would require setting a fixed width of the Scheduler.
See this dojo example in which both Friday and Saturday highlighting is shown and the Scheduler has fixed width (800) set.

Regards,
Ivan Danchev
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Scheduler
Asked by
Nithin
Top achievements
Rank 1
Answers by
Dimitar
Telerik team
Nithin
Top achievements
Rank 1
Ivan Danchev
Telerik team
Share this question
or