Scheduler 5 minute event slots

[Gavin]

Hi folks,

 

I have a requirement for events to be scheduled in 5 minute increments, I have implemented the following code in the scheduler config:

views: [
    {
      type: "day",
      minorTickCount: 30, // display one time slot per major tick
      majorTick: 60
    },
  ]

This serves the purpose but the actual slots are around 30 pixels in height, this means that the schedule for the full day is very long and

overflows off the bottom of the page. Ideally I would like the entire schedule to only take up a max of 900-1000px in height with the slots

being much smaller in height, is there an intelligent way of doing this?

 

Thanks in advance

 

[Vladimir Iliev]

Hi Gavin,

If you need to control the height of the Scheduler you can set the "height" option of the Scheduler as demonstrated in the following demo:

• Scheduler: height set

If you need to make the slots with smaller height than you can try using CSS styles similar to the following ones:

• Scheduler: slot height set

Regards,
Vladimir Iliev
Telerik by Progress

 

 

[Rob]

The Slot height does not seem to work any more. ( 2nd link, changing height does nothing)

I am struggling to work out a way of increasing the minor slots to 15 minutes, but keep the overall size of the major slots the same.

I can force the minor slot size in CSS, but that just screws everything up!

Do we have an updated approach that I can use?

Many thanks

Rob

[Martin]

Currently there is no slotHeight option for the Scheduler's day view. The height in the example provided in the previous reply is controlled through the CSS below. Let me know if you have anything else in mind.

<style>
      .k-scheduler .k-scheduler-layout>tbody>tr:nth-child(2) tr td,
      .k-scheduler .k-scheduler-layout>tbody>tr:nth-child(2) tr th{
        height:30px !important;
      }
    </style>

[Rob]

Thanks Martin
Didn't work for me as it doesn't seem to work below about 15px
I found I needed to add the line-height as well 

            height:7px !important;
            line-height: 7px;

Now I can get the grid more compact.. however a single cell event is not so nice the the delete icon now...

Any ideas on how I could tweak that ?

Many Thanks

[Neli]

Hi Rob,

You could use the k-icon and k-event-delete classes to style and position the delete icon. Below is an example:

         .k-icon:before{
              font-size: 8px !important;
          }
          .k-event-actions{
              top: 0px;
              right: 5px;
          }

I hope this helps.

Regards,

Neli