FullCalendar Sticky First Column & Header

index.js

this.$el = $(this.element.nativeElement);

const scrollableBody = this.element.querySelector('.fc-content-skeleton');
const scrollableHeader = this.element.querySelector('.fc-head-container > .fc-row');
const scrollableBg = this.element.querySelector('.fc-bg');
scrollableBody.addEventListener('scroll', () => {
  scrollableHeader.scrollTo(scrollableBody.scrollLeft, 0);
  scrollableBg.scrollTo(scrollableBody.scrollLeft, 0);
});

styles.css

.fullcalendar {
  display: inline-block;
  height: 100%;
}

.fc-time-grid .fc-slats td {
  height: 7em;
}

.fc-head-container,
.fc-head-container tr {
  height: 20px;
}

// Work for fixed column
.fc-head .fc-head-container > .fc-row {
  border-left-width: 1px;
  border-right-width: 0 !important;
  position: absolute;
  left: 64px;
  width: calc(100% - 64px - 14px);
  overflow-x: hidden;

  th:first-child {
    display: none;
  }
}

.fc-head .fc-head-container > .fc-row > table {
  width: 1536px - 64px;
}

.fc-bg {
  overflow-x: hidden;
}

.fc-bg > table {
  width: 1536px;
}

.fc-time-grid .fc-content-skeleton {
  overflow-x: scroll;
  height: 100%;
  left: 64px;
}

.fc-time-grid .fc-content-skeleton > table {
  width: 1536px - 64px;

  td:first-child {
    display: none;
  }
}

.fc-slats td:first-child {
  background-color: white;
}