JSFiddle - React, Tailwind, and code Playground

by RajamohanShilpa A

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ng-grid/2.0.11/ng-grid.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/ng-grid/2.0.11/ng-grid.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.2/moment.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-calendar/0.8.0/calendar.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap.js"></script>
<script src="http://angular-ui.github.io/ui-calendar/bower_components/fullcalendar/fullcalendar.js"></script>
<script src="http://angular-ui.github.io/ui-calendar/bower_components/fullcalendar/gcal.js"></script>
<link rel="stylesheet" href="http://angular-ui.github.io/ui-calendar/bower_components/fullcalendar/fullcalendar.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<form name="form1" class="form-horizontal">
    <div ng-app="scrollApp">
        <div ng-controller="scrollController">
            <div ng-grid="ngGridOptions" class="gridStyle"></div>
            <div ui-calendar="uiConfig.calendar" class="span2 calendar" ng-model="eventSources"></div>
        </div>
    </div>
</form>

CSS

/*style.css*/
 .gridStyle {
    border: 1px solid rgb(212, 212, 212);
    width:300px;
    height: 300px;
    float:left;
}
.select-items {
    border:solid #ddd 1px;
    display:inline-block;
    float:left;
    cursor:pointer;
    margin;
    10px;
}
.row-color {
    background-color: #be4c39 !important;
}
.row-selected-blue-green {
    color:#fff;
    background: -webkit-linear-gradient(left, #4472b9 50%, #4ca454 50%) !important;
    background: linear-gradient(left, #4472b9 50%, #4ca454 50%) !important;
    background: -moz-linear-gradient(left, #4472b9 50%, #4ca454 50%) !important;
    background: -o-linear-gradient(left, #4472b9 50%, #4ca454 50%) !important;
}
/*transparent*/
 .row-selected-blue {
    color:#fff;
    background: -webkit-linear-gradient(left, #4472b9 100%, #000000 0%) !important;
    background: linear-gradient(left, #4472b9 100%, #000000 0%) !important;
    background: -moz-linear-gradient(left, #4472b9 100%, #000000 0%) !important;
    background: -o-linear-gradient(left, #4472b9 100%, #000000 0%) !important;
}
.row-selected-green {
    color:#000;
    background: -webkit-linear-gradient(left, #4ca454 100%, #000000 0%) !important;
    background: linear-gradient(left, #4ca454 100%, #000000 0%) !important;
    background: -moz-linear-gradient(left, #4ca454 100%, #000000 0%) !important;
    background: -o-linear-gradient(left, #4ca454 100%, #000000 0%) !important;
}
.row-selected {
    color:#fff;
    background: -webkit-linear-gradient(left, transparent 100%, #000000 0%) !important;
    background: linear-gradient(left, transparent 100%, #000000 0%) !important;
    background: -moz-linear-gradient(left, transparent 100%, #000000 0%) !important;
    background: -o-linear-gradient(left, transparent 100%, #000000 0%) !important;
}

JavaScript

angular.module("scrollApp", ['ngGrid', 'ui.calendar', 'ui.bootstrap'])
    .controller("scrollController", function ($scope) {
    $scope.selectedGridItems = [];
    $scope.test = [{
        "id": 1,
            "date": "01/09/2014",
            "details": "test1",
            "check": false,
            "check1": false
    }, {
        "id": 2,
            "date": "02/09/2014",
            "details": "test2",
            "check": false,
            "check1": false
    }, {
        "id": 3,
            "date": "03/09/2014",
            "details": "test3",
            "check": false,
            "check1": false
    }, {
        "id": 4,
            "date": "04/09/2014",
            "details": "test4",
            "check": false,
            "check1": false
    }, {
        "id": 5,
            "date": "05/09/2014",
            "details": "test5",
            "check": false,
            "check1": false
    }, {
        "id": 6,
            "date": "06/09/2014",
            "details": "test6",
            "check": false,
            "check1": false
    }, {
        "id": 7,
            "date": "07/09/2014",
            "details": "test7",
            "check": false,
            "check1": false
    }, {
        "id": 8,
            "date": "08/09/2014",
            "details": "test8",
            "check": false,
            "check1": false
    }, {
        "id": 9,
            "date": "09/09/2014",
            "details": "test9",
            "check": false,
            "check1": false
    }, {
        "id": 10,
            "date": "10/09/2014",
            "details": "test10",
            "check": false,
            "check1": false
    }, {
        "id": 11,
            "date": "11/09/2014",
            "details": "test11",
            "check": false,
            "check1": false
    }, {
        "id": 12,
            "date": "12/09/2014",
            "details": "test12",
            "check": false,
            "check1": false
    }, {
        "id": 13,
           ...