How to use @fullcalendar/core - 10 common examples

it('converts numeric values correctly', function() {
      let calendar = new Calendar(document.createElement('div'), {
        plugins: PLUGINS,
        defaultTimedEventDuration: '05:00',
        defaultAllDayEventDuration: { days: 3 }
      })

      // hacky way to have a duration parsed
      let timedDuration = toDuration(calendar.defaultTimedEventDuration, calendar)
      let allDayDuration = toDuration(calendar.defaultAllDayEventDuration, calendar)

      expect(timedDuration.as('hours')).toBe(5)
      expect(allDayDuration.as('days')).toBe(3)
    })

it('transfers locale correctly', function() {
      let calendar = new Calendar(document.createElement('div'), {
        plugins: PLUGINS,
        defaultTimedEventDuration: '05:00',
        locale: esLocale
      })

      // hacky way to have a duration parsed
      let timedDuration = toDuration(calendar.defaultTimedEventDuration, calendar)

      expect(timedDuration.locale).toBe('es')
    })

resizeDate = resizeDateMeta.marker
    } else {
      resizeDateHasTime = true
    }

    eventEl = eventClassName ? $(`.${eventClassName}:first`) : getLastEventEl()
    dragEl = getEventElResizerEl(eventEl)

    if (resizeDateHasTime) {
      lastDayEl = getTimeGridDayEls(resizeDate)
      lastSlatIndex = resizeDate.getUTCHours() * 2 + (resizeDate.getUTCMinutes() / 30) // assumes slotDuration:'30:00'
      lastSlatEl = getSlotElByIndex(lastSlatIndex - 1)
      expect(lastSlatEl.length).toBe(1)
      dy = lastSlatEl.offset().top + lastSlatEl.outerHeight() - (eventEl.offset().top + eventEl.outerHeight())
    } else {
      lastDayEl = getDayEl(addDays(resizeDate, -1))
      dy = lastDayEl.offset().top - eventEl.offset().top
    }

    expect(lastDayEl.length).toBe(1)
    expect(eventEl.length).toBe(1)
    expect(dragEl.length).toBe(1)
    dx = lastDayEl.offset().left + lastDayEl.outerWidth() - 2 - (eventEl.offset().left + eventEl.outerWidth())

    dragEl.simulate('mouseover') // resizer only shows up on mouseover
    dragEl.simulate('drag', {
      dx: dx,
      dy: dy,
      onBeforeRelease: function() {
        allowed = !$('body').hasClass('fc-not-allowed')
      },
      onRelease: function() {

export function getTimeGridLine(date) { // not in Scheduler
  date = ensureDate(date)

  var day = startOfDay(date)
  var timeMs = date.valueOf() - day.valueOf()
  var top = getTimeGridTop(timeMs)
  var dayEls = getTimeGridDayEls(date)
  var dayRect

  expect(dayEls.length).toBe(1)
  dayRect = getBoundingRect(dayEls.eq(0))

  return {
    left: dayRect.left,
    right: dayRect.right,
    top: top,
    bottom: top
  }
}

queryHit(positionLeft: number, positionTop: number, elWidth: number, elHeight: number): Hit | null {
    let date = (this.props as any).date // HACK

    if (positionLeft < elWidth && positionTop < elHeight) {
      return {
        component: this,
        dateSpan: {
          allDay: true,
          range: { start: date, end: addDays(date, 1) }
        },
        dayEl: this.el,
        rect: {
          left: 0,
          top: 0,
          right: elWidth,
          bottom: elHeight
        },
        layer: 1
      }
    }
  }

function ListView(context, viewSpec, dateProfileGenerator, parentEl) {
        var _this = _super.call(this, context, viewSpec, dateProfileGenerator, parentEl) || this;
        _this.computeDateVars = memoize(computeDateVars);
        _this.eventStoreToSegs = memoize(_this._eventStoreToSegs);
        var eventRenderer = _this.eventRenderer = new ListEventRenderer(_this);
        _this.renderContent = memoizeRendering(eventRenderer.renderSegs.bind(eventRenderer), eventRenderer.unrender.bind(eventRenderer));
        _this.el.classList.add('fc-list-view');
        var listViewClassNames = (_this.theme.getClass('listView') || '').split(' '); // wish we didn't have to do this
        for (var _i = 0, listViewClassNames_1 = listViewClassNames; _i < listViewClassNames_1.length; _i++) {
            var listViewClassName = listViewClassNames_1[_i];
            if (listViewClassName) { // in case input was empty string
                _this.el.classList.add(listViewClassName);
            }
        }
        _this.scroller = new ScrollComponent('hidden', // overflow x
        'auto' // overflow y
        );
        _this.el.appendChild(_this.scroller.el);
        _this.contentEl = _this.scroller.el; // shortcut
        context.calendar.registerInteractiveComponent(_this, {

function ListView(context, viewSpec, dateProfileGenerator, parentEl) {
        var _this = _super.call(this, context, viewSpec, dateProfileGenerator, parentEl) || this;
        _this.computeDateVars = memoize(computeDateVars);
        _this.eventStoreToSegs = memoize(_this._eventStoreToSegs);
        var eventRenderer = _this.eventRenderer = new ListEventRenderer(_this);
        _this.renderContent = memoizeRendering(eventRenderer.renderSegs.bind(eventRenderer), eventRenderer.unrender.bind(eventRenderer));
        _this.el.classList.add('fc-list-view');
        var listViewClassNames = (_this.theme.getClass('listView') || '').split(' '); // wish we didn't have to do this
        for (var _i = 0, listViewClassNames_1 = listViewClassNames; _i < listViewClassNames_1.length; _i++) {
            var listViewClassName = listViewClassNames_1[_i];
            if (listViewClassName) { // in case input was empty string
                _this.el.classList.add(listViewClassName);
            }
        }
        _this.scroller = new ScrollComponent('hidden', // overflow x
        'auto' // overflow y
        );
        _this.el.appendChild(_this.scroller.el);
        _this.contentEl = _this.scroller.el; // shortcut

/* An abstract class for all timegrid-related views. Displays one more columns with time slots running vertically.
----------------------------------------------------------------------------------------------------------------------*/
// Is a manager for the TimeGrid subcomponent and possibly the DayGrid subcomponent (if allDaySlot is on).
// Responsible for managing width/height.

export default abstract class AbstractTimeGridView extends View {

  timeGrid: TimeGrid // the main time-grid subcomponent of this view
  dayGrid: DayGrid // the "all-day" subcomponent. if all-day is turned off, this will be null

  scroller: ScrollComponent
  axisWidth: any // the width of the time axis running down the side

  protected splitter = new AllDaySplitter()
  private renderSkeleton = memoizeRendering(this._renderSkeleton, this._unrenderSkeleton)


  render(props: ViewProps, context: ComponentContext) {
    super.render(props, context)

    this.renderSkeleton(context)
  }


  destroy() {
    super.destroy()

    this.renderSkeleton.unrender()
  }

function DayGrid(context, el, renderProps) {
        var _this = _super.call(this, context, el) || this;
        _this.bottomCoordPadding = 0; // hack for extending the hit area for the last row of the coordinate grid
        _this.isCellSizesDirty = false;
        var eventRenderer = _this.eventRenderer = new DayGridEventRenderer(_this);
        var fillRenderer = _this.fillRenderer = new DayGridFillRenderer(_this);
        _this.mirrorRenderer = new DayGridMirrorRenderer(_this);
        var renderCells = _this.renderCells = memoizeRendering(_this._renderCells, _this._unrenderCells);
        _this.renderBusinessHours = memoizeRendering(fillRenderer.renderSegs.bind(fillRenderer, 'businessHours'), fillRenderer.unrender.bind(fillRenderer, 'businessHours'), [renderCells]);
        _this.renderDateSelection = memoizeRendering(fillRenderer.renderSegs.bind(fillRenderer, 'highlight'), fillRenderer.unrender.bind(fillRenderer, 'highlight'), [renderCells]);
        _this.renderBgEvents = memoizeRendering(fillRenderer.renderSegs.bind(fillRenderer, 'bgEvent'), fillRenderer.unrender.bind(fillRenderer, 'bgEvent'), [renderCells]);
        _this.renderFgEvents = memoizeRendering(eventRenderer.renderSegs.bind(eventRenderer), eventRenderer.unrender.bind(eventRenderer), [renderCells]);
        _this.renderEventSelection = memoizeRendering(eventRenderer.selectByInstanceId.bind(eventRenderer), eventRenderer.unselectByInstanceId.bind(eventRenderer), [_this.renderFgEvents]);
        _this.renderEventDrag = memoizeRendering(_this._renderEventDrag, _this._unrenderEventDrag, [renderCells]);
        _this.renderEventResize = memoizeRendering(_this._renderEventResize, _this._unrenderEventResize, [renderCells]);
        _this.renderProps = renderProps;
        return _this;
    }
    DayGrid.prototype.render = function (props) {

isColSizesDirty: boolean = false

  rootBgContainerEl: HTMLElement
  bottomRuleEl: HTMLElement // hidden by default
  contentSkeletonEl: HTMLElement
  colContainerEls: HTMLElement[] // containers for each column

  // inner-containers for each column where different types of segs live
  fgContainerEls: HTMLElement[]
  bgContainerEls: HTMLElement[]
  mirrorContainerEls: HTMLElement[]
  highlightContainerEls: HTMLElement[]
  businessContainerEls: HTMLElement[]

  private processOptions = memoize(this._processOptions)
  private renderSkeleton = memoizeRendering(this._renderSkeleton)
  private renderSlats = memoizeRendering(this._renderSlats, null, [ this.renderSkeleton ])
  private renderColumns = memoizeRendering(this._renderColumns, this._unrenderColumns, [ this.renderSkeleton ])
  private renderBusinessHours: MemoizedRendering<[ComponentContext, TimeGridSeg[]]>
  private renderDateSelection: MemoizedRendering<[TimeGridSeg[]]>
  private renderBgEvents: MemoizedRendering<[ComponentContext, TimeGridSeg[]]>
  private renderFgEvents: MemoizedRendering<[ComponentContext, TimeGridSeg[]]>
  private renderEventSelection: MemoizedRendering<[string]>
  private renderEventDrag: MemoizedRendering<[EventSegUiInteractionState]>
  private renderEventResize: MemoizedRendering<[EventSegUiInteractionState]>


  constructor(el: HTMLElement, renderProps: RenderProps) {
    super(el)

    this.renderProps = renderProps