How to use the @fullcalendar/daygrid.DayGrid function in @fullcalendar/daygrid

this.el.querySelector('.fc-body > tr > td').appendChild(timeGridWrapEl)
    timeGridWrapEl.classList.add('fc-time-grid-container')
    let timeGridEl = createElement('div', { className: 'fc-time-grid' })
    timeGridWrapEl.appendChild(timeGridEl)

    this.timeGrid = new TimeGrid(
      timeGridEl,
      {
        renderBgIntroHtml: this.renderTimeGridBgIntroHtml,
        renderIntroHtml: this.renderTimeGridIntroHtml
      }
    )

    if (context.options.allDaySlot) { // should we display the "all-day" area?

      this.dayGrid = new DayGrid( // the all-day subcomponent of this view
        this.el.querySelector('.fc-day-grid'),
        {
          renderNumberIntroHtml: this.renderDayGridIntroHtml, // don't want numbers
          renderBgIntroHtml: this.renderDayGridBgIntroHtml,
          renderIntroHtml: this.renderDayGridIntroHtml,
          colWeekNumbersVisible: false,
          cellWeekNumbersVisible: false
        }
      )

      // have the day-grid extend it's coordinate area over the <hr> dividing the two grids
      let dividerEl = this.el.querySelector('.fc-divider') as HTMLElement
      this.dayGrid.bottomCoordPadding = dividerEl.getBoundingClientRect().height
    }
  }

_this.el.classList.add('fc-timeGrid-view');
        _this.el.innerHTML = _this.renderSkeletonHtml();
        _this.scroller = new ScrollComponent('hidden', // overflow x
        'auto' // overflow y
        );
        var timeGridWrapEl = _this.scroller.el;
        _this.el.querySelector('.fc-body > tr > td').appendChild(timeGridWrapEl);
        timeGridWrapEl.classList.add('fc-time-grid-container');
        var timeGridEl = createElement('div', { className: 'fc-time-grid' });
        timeGridWrapEl.appendChild(timeGridEl);
        _this.timeGrid = new TimeGrid(_this.context, timeGridEl, {
            renderBgIntroHtml: _this.renderTimeGridBgIntroHtml,
            renderIntroHtml: _this.renderTimeGridIntroHtml
        });
        if (_this.opt('allDaySlot')) { // should we display the "all-day" area?
            _this.dayGrid = new DayGrid(// the all-day subcomponent of this view
            _this.context, _this.el.querySelector('.fc-day-grid'), {
                renderNumberIntroHtml: _this.renderDayGridIntroHtml,
                renderBgIntroHtml: _this.renderDayGridBgIntroHtml,
                renderIntroHtml: _this.renderDayGridIntroHtml,
                colWeekNumbersVisible: false,
                cellWeekNumbersVisible: false
            });
            // have the day-grid extend it's coordinate area over the <hr> dividing the two grids
            var dividerEl = _this.el.querySelector('.fc-divider');
            _this.dayGrid.bottomCoordPadding = dividerEl.getBoundingClientRect().height;
        }
        return _this;
    }
    TimeGridView.prototype.destroy = function () {