Cleaning up MONTHDAY selector for an RRULE generator

28 views Asked by At

Okay, so I'm trying to update some old js/html/jquery code for my work website. I want to modify a section of code which I'm pretty sure is written with horrible inefficiency, but I'm too dumb to know how to make it cleaner and I'm hoping for suggestions.

// BYMONTHDAY Selection
jQuery('#monthday-select button').on('click', function() {
  jQuery(this).toggleClass('active');
  var bymonthday = []; // Array to Store 'bymonthday' in. Reset it to '' to store new days in below

  // Store Selected Days in the BYDAY rule
  jQuery('#monthday-select button').each(function() {

    // Active class is the selected day, store the ID of active days which contains the short day name for the rrule (ex. MO, TU, WE, etc)
    if (jQuery(this).hasClass('active')) {
      bymonthday.push(jQuery(this).attr('data-day-num'));
    }

  });
  recurringRule.bymonthday = bymonthday;

  // Reset BYDAY Option
  recurringRule.byday = "";

  // Reset BySetPos
  recurringRule.bysetpos = "";
  rruleGenerate();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- BYMONTHDAY -->   
<div id="monthday-select" class="btn-toolbar months-choice" role="toolbar" style="display:none;">
<input type="radio" name="monthday-pos-select" value="monthday-selected" id="monthday-selected" checked="checked" /> 

<h4>Which day(s) of the month does this repeat on</h4>
<div class="btn-group" style="display:block;float:none;"> 
    <button class="btn btn-default" style="width:14.28571428571429%;" data-day-num="1">1</button>
    <button class="btn btn-default" style="width:14.28571428571429%;" data-day-num="2">2</button>
    <button class="btn btn-default" style="width:14.28571428571429%;" data-day-num="3">3</button>
    <button class="btn btn-default" style="width:14.28571428571429%;" data-day-num="4">4</button>
    <button class="btn btn-default" style="width:14.28571428571429%;" data-day-num="5">5</button>
    <button class="btn btn-default" style="width:14.28571428571429%;" data-day-num="6">6</button>
    <button class="btn btn-default" style="width:14.28571428571429%;" data-day-num="7">7</button>
</div>
<div class="btn-group" style="display:block;float:none;">
    <button class="btn btn-default" style="width:14.28571428571429%;" data-day-num="8">8</button>
    <button class="btn btn-default" style="width:14.28571428571429%;" data-day-num="9">9</button>
    <button class="btn btn-default" style="width:14.28571428571429%;" data-day-num="10">10</button>
    <button class="btn btn-default" style="width:14.28571428571429%;" data-day-num="11">11</button>
    <button class="btn btn-default" style="width:14.28571428571429%;" data-day-num="12">12</button>
    <button class="btn btn-default" style="width:14.28571428571429%;" data-day-num="13">13</button>
    <button class="btn btn-default" style="width:14.28571428571429%;" data-day-num="14">14</button>
</div>
<div class="btn-group" style="display:block;float:none;">
    <button class="btn btn-default" style="width:14.28571428571429%;" data-day-num="15">15</button>
    <button class="btn btn-default" style="width:14.28571428571429%;" data-day-num="16">16</button>
    <button class="btn btn-default" style="width:14.28571428571429%;" data-day-num="17">17</button>
    <button class="btn btn-default" style="width:14.28571428571429%;" data-day-num="18">18</button>
    <button class="btn btn-default" style="width:14.28571428571429%;" data-day-num="19">19</button>
    <button class="btn btn-default" style="width:14.28571428571429%;" data-day-num="20">20</button>
    <button class="btn btn-default" style="width:14.28571428571429%;" data-day-num="21">21</button>
</div>
<div class="btn-group" style="display:block;float:none;">
    <button class="btn btn-default" style="width:14.28571428571429%;" data-day-num="22">22</button>
    <button class="btn btn-default" style="width:14.28571428571429%;" data-day-num="23">23</button>
    <button class="btn btn-default" style="width:14.28571428571429%;" data-day-num="24">24</button>
    <button class="btn btn-default" style="width:14.28571428571429%;" data-day-num="25">25</button>
    <button class="btn btn-default" style="width:14.28571428571429%;" data-day-num="26">26</button>
    <button class="btn btn-default" style="width:14.28571428571429%;" data-day-num="27">27</button>
    <button class="btn btn-default" style="width:14.28571428571429%;" data-day-num="28">28</button>
</div>
<div class="btn-group" style="display:block;float:none;">
    <button class="btn btn-default" style="width:14.28571428571429%;" data-day-num="29">29</button>
    <button class="btn btn-default" style="width:14.28571428571429%;" data-day-num="30">30</button>
</div>

Any tips would be awesome.

PS This is my first request here so be gentle.

0

There are 0 answers