How to use @fullcalendar/daygrid - 8 common examples

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 () {

it('can implicitly target an old-school View subclass', function() {

    function SuperDayGridView() { DayGridView.apply(this, arguments) }
    SuperDayGridView.prototype = Object.create(DayGridView.prototype)

    initCalendar({
      plugins: [
        DayGridPlugin,
        createPlugin({
          views: {
            superBasic: SuperDayGridView
          }
        })
      ],
      views: {
        dayGrid: {
          titleFormat: function() { return 'special!!!' }
        }
      }
    })

    function SuperDayGridView() { DayGridView.apply(this, arguments) }
    SuperDayGridView.prototype = Object.create(DayGridView.prototype)

TimeGrid.prototype._renderColumns = function (cells, dateProfile) {
        var _a = this, theme = _a.theme, dateEnv = _a.dateEnv, view = _a.view;
        var bgRow = new DayBgRow(this.context);
        this.rootBgContainerEl.innerHTML =
            '' +
                bgRow.renderHtml({
                    cells: cells,
                    dateProfile: dateProfile,
                    renderIntroHtml: this.renderProps.renderBgIntroHtml
                }) +
                '<table class="' + theme.getClass('tableGrid') + '"></table>';
        this.colEls = findElements(this.el, '.fc-day, .fc-disabled-day');
        for (var col = 0; col &lt; this.colCnt; col++) {
            this.publiclyTrigger('dayRender', [
                {
                    date: dateEnv.toDate(cells[col].date),
                    el: this.colEls[col],
                    view: view
                }

_renderColumns(cells: TimeGridCell[], dateProfile: DateProfile) {
    let { calendar, view, isRtl, theme, dateEnv } = this.context

    let bgRow = new DayBgRow(this.context)
    this.rootBgContainerEl.innerHTML =
      '' +
        bgRow.renderHtml({
          cells,
          dateProfile,
          renderIntroHtml: this.renderProps.renderBgIntroHtml
        }) +
      '<table class="' + theme.getClass('tableGrid') + '"></table>'

    this.colEls = findElements(this.el, '.fc-day, .fc-disabled-day')

    for (let col = 0; col &lt; this.colCnt; col++) {
      calendar.publiclyTrigger('dayRender', [
        {
          date: dateEnv.toDate(cells[col].date),
          el: this.colEls[col],

_renderSkeleton(context: ComponentContext) {
    super._renderSkeleton(context)

    if (context.options.columnHeader) {
      this.header = new DayHeader(
        this.el.querySelector('.fc-head-container')
      )
    }

    this.simpleTimeGrid = new SimpleTimeGrid(this.timeGrid)

    if (this.dayGrid) {
      this.simpleDayGrid = new SimpleDayGrid(this.dayGrid)
    }
  }

function TimeGridView(_context, viewSpec, dateProfileGenerator, parentEl) {
        var _this = _super.call(this, _context, viewSpec, dateProfileGenerator, parentEl) || this;
        _this.buildDayTable = memoize(buildDayTable);
        if (_this.opt('columnHeader')) {
            _this.header = new DayHeader(_this.context, _this.el.querySelector('.fc-head-container'));
        }
        _this.simpleTimeGrid = new SimpleTimeGrid(_this.context, _this.timeGrid);
        if (_this.dayGrid) {
            _this.simpleDayGrid = new SimpleDayGrid(_this.context, _this.dayGrid);
        }
        return _this;
    }
    TimeGridView.prototype.destroy = function () {