JSFiddle - React, Tailwind, and code Playground

by g

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js"></script>
<div class="line-calendar" ng-controller="CalendarController as controller">
    <div class="scale-container">
        <div class="scale-section" ng-repeat="day in controller.days">
            <span ng-bind="day + 1"></span>
        </div>
    </div>
    <div class="line-container">
        <div class="event-line" ng-repeat="line in controller.eventLines">
            <div class="line-title" ng-bind="line.title"></div>
            <div class="event-container">
                <div class="event" ng-repeat="event in line.events"
                     ng-style="controller.getStyle(event)"></div>
            </div>
        </div>
    </div>
</div>

CSS

.line-calendar {
    height: 400px;
    position: relative;
    padding-top: 20px;
}

.scale-container {
    /*overflow: hidden;*/
    height: 100%;
    position: absolute;
    border-left: dashed 1px #ccc;
    top: 0;
    left: 150px;
}

.scale-section {
    float: left;
    width: 29px;
    border-right: dashed 1px #ccc;
    height: 100%;
    text-align: center;
    color: #777;
    font-size: 11px;
}

.line-title {
    width: 150px;
    float: left;
    font-size: 14px;
    color: #333;
    line-height: 20px;
}

.event-line:hover {
    background: #F7F7F7;
}

.event-container {
    position: relative;
    height: 20px;
    margin-left: 150px;
}

.event {
    position: absolute;
    height: 10px;
    border-radius: 5px;
    background: #4679BD;
    top: 5px;
    transition: background .2s ease-in;
}

.event:hover {
    background: #79AAEC;
}

JavaScript

angular.module('calendar', [])
.controller('CalendarController', function() {
    var daysInMonth = moment().endOf('month').date();
    var days = _.range(daysInMonth);
    this.days = days;
    
    var generateEvents = function() {
        return days
        .filter(function(d) { return (d % 7) < 5; })
        .map(function(d) { return {
            start: moment({ y: 2015, M: 3, d: d, h: 9 }),
            end: moment({ y: 2015, M: 3, d: d, h: 15 }),
        } });
    };
    
    this.eventLines = [
        { title: 'Albert Einstein', events: generateEvents() },
    ];
         
    this.getStyle = function(event) {
        var dayWidth = 30;
        return {
            left: (event.start.date() * dayWidth) + 'px',
            width: 20 + 'px',
        };
    };     
});

angular.bootstrap(document.body, ['calendar'])