Стек: React, Redux, webpack, es6

Написать компонент, который будет рисовать недельный цикл (календарь на неделю). На вход принимаем json вида :

{ "mo": [ { "bt": 240, "et": 779 } ], "tu": [ ], "we": [ ], "th": [ { "bt": 240, "et": 779 }, { "bt": 1140, "et": 1319 } ], "fr": [ { "bt": 660, "et": 1019 } ], "sa": [ { "bt": 0, "et": 1439 } ], "su": [] }

Данные в json соответствуют средней картинке в макете, данные интервалов принимаются и передаются в минутах суток, но в нашем случае мы работаем с часами. Пример: Интервал в часах 1:00 до 2:00 = от 60 до 119 Минуты суток (0 - 1439)

Также компонент должен быть кликабельным, то есть давайть юзеру возможность выбрать нужные интервалы (в данном случае часы) и выдавать на выходе json такого же вида, как и на входе (в соответствии с тем что наклацал пользователь). Считаем выбранным более темный цвет, не выбранным - более светлый. Так же должна быть возможно зажымать мышкой на первом (не выбранном, светлом) прямоугольнике, провели кривую и все прямоугольники, над которыми провели зажатой мышкой, закрасились в темный. То есть после данного действия все темные прямоугольники считаем выбранными. Когда нажимаем на колонку "all day" - "весь день" (вся строка выбирается, нажимаем ещё раз - вся строка становится не выбранной).