<div id="main"></div>

​

asd

    .react-calendar-timeline .rct-item.item-weekend {

      background: #21F32C;

      border-color: #29B31A;

    }

​

GROUP_COUNT = 30

    ITEM_COUNT = 1000

    DAYS_IN_PAST = 30

​

    var groups = []

    for (var i = 0; i < GROUP_COUNT; i++) {

      groups.push({

        id: (i+1)+'',

        title: faker.name.firstName()

      })

    };

​

    var items = []

    for (var i = 0; i < ITEM_COUNT; i++) {

      var startDate = faker.date.recent(DAYS_IN_PAST).valueOf() + (DAYS_IN_PAST * 0.3) * 86400 * 1000;

      var startValue = moment(startDate).valueOf();

      var endValue = moment(startDate + faker.random.number({min: 2, max: 20})*15*60*1000).valueOf();

      items.push({

        id: i+'',

        group: faker.random.number({min: 1, max: groups.length})+'',

        title: faker.hacker.phrase(),

        start: startValue,

        end: endValue,

        canMove: startValue > new Date().getTime(),

        canResize: endValue > new Date().getTime(),

        className: (moment(startDate).day() === 6 || moment(startDate).day() === 0) ? 'item-weekend' : ''

      })

    }

​

    items = items.sort(function(a, b) { return b - a; })

​

    var minTime = moment().add(-6, 'months').valueOf()

    var maxTime = moment().add(6, 'months').valueOf()

​

    var props = {

      groups: groups,

      items: items,

      fixedHeader: 'fixed',

      canMove: true, // defaults

      canResize: true,

      itemsSorted: true,

      itemTouchSendsClick: false,

​

      defaultTimeStart: moment().startOf('day').toDate(),

      defaultTimeEnd: moment().startOf('day').add(1, 'day').toDate(),

​

      keys: {

        groupIdKey: 'id',

        groupTitleKey: 'title',

        itemIdKey: 'id',

        itemTitleKey: 'title',

        itemGroupKey: 'group',

        itemTimeStartKey: 'start',

        itemTimeEndKey: 'end'

      },

​

      itemClick: function(item) {

        console.log("Clicked: " + item);

      },

​

      moveResizeValidator: function(action, item, time) {

        if (time < new Date().getTime()) {

          var newTime = Math.ceil(new Date().getTime() / (15*60*1000)) * (15*60*1000);

          return newTime;

        }

​

        return time

      },

​

      // this limits the timeline to -6 months ... +6 months

      onTimeChange: function (visibleTimeStart, visibleTimeEnd) {

        if (visibleTimeStart < minTime && visibleTimeEnd > maxTime) {

          this.updateScrollCanvas(minTime, maxTime)

        } else if (visibleTimeStart < minTime) {

          this.updateScrollCanvas(minTime, minTime + (visibleTimeEnd - visibleTimeStart))

        } else if (visibleTimeEnd > maxTime) {

          this.updateScrollCanvas(maxTime - (visibleTimeEnd - visibleTimeStart), maxTime)

        } else {

          this.updateScrollCanvas(visibleTimeStart, visibleTimeEnd)

        }

      }

    }

​

    var filter = React.createElement("div", {}, "The filter");

​

    /* jshint undef:false */

    ReactDOM.render(React.createElement(ReactCalendarTimeline['default'], props, filter), document.getElementById('main'));