Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <div id="container">
  <div class="top-bar">
    <div class="modal-title">Custom date 
      <span class="selected-input-type">range</span>
      | 
      <a href="https://s.codepen.io/dannyblackstock/debug/pJBzRX?" target="_blank">period</a>
    </div>
    <div class="modal-close-button"></div>
  </div>
  
  <div class="panel" id="timeline-panel">
    <div class="panel-title">
      Timeline
    </div>
    <label><input id="select-year-radio" name="scale" type="radio">Year</label>
    <label><input id="select-month-radio" name="scale" type="radio" checked>Month</label>
  </div>
  <div class="panel" id="selected-panel">
    <div class="panel-title">Selected</div>
    <div class= "not-set" id="selected-range">Not set <i class="fa fa-times"></i></div>
  </div>

  <div id="custom-scrollbar">
    <div class="scrollbar-period" id="scrollbar-start"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period" id="scrollbar-end"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div><div class="scrollbar-period"></div>
  </div>
  
  <div id="range-selector">
    <div class="period-block-container show-year"><div class="period-block"></div><div class="month">Aug</div><div class="year">2015</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Sep</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Oct</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Nov</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Dec</div></div><div class="period-block-container show-year"><div class="period-block"></div><div class="month">Jan</div><div class="year">2016</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Feb</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Mar</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Apr</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">May</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Jun</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Jul</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Aug</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Sep</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Oct</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Nov</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Dec</div></div><div class="period-block-container show-year"><div class="period-block"></div><div class="month">Jan</div><div class="year">2017</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Feb</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Mar</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Apr</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">May</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Jun</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Jul</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Aug</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Sep</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Oct</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Nov</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Dec</div></div><div class="period-block-container show-year"><div class="period-block"></div><div class="month">Jan</div><div class="year">2018</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Feb</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Mar</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Apr</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">May</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Jun</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Jul</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Aug</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Sep</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Oct</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Nov</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Dec</div></div><div class="period-block-container show-year"><div class="period-block"></div><div class="month">Jan</div><div class="year">2019</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Feb</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Mar</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Apr</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">May</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Jun</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Jul</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Aug</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Sep</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Oct</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Nov</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Dec</div></div><div class="period-block-container show-year"><div class="period-block"></div><div class="month">Jan</div><div class="year">2020</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Feb</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Mar</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Apr</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">May</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Jun</div></div><div class="period-block-container"><div class="period-block"></div><div class="month">Jul</div></div>
  </div>
  <div id="year-range-selector">
    <div class="year-period-block-container"><div class="year-period-block"></div><div class="year">2015</div></div><div class="year-period-block-container"><div class="year-period-block"></div><div class="year">2016</div></div><div class="year-period-block-container"><div class="year-period-block"></div><div class="year">2017</div></div><div class="year-period-block-container"><div class="year-period-block"></div><div class="year">2018</div></div><div class="year-period-block-container"><div class="year-period-block"></div><div class="year">2019</div></div><div class="year-period-block-container"><div class="year-period-block"></div><div class="year">2020</div></div>
  </div>
  <div class="bottom-bar">
    <label id="multiple-rows-checkbox-label">
      <input type="checkbox" /> Individual segments
    </label>
    <button class="positive">Add</button>
  </div>
</div>
            
          
!
            
              @import url(https://fonts.googleapis.com/css?family=Open+Sans:600,400,300);
@import "bourbon";

// ----- VARIABLES ----- //

$panel-title-color: #aaa;
$text-color: #444;
$hover-color: #f4f4f4;
$medium-grey: #ccc;
$light-selected-color: #E0EAFF;
$selected-click-color: #5A8BFF;
$default-button-color: #f5f5f5;
$period-block-color: #f0f4f9;

$border-radius: 4px;

$attributes-list-height: 300px;
$panel-width: 250px;
$exclude-link-width: 45px;

$deselect-member-button-width: 15px;
$deselect-member-button-padding: 5px;

// ----- GENERAL ----- //

* {
    font-family: 'Open Sans', 'Helvetica', sans-serif;
    font-size: 13px;
    color: $text-color;
    @include user-select(none);
}

html, body {
  height: 100%;
  overflow: hidden;
}

body {
  text-align: center;
  padding: 25px;
}

input {
  // center the checkbox....
  vertical-align: middle;
  position: relative;
  top: -1px;
}

#container {
  width: 795px;
  border: 1px solid $panel-title-color;
  padding: 25px;
  display: inline-block;
  text-align: left;
  box-shadow: 0 3px 8px rgba(0,0,0,.3);
}

// ----- TOP BAR ----- //

.top-bar {
  margin: 0 0 30px 10px;
  @include display(flex);
  justify-content: space-between;
}

.modal-title {
  font-size: 24px;
  font-weight: 300;
  
  a {
    font-size: 24px;
    font-weight: 300;
    text-decoration: none;
    &:hover {
      text-decoration: underline;
    }
  }
  
  .selected-input-type {
    color: $selected-click-color;
    font-size: 24px;
    font-weight: 300;
  }
}

.modal-close-button {
  width: 18px;
  height: 18px;
  margin-top: 9px;
  
  background-image: url('https://cdn4.iconfinder.com/data/icons/geomicons/32/672366-x-128.png');
  background-size: 18px;
  
  opacity: .5;
  cursor: pointer;
  @include transition(opacity .2s);
  
  &:hover {
    opacity: .7;
  }
  
  &:active {
    opacity: 1;
  }
}

// ----- PANELS ----- //
.panel {
  width: $panel-width;
  overflow: auto;
  display: block;
  float: left;
  
  &:hover {
    .panel-controls, .find-bar {
      opacity: 1;
    }
  }
}

#timeline-panel {
  overflow: hidden;
  label {
    margin-right: 10px;
  }
  input {
    margin: 0 5px 0 2px;
  }
}

#selected-panel {
  float: right;
  
  #selected-range {
    background: $selected-click-color;
    padding: 4px 10px;
    border-radius: $border-radius;
    color: white;

    @include transition(background .2s, color .2s);
    
    & .fa-times {
      float: right;
      margin-top: 2px;
      color: white;
      opacity: 1;
      cursor: pointer;
      
      @include transition(opacity .2s);
    }
    
    &.not-set {
      background: $medium-grey;
      color: darken($medium-grey, 25%);
      
      & .fa-times {
        opacity: 0;
        cursor: default;
      }
    }
  }
}

.panel-title {
  padding: 5px 0px 5px 0px;
  //margin: 0 0 0 10px;
  color: $panel-title-color;
  font-size: 10px;
  text-transform: uppercase;
  border-top: 1px solid $panel-title-color;
}

.list-container {
  height: $attributes-list-height;
  overflow: auto;
}

.list {
    padding: 0 0 5px 0;
    margin: 0;
    cursor: pointer;
    list-style-type: none;
    overflow-x: hidden;
  
  &:before {
    content: '';
    pointer-events: none;
    width: 100%;
    position: absolute;
    bottom: 0;
    height: 15px;
    @include linear-gradient(transparent 0%, white 100%);
  }
}

#custom-scrollbar {
  float: left;
  margin: 40px 0 5px 0;
  clear: both;
  padding: 0 2px;
  cursor: ew-resize;
}

.scrollbar-period {
  box-sizing: border-box;
  display: inline-block;
  width: 12px;
  height: 24px;
  margin-right: 1px;
  
  background: $period-block-color;
  border: 1px solid darken($period-block-color, 10%);

  @include transition(background-color .15s);
  
  &.hovered {
    background-color: white;
  }
  
  &.selected {
    background-color: lighten($selected-click-color, 15%);
    border: 1px solid lighten($selected-click-color, 5%);
    border-radius: $border-radius;
    
    &.hovered {
      background-color: lighten($selected-click-color, 20%);
    }
  }

}

#scrollbar-start {
  border-left: 3px solid $selected-click-color;
}

#scrollbar-end {
  border-right: 3px solid $selected-click-color;
}

#range-selector {
  overflow-y: hidden;
  overflow-x: hidden;
  white-space: nowrap;
  margin-bottom: 90px;
  width: 780px;
}

#year-range-selector {
  display: none;
  overflow-y: hidden;
  white-space: nowrap;
  padding-top: 40px;
  margin-bottom: 101px;
  overflow-x: hidden;
  width: 797px;
}

.period-block-container {
  display: inline-block;
  //cursor: ew-resize;
  cursor: pointer;
  vertical-align: top;
  height: 58px;
  margin-right: 0px;
  padding: 2px;
  border-top: 1px solid white;
  //box-sizing: border-box;
  
  @include transition(background-color .15s, border .15s);

  &.selected {
    background-color: $light-selected-color;
    font-weight: 600;
    border-top:1px solid $selected-click-color;
    border-bottom:1px solid $selected-click-color;
    
    .period-block {
      border: 1px solid darken($selected-click-color, 5%);
      background-color: $selected-click-color;
    }
  }
  
  &.first-selected {
    border-left:1px solid $selected-click-color;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
  }
  
  &.last-selected {
    border-right:1px solid $selected-click-color;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
  }
  
  &:hover .period-block {
    background-color: lighten($period-block-color, 5%);
  }
  
  &.selected:hover .period-block {
    background-color: lighten($selected-click-color, 5%);
  }
}

.period-block {
  width: 54px;
  height: 20px;
  
  background: $period-block-color;
  border: 1px solid darken($period-block-color, 10%);
  border-radius: $border-radius;
  
  @include transition(background-color .15s);
}

.year-period-block-container {
  @extend .period-block-container;
  height: auto;
}

.year-period-block {
  @extend .period-block;
  height: 60px;
  width: 129px;
}

.bottom-bar {
  text-align: right;
}

#multiple-rows-checkbox-label {
  margin-right: 15px;
  display: none;
}

// ----- BUTTONS ----- //

button {
  padding: 0 20px;
  height: 32px;
  
  border: 1px solid darken($default-button-color, 25);
  border-radius: $border-radius;
  
  background-color: $default-button-color;
  text-align: center;
  cursor: pointer;
  
  @include transition(background-color .2s);

  &:hover {
    background-color: darken($default-button-color, 10);
  }
  &:active {
    background-color: darken($default-button-color, 25);
  }
  &.positive {
    background-color: $selected-click-color;
    color: white;
    border: 0;
    
    &:hover {
      background-color: darken($selected-click-color, 10);
    }
    &:active {
      background-color: darken($selected-click-color, 25);
    }
  }
}
            
          
!
            
              var clickedScrollbar = false;
var clickedSelector = false;
var scrollWidth = 60;
var clickedYearSelector = false;

var startIndex = 0;
var endIndex = 0;

var startYearIndex = 0;
var endYearIndex = 0;

var initialX = 0;
var dragging = false;

var clickedPeriodIndex = 0;
var clickedYearPeriodIndex = 0;

var timeout;
var mouseX;

$('#year-range-selector').on('mousedown', '.year-period-block-container', function(e) {
  clickedYearSelector = true;
  clickedYearPeriodIndex = $(this).index();
});
  
// click detection
$('#range-selector').on('mousedown', '.period-block-container', function(e) {
  clickedSelector = true;
  clickedPeriodIndex = $(this).index();

  // get range selector position
  var rangeSelectorX = $('#range-selector').offset().left;
  var rangeSelectorY = $('#range-selector').offset().top;
  var rangeSelectorWidth = $('#range-selector').width();

  timeout = setInterval(function(event) {

    // select the period at the coordinates
    var draggedElement = document.elementFromPoint(mouseX, rangeSelectorY);

    // convert to jquery and get its index
    var draggedIndex = $(draggedElement).index();

    //change clicked element
    clickedPeriodIndex = draggedIndex;

    // change hovered element
    $('.scrollbar-period').removeClass('hovered');
    $('.scrollbar-period').eq(draggedIndex).addClass('hovered');

    // scroll one period if near the edge every 350ms
    if (mouseX > (rangeSelectorX + (rangeSelectorWidth - 30))) {

      $('#range-selector').animate({
        scrollLeft: $('#range-selector').scrollLeft() + scrollWidth
      }, 0);

      if (draggedIndex + 1 < 60) {
        //clear the scrollbar IDs
        $('.scrollbar-period').attr('id', '');

        // add the IDs back
        $('.scrollbar-period').eq(draggedIndex - 11).attr('id', 'scrollbar-start');
        $('.scrollbar-period').eq(draggedIndex + 1).attr('id', 'scrollbar-end');
      }

    } else if ((mouseX < (rangeSelectorX + 30))) {
      $('#range-selector').animate({
        scrollLeft: $('#range-selector').scrollLeft() - scrollWidth
      }, 0);

      if (draggedIndex - 1 >= 0) {
        //clear the scrollbar IDs
        $('.scrollbar-period').attr('id', '');

        // add the IDs back
        $('.scrollbar-period').eq(draggedIndex - 1).attr('id', 'scrollbar-start');
        $('.scrollbar-period').eq(draggedIndex + 11).attr('id', 'scrollbar-end');
      }
    }

    if ($(draggedElement).hasClass('period-block-container')) {
      //console.log()

      if (draggedIndex < startIndex) {
        startIndex = draggedIndex;
      } else if (draggedIndex > endIndex) {
        endIndex = draggedIndex;
      }

      selectElements();
    }
  }, 250);
  return false;
});

$('#range-selector').on('mouseover', '.period-block-container', function(e) {
  // hover in the scrollbar too
  $('.scrollbar-period').removeClass('hovered');
  var hoverededIndex = $(this).index();
  $('.scrollbar-period').eq(hoverededIndex).addClass('hovered');

  if (clickedSelector == true) {

    var x = e.pageX - $('#range-selector').offset().left;

    // if the user is not already dragging,
    // and they move the mouse more than 4 pixels from the original point they clicked
    if ((!dragging) && (Math.abs(initialX - x) > 5)) {
      console.log('DRAG START');
      dragging = true;
      var draggedIndex = $(this).index();

      //if ((draggedIndex > endIndex) || (draggedIndex < startIndex)) {
      // set this as the starting and ending of the selection
      startIndex = draggedIndex;
      endIndex = draggedIndex;
      //}
    }
  }
});

$('body').mousemove(function(e) {

  // get x position of mouse
  mouseX = e.pageX;

  // get position and width of range selector
  var rangeSelectorY = $('#range-selector').offset().top;
  var rangeSelectorX = $('#range-selector').offset().left;
  var rangeSelectorWidth = $('#range-selector').width();

  // select the period at the coordinates
  var draggedElement = document.elementFromPoint(mouseX, rangeSelectorY)

  // convert to jquery and get its index
  var draggedIndex = $(draggedElement).index();

  var validDraggingElement = false;

  if (clickedScrollbar == true) {
    var scrollbarY = $('#custom-scrollbar').offset().top;

    // select the scrollbar period at the coordinates
    var scrollbarElement = document.elementFromPoint(mouseX, scrollbarY)

    if ($(scrollbarElement).hasClass('scrollbar-period')) {
      // convert to jquery and get its index
      var scrollbarIndex = $(scrollbarElement).index();
      //console.log(scrollbarIndex);
      scrollbarClicked(scrollbarIndex);
    }
  } else if (dragging) {

    if ($(draggedElement).hasClass('period-block-container')) {
      //console.log()

      if (draggedIndex < startIndex) {
        startIndex = draggedIndex;
      } else if (draggedIndex > endIndex) {
        endIndex = draggedIndex;
      }

      validDraggingElement = true;
      selectElements();
    }
  }
});

$('#custom-scrollbar').on('mousedown', '.scrollbar-period', function() {
  clickedScrollbar = true;
  scrollbarClicked($(this).index());
});

$('#custom-scrollbar').on('mousemove', '.scrollbar-period', function() {
  if (clickedScrollbar == true) {
    scrollbarClicked($(this).index());
  }
});

$(document).mouseup(function(e) {

  if (!dragging && !clickedScrollbar && clickedSelector) {

    // if this is the initial selection
    if ($('.period-block-container.selected').length <= 0) {
      startIndex = clickedPeriodIndex;
      endIndex = clickedPeriodIndex;
    }

    // if the user is clicking in the middle of their selection
    if (((clickedPeriodIndex <= endIndex) && (startIndex <= clickedPeriodIndex))) {
      // set the end of the selection to where the user clicked
      endIndex = clickedPeriodIndex;
    }

    // but if the user clicks outside the selection, select those periods too
    else if (clickedPeriodIndex < startIndex) {
      startIndex = clickedPeriodIndex;
    } else if (clickedPeriodIndex > endIndex) {
      endIndex = clickedPeriodIndex;
    }

    initialX = e.pageX - $('#range-selector').offset().left;

    // clear selections


    // scroll one period if clicked near the edges
    if (initialX > 760) {
      $('#range-selector').animate({
        scrollLeft: $('#range-selector').scrollLeft() + scrollWidth
      }, 0);

      // get the index of the scrollbar start
      // add 1 to it and the end
      var scrollbarStartIndex = $('#scrollbar-start').index();
      var scrollbarEndIndex = scrollbarStartIndex + 12;

      if (scrollbarStartIndex + 13 < 60) {
        scrollbarStartIndex++;
        scrollbarEndIndex++;
      }

      //clear the scrollbar IDs
      $('.scrollbar-period').attr('id', '');

      // add the IDs back
      $('.scrollbar-period').eq(scrollbarStartIndex).attr('id', 'scrollbar-start');
      $('.scrollbar-period').eq(scrollbarEndIndex).attr('id', 'scrollbar-end');

    } else if (initialX < 30) {
      $('#range-selector').animate({
        scrollLeft: $('#range-selector').scrollLeft() - scrollWidth
      }, 0);

      // get the index of the scrollbar start
      // add 1 to it and the end
      var scrollbarStartIndex = $('#scrollbar-start').index();
      var scrollbarEndIndex = scrollbarStartIndex + 12;

      if (scrollbarStartIndex - 1 >= 0) {
        scrollbarStartIndex--;
        scrollbarEndIndex--;
      }

      //clear the scrollbar IDs
      $('.scrollbar-period').attr('id', '');

      // add the IDs back
      $('.scrollbar-period').eq(scrollbarStartIndex).attr('id', 'scrollbar-start');
      $('.scrollbar-period').eq(scrollbarEndIndex).attr('id', 'scrollbar-end');
    }
    
    // select all the periods between the indexes
    selectElements();
  }
  else if (clickedYearSelector) {
    // if this is the initial selection
    if ($('.year-period-block-container.selected').length <= 0) {
      startYearIndex = clickedYearPeriodIndex;
      endYearIndex = clickedYearPeriodIndex;
    }

    // if the user is clicking in the middle of their selection
    if (((clickedYearPeriodIndex <= endYearIndex) && (startYearIndex <= clickedYearPeriodIndex))) {
      // set the end of the selection to where the user clicked
      endYearIndex = clickedYearPeriodIndex;
    }

    // but if the user clicks outside the selection, select those periods too
    else if (clickedYearPeriodIndex < startYearIndex) {
      startYearIndex = clickedYearPeriodIndex;
    } else if (clickedYearPeriodIndex > endYearIndex) {
      endYearIndex = clickedYearPeriodIndex;
    }
    
    selectYearElements();
  }
  
  clickedYearSelector = false;
  dragging = false;
  clickedScrollbar = false;
  clickedSelector = false;

  clearInterval(timeout);
  
  console.log(startIndex + ', ' + endIndex);
});

$('#range-selector').mouseleave(function() {
  $('.scrollbar-period').removeClass('hovered');
});

// when clear "x" is pressed
$('#selected-range').on('mousedown', '.fa-times', function(e) {
  // clear the selection or whatever
  startIndex = 0;
  endIndex = 0;
  startYearIndex = 0;
  endYearIndex = 0;
  // clear selections
  $('.period-block-container').removeClass('selected first-selected last-selected');
  $('.scrollbar-period').removeClass('selected first-selected last-selected');

  $('#selected-range').addClass('not-set');
  $('#selected-range').html("Not set <i class=\"fa fa-times\"></i></div>");
  
  // clear year selections
  $('.year-period-block-container').removeClass('selected first-selected last-selected');
  
  $('#multiple-rows-checkbox-label').fadeOut(200);
});

// radio buttons
$('#select-year-radio').click(function(){
  $('#custom-scrollbar').hide();
  $('#range-selector').hide();
  $('#year-range-selector').show();
  
  if (startYearIndex == endYearIndex) {
    $('#multiple-rows-checkbox-label').fadeOut(200);
  } else {
    $('#multiple-rows-checkbox-label').fadeIn(200);
  }
});

$('#select-month-radio').click(function(){
  $('#year-range-selector').hide();
  $('#custom-scrollbar').show();
  $('#range-selector').show();
  
  if (startIndex == endIndex) {
    $('#multiple-rows-checkbox-label').fadeOut(200);
  } else {
    $('#multiple-rows-checkbox-label').fadeIn(200);
  }
});

var scrollbarClicked = function(clickedIndex) {
  var startScrollbarIndex, endScrollbarIndex;
  var set = false;

  if ((clickedIndex - 7) < 0) {
    startScrollbarIndex = 0;
    endScrollbarIndex = 12;
    set = true;
  } else {
    startScrollbarIndex = clickedIndex - 6;
    endScrollbarIndex = clickedIndex + 6;
  }

  if (set == false) {
    if ((clickedIndex + 6) >= 60) {
      startScrollbarIndex = 47;
      endScrollbarIndex = 59;
    } else {
      startScrollbarIndex = clickedIndex - 6;
      endScrollbarIndex = clickedIndex + 6;
    }
  }

  // clear all scrollbar period IDs
  $('.scrollbar-period').attr('id', '');

  $('.scrollbar-period').eq(startScrollbarIndex).attr('id', 'scrollbar-start');
  $('.scrollbar-period').eq(endScrollbarIndex).attr('id', 'scrollbar-end');

  $('#range-selector').animate({
    scrollLeft: startScrollbarIndex * scrollWidth
  }, 0);
}

// variable for selecting all the periods between the start and end indexes
var selectElements = function() {
  $('.period-block-container').removeClass('selected first-selected last-selected');
  $('.scrollbar-period').removeClass('selected');
  
  for (var i = startIndex; i <= endIndex; i++) {
    $('.scrollbar-period').eq(i).addClass('selected');
    $('.period-block-container').eq(i).addClass('selected');
    
    // special styles for first and last selected periods
    if (i == startIndex) {
      $('.period-block-container').eq(i).addClass('first-selected');
    }
    if (i == endIndex) {
      $('.period-block-container').eq(i).addClass('last-selected');
    }
  }

  if (startIndex == endIndex) {
    $('#multiple-rows-checkbox-label').fadeOut(200);
  } else {
    $('#multiple-rows-checkbox-label').fadeIn(200);
  }

  // get selected string......
  var startText = $('.period-block-container').eq(startIndex).children('.month').text();
  var nearestStartYear = '';

  // if the current selected has year text, use that
  if ($('.period-block-container').eq(startIndex).find('.year').length != 0) {
    nearestStartYear = $('.period-block-container').eq(startIndex).children('.year').text();
  }
  // otherwise use the closest previous year text
  else {
    nearestStartYear = $('.period-block-container').eq(startIndex).prevAll(".period-block-container.show-year:first").text();
  }

  // trim the month out with regex
  nearestStartYear = nearestStartYear.replace(/\D+/g, '');
  startText = startText + ' ' + nearestStartYear;
  //console.log(startText);

  var endText = $('.period-block-container').eq(endIndex).children('.month').text();
  var nearestEndYear = '';

  if ($('.period-block-container').eq(endIndex).find('.year').length != 0) {
    nearestEndYear = $('.period-block-container').eq(endIndex).children('.year').text();
  } else {
    nearestEndYear = $('.period-block-container').eq(endIndex).prevAll(".period-block-container.show-year:first").text();
  }

  nearestEndYear = nearestEndYear.replace(/\D+/g, '');
  endText = endText + ' ' + nearestEndYear;
  //console.log(endText);

  $('#selected-range').removeClass('not-set');
  
  // change text accordingly
  if (startText != endText) {
    $('#selected-range').html(startText + ' - ' + endText + "<i class=\"fa fa-times\"></i>");
  } else {
    $('#selected-range').html(startText + "<i class=\"fa fa-times\"></i>");
  }

  // use the year from the text to select on the year range selector
  $('.year-period-block-container').removeClass('selected first-selected last-selected');
  
  startYearIndex = $('.year-period-block-container:contains(\"'+nearestStartYear+'\")').index();
  endYearIndex = $('.year-period-block-container:contains(\"'+nearestEndYear+'\")').index();
  
  for (var i = startYearIndex; i <= endYearIndex; i++) {
    $('.year-period-block-container').eq(i).addClass('selected');
    // special styles for first and last selected periods
    if (i == startYearIndex) {
      $('.year-period-block-container').eq(i).addClass('first-selected');
    }
    if (i == endYearIndex) {
      $('.year-period-block-container').eq(i).addClass('last-selected');
    }
  }
}

var selectYearElements = function(){
  $('.year-period-block-container').removeClass('selected first-selected last-selected');
  $('.period-block-container').removeClass('selected first-selected last-selected');
  $('.scrollbar-period').removeClass('selected');

  for (var i = startYearIndex; i <= endYearIndex; i++) {
    $('.year-period-block-container').eq(i).addClass('selected');
    // special styles for first and last selected periods
    if (i == startYearIndex) {
      $('.year-period-block-container').eq(i).addClass('first-selected');
    }
    if (i == endYearIndex) {
      $('.year-period-block-container').eq(i).addClass('last-selected');
    }
  }

  var startYear = $('.year-period-block-container').eq(startYearIndex).text();
  var endYear = $('.year-period-block-container').eq(endYearIndex).text();
  
  $('#selected-range').removeClass('not-set');
  $('#selected-range').html('Jan ' + startYear + ' - Dec ' + endYear + "<i class=\"fa fa-times\"></i>");
  
  // find element on month selector with matching years
  startIndex = ($('.period-block-container').has('.year:contains("'+startYear+'")').index());
  endIndex = ($('.period-block-container').has('.year:contains("'+endYear+'")').index());
  
  if (endYear == 2015) {
    endIndex = 4; // magic numberz
  }
  else if (endIndex + 11 < 60) {
    endIndex += 11;
  }
  else {
    var numToAdd = (endIndex+13) - 60;
    endIndex += numToAdd;
  }

  for (var i = startIndex; i <= endIndex; i++) {
    $('.scrollbar-period').eq(i).addClass('selected');
    $('.period-block-container').eq(i).addClass('selected');

    // special styles for first and last selected periods
    if (i == startIndex) {
      $('.period-block-container').eq(i).addClass('first-selected');
    }
    if (i == endIndex) {
      $('.period-block-container').eq(i).addClass('last-selected');
    }
  }

  // hide or show checkbox
  if (startYearIndex == endYearIndex) {
    $('#multiple-rows-checkbox-label').fadeOut(200);
  } else {
    $('#multiple-rows-checkbox-label').fadeIn(200);
  }
}
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console