gantt

angular.module('master', [])
  .controller('GanttChart', function() {


    var gantt = this;

    gantt.test = "asdasdasd"

    getAllDatesInOctober = function(year, month) {
        var result = [];

        var monthStart = new Date(year, month, 1);
        var monthEnd = new Date(year, month + 1, 0);

        for (var i = monthStart.getDate(); i <= monthEnd.getDate(); i++) {
            var tmp_month = month + 1;
            result.push(year + '-' + tmp_month + '-' + i);
        }

       return result;
    }

    gantt.allDates = getAllDatesInOctober(2019, 9);


    gantt.mockData = [
        {
            no: 1,
            isStage: true,
            parent: 'brak',
            number: 'FS/DASD/34343',
            name: 'Nazwa pierwszego zadania',
            amount: 1000,
            dateStart: '2019-10-3',
            dateEnd: '2019-10-8'
        },
        {
            no: 2,
            isStage: true,
            parent: 'brak',
            number: 'SDS/DASD/34343',
            name: 'Drugie zadanie',
            amount: 673,
            dateStart: '2019-10-6',
            dateEnd: '2019-10-15'
        },
        {
            no: 3,
            isStage: true,
            parent: 'brak',
            number: 'FSDD/DASD/34343',
            name: 'Trzecie zadanie test',
            amount: 23333,
            dateStart: '2019-10-23',
            dateEnd: '2019-10-29'
        },
        {
            no: 4,
            isStage: false,
            parent: 3,
            number: 'AAA/DASD/34343',
            name:   'Podzadanie w etapie trzecim',
            amount: 333,
            dateStart: '2019-10-13',
            dateEnd: '2019-10-17'
        }
    ]

    gantt.isFitted = function(mock, date) {
       var tmpStart = new Date(mock.dateStart).getTime();
       var tmpEnd   = new Date(mock.dateEnd).getTime();
       var datee    =  new Date(date).getTime();

       if (datee >= tmpStart && datee <= tmpEnd) {
           return true;
       } else {
           return false;
       }
    }

    gantt.hasAnyChilds = function(mock) {
        gantt.mockData.forEach(element => {
            // console.log(element)
            if (element.parent === mock.no) {
                return true;
            }
        });
    }

  });


<!doctype html>
<html ng-app="master">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
    <script src="index.js"></script>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>

    <h2>Diagram Gantt'a</h2>

    <div ng-controller="GanttChart as gantt">


        <table class="table">
            <thead>
                <tr>
                    <th></th>
                    <th>Nazwa</th>
                    <th>Numer</th>
                    <th>Planowana kwota</th>
                    <th>Data rozpoczecia</th>
                    <th>Data zakonczenia</th>
                    <th ng-repeat="date in gantt.allDates">
                        <span>{{date}}</span>
                    </th>
                </tr>
            </thead>

            <tbody>
                <tr style="background-color: antiquewhite" ng-repeat="mock in gantt.mockData" ng-show="mock.isStage">
                    <td>{{mock.no}}.</td>
                    <td>{{mock.name}} <span ng-if="gantt.hasAnyChilds(mock)">R</span></td>
                    <td>{{mock.number}}</td>
                    <th>{{mock.amount}} PLN</th>
                    <th>{{mock.dateStart}}</th>
                    <th>{{mock.dateEnd}}</th>
                    <th ng-repeat="date in gantt.allDates">
                           <div ng-if="gantt.isFitted(mock, date)" style="width: 100%; height: 100%; background-color: darkred; padding: 0;">
                                &nbsp;
                           </div>

                            <div ng-if="!gantt.isFitted(mock, date)">
                                    &nbsp;
                             </div
                    </th>
                </tr>

            </tbody>


        </table>

    </div>


  </body>
</html>


td, th {
    border: 0.5px solid black;
    padding: 3px;
  }

  /* th {
      height: 60px;
      border: 0.2px solid black;
      width: 30px;
  } */

  span {
    -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
  }

  table {
      font-size: 14px;
      border-spacing: 0;
  }

  .selected {
    background-color: red;
  }