Change k-event inline style in Scheduler....

[Terry]

Im trying to change the height of a highlighted event in the monthview scheduler calendar

Its an inline style according to Chrome dev tools. If I change it there I get the desired result but I cannot find where to make that change in source code.

Ive tried adding the following to my view to no avail:

<style>
.k-scheduler-monthview .k-event
{
height: 75px;
}
</style>

Here is the rendered code

<div role="gridcell" aria-selected="false" data-uid="ab5621fd-4c0a-436f-9056-39bac061d6b9" class="k-event" style="top: 115px; width: 73px; left: 2px; height: 25px;"><span class="k-event-actions"></span><div title="Maratona Dles Dolomites 2017"><div class="k-event-template">Maratona Dles Dolomites 2017</div></div><span class="k-event-actions"></span></div>

Where and how can I change 'height: 25px' to a different value?

Full rendered code:

<table class="k-scheduler-layout k-scheduler-monthview k-scrollbar-h"><tbody><tr><td><div class="k-scheduler-header k-state-default"><div class="k-scheduler-header-wrap"><table class="k-scheduler-table"><tbody><tr><th colspan="1" class="">Sunday</th><th colspan="1" class="">Monday</th><th colspan="1" class="">Tuesday</th><th colspan="1" class="">Wednesday</th><th colspan="1" class="">Thursday</th><th colspan="1" class="">Friday</th><th colspan="1" class="">Saturday</th></tr></tbody></table></div></div></td></tr><tr><td><div class="k-scheduler-content" style="height: 576px;"><table class="k-scheduler-table"><tbody><tr role="row"><td class="k-other-month k-state-selected" role="gridcell" aria-selected="true"><span class="k-link k-nav-day">25</span></td><td class=" k-other-month" role="gridcell" aria-selected="false"><span class="k-link k-nav-day">26</span></td><td class=" k-other-month" role="gridcell" aria-selected="false"><span class="k-link k-nav-day">27</span></td><td class=" k-other-month" role="gridcell" aria-selected="false"><span class="k-link k-nav-day">28</span></td><td class=" k-other-month" role="gridcell" aria-selected="false"><span class="k-link k-nav-day">29</span></td><td class=" k-other-month" role="gridcell" aria-selected="false"><span class="k-link k-nav-day">30</span></td><td role="gridcell" aria-selected="false"><span class="k-link k-nav-day">01</span></td></tr><tr role="row"><td role="gridcell" aria-selected="false"><span class="k-link k-nav-day">02</span></td><td role="gridcell" aria-selected="false"><span class="k-link k-nav-day">03</span></td><td role="gridcell" aria-selected="false"><span class="k-link k-nav-day">04</span></td><td role="gridcell" aria-selected="false"><span class="k-link k-nav-day">05</span></td><td role="gridcell" aria-selected="false"><span class="k-link k-nav-day">06</span></td><td role="gridcell" aria-selected="false"><span class="k-link k-nav-day">07</span></td><td role="gridcell" aria-selected="false"><span class="k-link k-nav-day">08</span></td></tr><tr role="row"><td role="gridcell" aria-selected="false"><span class="k-link k-nav-day">09</span></td><td role="gridcell" aria-selected="false"><span class="k-link k-nav-day">10</span></td><td role="gridcell" aria-selected="false"><span class="k-link k-nav-day">11</span></td><td role="gridcell" aria-selected="false"><span class="k-link k-nav-day">12</span></td><td role="gridcell" aria-selected="false"><span class="k-link k-nav-day">13</span></td><td role="gridcell" aria-selected="false"><span class="k-link k-nav-day">14</span></td><td role="gridcell" aria-selected="false"><span class="k-link k-nav-day">15</span></td></tr><tr role="row"><td role="gridcell" aria-selected="false"><span class="k-link k-nav-day">16</span></td><td role="gridcell" aria-selected="false"><span class="k-link k-nav-day">17</span></td><td role="gridcell" aria-selected="false"><span class="k-link k-nav-day">18</span></td><td role="gridcell" aria-selected="false"><span class="k-link k-nav-day">19</span></td><td role="gridcell" aria-selected="false"><span class="k-link k-nav-day">20</span></td><td role="gridcell" aria-selected="false"><span class="k-link k-nav-day">21</span></td><td role="gridcell" aria-selected="false"><span class="k-link k-nav-day">22</span></td></tr><tr role="row"><td role="gridcell" aria-selected="false"><span class="k-link k-nav-day">23</span></td><td role="gridcell" aria-selected="false"><span class="k-link k-nav-day">24</span></td><td role="gridcell" aria-selected="false"><span class="k-link k-nav-day">25</span></td><td role="gridcell" aria-selected="false"><span class="k-link k-nav-day">26</span></td><td role="gridcell" aria-selected="false"><span class="k-link k-nav-day">27</span></td><td role="gridcell" aria-selected="false"><span class="k-link k-nav-day">28</span></td><td role="gridcell" aria-selected="false"><span class="k-link k-nav-day">29</span></td></tr><tr role="row"><td role="gridcell" aria-selected="false"><span class="k-link k-nav-day">30</span></td><td role="gridcell" aria-selected="false"><span class="k-link k-nav-day">31</span></td><td class=" k-other-month" role="gridcell" aria-selected="false"><span class="k-link k-nav-day">01</span></td><td class=" k-other-month" role="gridcell" aria-selected="false"><span class="k-link k-nav-day">02</span></td><td class=" k-other-month" role="gridcell" aria-selected="false"><span class="k-link k-nav-day">03</span></td><td class=" k-other-month" role="gridcell" aria-selected="false"><span class="k-link k-nav-day">04</span></td><td class=" k-other-month" role="gridcell" aria-selected="false"><span class="k-link k-nav-day">05</span></td></tr></tbody></table><div role="gridcell" aria-selected="false" data-uid="ab5621fd-4c0a-436f-9056-39bac061d6b9" class="k-event" style="top: 115px; width: 73px; left: 2px; height: 25px;"><span class="k-event-actions"></span><div title="Maratona Dles Dolomites 2017"><div class="k-event-template">Maratona Dles Dolomites 2017</div></div><span class="k-event-actions"></span></div></div></td></tr></tbody></table>

Thank you.

[Terry]

I've managed to improve it to 60px from 25, by changing the following in my view:

 

.Views(v => { v.MonthView(); v.WeekView(); v.DayView(); })

to

.Views(v => { v.MonthView(vh => vh.EventHeight(60)); v.WeekView(); v.DayView(); })

Anything beyond 60px results in an elipsis which when clicked on brings me to the event in day view.
Its not ideal but its an improvement. Any better/alternative solutions much appreciated.

[Ivan Danchev]

Hello Terry,

The EventHeight() configuration option is the correct one to use. Here's a link to its section in the API documentation.

Regards,
Ivan Danchev
Telerik by Progress

[Terry]

Thankyou Ivan.