docs: function (event, period) {
        var $this = this;
        $this.closeOptions();
  
        // popup position
        var maxHeight = 850;
        var top = period.offset().top - $(this.element).offset().top + $(this.element).scrollTop() - 20;
        if (top < 20) {
          top = 20;
        }
        if (top > maxHeight) {
          top = maxHeight;
        }
  
        var maxWidth = $(this.element).width() - 290;
        var left = period.offset().left - $(this.element).offset().left + period.width() + 20;
        if (left > maxWidth) {
          left = left - 330 - period.width();
        }
  
        // time
        var position = Math.round(period.position().top / this.periodPosition);
        var height = Math.round(period.height() / this.periodPosition);
        var time = '<div class="jqs-options-time">' + this.periodInit(position, position + height) + '</div>';
  
        // title
        var title = $('jqs-period-title', period).text();
        var titleInput = '<div class="jqs-options-title-container">' +
          '<input type="text" placeholder="' + this.settings.periodTitlePlaceholder +
          '" value="' + title + '" class="jqs-options-title"></div>';
  
        // color
        var colorInput = '';
        if (this.settings.periodColors && this.settings.periodColors.length > 0) {
          var colorText = (this.settings.hour === 12) ? '12pm' : '00:00';
  
          colorInput = '<div class="jqs-options-color-container">';
          $.each(this.settings.periodColors, function (index, color) {
            colorInput += '<button class="jqs-options-color" ' +
              'style="background-color: ' + color[0] + '; border-color: ' + color[1] + '; color:' + color[2] + '">' +
              colorText + '</button>';
          });
          colorInput += '</div>';
        }
  
        // button
        var remove = '<div class="jqs-options-remove">' + this.settings.periodRemoveButton + '</div>';
        var duplicate = '<div class="jqs-options-duplicate">' + this.settings.periodDuplicateButton + '</div>';
        var close = '<div class="jqs-options-close"></div>';
        $('<div class="jqs-options">' + time + titleInput + colorInput + remove + duplicate + close + '</div>').css({
          top: top,
          left: left
        }).appendTo(this.element);
  
        $('.jqs-options-color', this.element).click(function () {
          $('.jqs-period-container', period).css({
            'background-color': $(this).css('background-color'),
            'border-color': $(this).css('border-top-color'),
            'color': $(this).css('color')
          });
        });
  
        $('.jqs-options-title', this.element).keyup(function () {
          $('.jqs-period-title', period).text($(this).val());
          period.attr('title', $(this).val());
        });
  
        $('.jqs-options-remove', this.element).click(function () {
          $this.remove(period);
        });
  
        $('.jqs-options-duplicate', this.element).click(function () {
          $this.duplicate(period);
        });
  
        $('.jqs-options-close', this.element).click(function () {
          $this.closeOptions();
        });
      }