DynamicList+Height.js

import React, { Component } from 'react';
import {List, CellMeasurer} from 'react-virtualized';
import moment from 'moment';

const days = 3000;
const today = days / 2;
const daysToShow = 3;
const height = 180;

const rowRenderer = ({
  key,         // Unique key within array of rows
  index,    
  style,
}) => {
  const day = moment().add((index-today), 'days');
  return (
    <div
      key={key}
      style={{
        ...style,
        height: 80 + (Math.random() * 100),
      }}
    >
      {day.format('MMM-Do-YY')}
    </div>
  );
};

class App extends Component {
  render() {
    return (
      <div>
        <CellMeasurer
          cellRenderer={
            ({ rowIndex, ...rest }) => rowRenderer({ index: rowIndex, ...rest })
          }
          columnCount={1}
          rowCount={days}
          width={800}
        >
          {({ getRowHeight }) => (
                  <List
                    width={800}
                    height={daysToShow * height}
                    rowCount={days}
                    rowHeight={getRowHeight}
                    rowRenderer={rowRenderer}
                    overscanRowCount={5}
                  />
          )}
        </CellMeasurer>
      </div>
    );
  }
}

export default App;

DynamicList.js

import React, { Component } from 'react';
import {List} from 'react-virtualized';
import moment from 'moment';

const days = 3000;
const today = days / 2;
const daysToShow = 3;
const height = 180;

const rowRenderer = ({
  key,         // Unique key within array of rows
  index,    
  style,
}) => {
  const day = moment().add((index-today), 'days');
  return (
    <div
      key={key}
      style={style}
    >
      {day.format('MMM-Do-YY')}
    </div>
  );
};

class App extends Component {
  render() {
    return (
      <div>
        <List
          width={800}
          height={daysToShow * height}
          rowCount={days}
          rowHeight={height}
          estimatedRowSize={height}
          rowRenderer={rowRenderer}
          scrollTop={(days * height) / 2}
          overscanRowCount={5}
        />
      </div>
    );
  }
}

export default App;

Scroll+Backintime.js

import React, { Component } from 'react';
import {List, CellMeasurer} from 'react-virtualized';
import moment from 'moment';

const days = 3000;
const today = 0;
const daysToShow = 3;
const height = 180;

const rowRenderer = ({
  key,         // Unique key within array of rows
  index,    
  style,
}) => {
  const day = moment().add((index), 'days');
  return (
    <div
      key={key}
      style={{
        ...style,
        height: 80 + (Math.random() * 100),
      }}
    >
      {day.format('MMM-Do-YY')}
    </div>
  );
};

class App extends Component {
  handleScroll(e) {
    if (e.scrollTop === 0) {
      // Do something to add previous days..
    }
  }
  render() {
    return (
      <div>
        <CellMeasurer
          cellRenderer={
            ({ rowIndex, ...rest }) => rowRenderer({ index: rowIndex, ...rest })
          }
          columnCount={1}
          rowCount={days}
          width={800}
        >
          {({ getRowHeight }) => (
                  <List
                    width={800}
                    height={daysToShow * height}
                    rowCount={days}
                    rowHeight={getRowHeight}
                    rowRenderer={rowRenderer}
                    overscanRowCount={5}
                    onScroll={this.handleScroll}
                  />
          )}
        </CellMeasurer>
      </div>
    );
  }
}

export default App;