Space out weekday checkboxes in weekly repeat recurrence editor

3 posts, 1 answers
  1. Erik
    Erik avatar
    42 posts
    Member since:
    Aug 2012

    Posted 06 Apr 2017 Link to this post

    I have gotten several user complaints that it is hard to differentiate the weekday checkboxes.

    Is there a way to space them out a bit?


    I have tried (without success) to handle the edit event of the scheduler and bind to the change event of the recurrenceeditor dropdown to set the margin style.

    function onEdit(e) {
       var recurDropdown = e.container.find("[data-role=recurrenceeditor]");
       // handle recurrence editor's change event
       recurDropdown.unbind("change", spaceWeekDayChks);
       recurDropdown.bind("change", spaceWeekDayChks);
    function spaceWeekDayChks() {
       // space out recurrence editor week days
       // - called from change event of recurrence editor dropdown
       $('.k-recur-weekday-checkbox').css("margin-right", "20px");


  2. Answer
    Veselin Tsvetanov
    Veselin Tsvetanov avatar
    1179 posts

    Posted 10 Apr 2017 Link to this post

    Hi Erik,

    To set custom spacing between the Weekday checkboxes, I would suggest you to apply the following CSS rule:
    .k-check .k-recur-weekday-checkbox {
      margin-left: 20px;

    Here you will find a Dojo sample, based on the above.

    Veselin Tsvetanov
    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.
  3. Erik
    Erik avatar
    42 posts
    Member since:
    Aug 2012

    Posted 10 Apr 2017 in reply to Veselin Tsvetanov Link to this post

    Thanks your solution to apply CSS rule worked perfectly.  I was definitely over-complicating it :)
Back to Top