docs: function (parent, position, height, options) {
  
        if (height <= 0 || position >= this.periodHeight) {
          console.error('Invalid period');
  
          return false;
        }
  
        options = $.extend({}, this.periodOptions, options);
  
        // new period
        var periodRemove = '';
        var periodDuplicate = '';
        if (this.settings.mode === 'edit') {
          periodRemove = '<div class="jqs-period-remove" title="' + this.settings.periodRemoveButton + '"></div>';
          periodDuplicate = '<div class="jqs-period-duplicate" title="' + this.settings.periodDuplicateButton +
            '"></div>';
        }
  
        var periodTitle = '<div class="jqs-period-title">' + options.title + '</div>';
        var periodTime = '<div class="jqs-period-time">' + this.periodInit(position, position + height) + '</div>';
        var period = $('<div class="jqs-period">' +
          '<div class="jqs-period-container">' + periodTime + periodTitle + periodRemove + periodDuplicate + '</div>' +
          '</div>').css({
          'top': position * this.periodPosition,
          'height': height * this.periodPosition
        }).attr('id', this.uniqId()).attr('title', options.title).appendTo(parent);
  
        $('.jqs-period-container', period).css({
          'background-color': options.backgroundColor,
          'border-color': options.borderColor,
          'color': options.textColor
        });
  
        // period validation
        if (!this.isValid(period)) {
          console.error('Invalid period', this.periodInit(position, position + height));
  
          $(period).remove();
  
          return false;
        }
  
        // text format
        this.periodText(period);
  
        // period events
        if (this.settings.mode === 'edit') {
          var $this = this;
  
          period.draggable({
            grid: [0, this.periodPosition],
            containment: 'parent',
            drag: function (event, ui) {
              $('.jqs-period-time', ui.helper).text($this.periodDrag(ui));
              $this.closeOptions();
            },
            stop: function (event, ui) {
              if (!$this.isValid($(ui.helper))) {
                console.error('Invalid position');
  
                $(ui.helper).css('top', Math.round(ui.originalPosition.top));
              }
            }
          }).resizable({
            grid: [0, this.periodPosition],
            containment: 'parent',
            handles: 'n, s',
            resize: function (event, ui) {
              $('.jqs-period-time', ui.helper).text($this.periodResize(ui));
  
              $this.periodText(period);
              $this.closeOptions();
            },
            stop: function (event, ui) {
              if (!$this.isValid($(ui.helper))) {
                console.error('Invalid position');
  
                $(ui.helper).css({
                  'height': Math.round(ui.originalSize.height),
                  'top': Math.round(ui.originalPosition.top)
                });
              }
            }
          });
  
          if (this.settings.periodOptions) {
            period.click(function (event) {
              if (
                !$(event.target).hasClass('jqs-period-remove') ||
                !$(event.target).hasClass('jqs-period-duplicate')
              ) {
                $this.settings.onClickPeriod.call(this, event, period, $this.element);
                $this.openOptions(event, period);
              }
            });
          }
        }
  
        this.settings.onAddPeriod.call(this, period, this.element);
  
        return true;
      }