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

4 posts, 1 answers
  1. Terry
    Terry avatar
    20 posts
    Member since:
    May 2017

    Posted 16 May 2017 Link to this post

    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.
  2. Terry
    Terry avatar
    20 posts
    Member since:
    May 2017

    Posted 16 May 2017 Link to this post

    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.
  3. Answer
    Ivan Danchev
    Admin
    Ivan Danchev avatar
    2058 posts

    Posted 18 May 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  4. Terry
    Terry avatar
    20 posts
    Member since:
    May 2017

    Posted 18 May 2017 Link to this post

    Thankyou Ivan.
Back to Top