Customized Angular Calendar By Chytra

        data = [
          {date: '01-01-2020', status: false},
          {date: '02-01-2020', status: true},
          {date: '03-01-2020', status: false},
          {date: '04-01-2020', status: true},
          {date: '05-01-2020', status: true},
          .
          .
          .
          {date: '31-01-2020', status: false},
        ]
        days = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
        getDates(month, year) {
          this.dates = [];
          let cDate;

          // getting staring day of month
          let startingDay = new Date(`${month}-01-${year}`).getDay();
          for (let j = 0; j < startingDay; j++) {
            // adding empty string upto starting day
            this.dates.push('');
          }

          // getting number days of month
          const datesCount = new Date(year, month, 0).getDate();
          for (let i = 1; i <= datesCount; i++) {

            // if you want date with particular format you can format here
            cDate = new Date(`${month}-${i}-${year}`);

            // so i need just date
            this.dates.push(i);
          }
        }

        <div class="card">
          <div class="card-body">
            <ul class="weekdays">
              <li *ngFor="let day of days">{{day}}</li>
            </ul>
            <ul class="days">
              <li *ngFor="let cDate of dates" style="padding-left: 10px">
                <!--If you want to display user active status this may be helpfull-->
                <span *ngIf="cDate" class="{{!dat.data[cDate - 1].status ? 'li inActive' : 'li active'}}">
                  {{cDate}}
                </span>
              </li>
            </ul>
          </div>
        </div>

        .weekdays {
          margin: 0;
          padding: 10px 0;
          background-color: #ddd;
        }

        .weekdays li {
          display: inline-block;
          width: 14%;
          color: #666;
          text-align: center;
        }

        .days {
          padding: 10px 0;
          background: #eee;
          margin: 0;
        }

        .days li {
          list-style-type: none;
          display: inline-block;
          width: 14%;
          text-align: center;
          margin-bottom: 5px;
          font-size:12px;
          color: #777;
        }

        .active {
          background: #1abc9c;
        }

        .li {
          display: block;
          height: 23px;
          width: 23px;
          line-height: 23px;
          -moz-border-radius: 30px;
          border-radius: 30px;
          text-align: center;
          border: none;
          color: white !important
        }

        .inActive {
          background: #FF5370;
        }