Use ng-repeat to show the days in calendar form

Question

Use ng-repeat to show the days in calendar form

Navigation

#1 by (1 votes)

0

Trying to migrate a code to Angular which I have done in jquery , which is a calendar with integrated datepicker. The problem is that you have to take into account the following:

If the first day of the month falls on any day that is not Monday, then the days prior to this day must be filled in to avoid disorganization of the calendar.

The same if the last day is not Sunday, you also have to fill in to avoid disorganizing the calendar's shape.

Here is an example of the summary code of what I was doing:

 <div>

<select>
    <option value="nombredelmes o numero del mes">Nombre del mes</option>
</select>

<div id="diasSemana">
    <div class="row">
        <p class="col">L</p>
        <p class="col">M</p>
        <p class="col">M</p>
        <p class="col">J</p>
        <p class="col">V</p>
        <p class="col">S</p>
        <p class="col">D</p>
    </div>
</div>

<div>

    <div class="row" id="uno"></div>
    <div class="row" id="dos"></div>
    <div class="row" id="tres"></div>
    <div class="row" id="cuatro"></div>
    <div class="row" id="cinco"></div>
    <div class="row" id="seis"></div>

</div>

In the previous code in id that are rising, inserted by append or any other way of doing by placing the dates for each day, without forgetting the above.

The days, dates and others were obtained through the library Moment.js

angularjs ionic

asked by Pedro Miguel Pimienta Morales 13.06.2016 в 17:47

source

1 answer

implementation of sweet alert in an @ html.ActionLink Suggestions for creating historical DB tables [closed]

score 1 · Accepted Answer

This you can achieve with a customized filter. A filter is a functionality that basically allows you to transform any data into anything.

You can use as input a string of characters 'mes/año' or 'mes' and get an array in the output with the desired days.

I leave you a demo:

angular.module('app', [])
  .controller('CalendarioCtrl', function() {
    var vm = this;
    vm.meses = [{
      nombre: 'Enero',
      numero: 1
    }, {
      nombre: 'Febrero',
      numero: 2
    }, {
      nombre: 'Marzo',
      numero: 1
    }, {
      nombre: 'Abril',
      numero: 4
    }, {
      nombre: 'Mayo',
      numero: 5
    }, {
      nombre: 'Junio',
      numero: 6
    }, {
      nombre: 'Julio',
      numero: 7
    }, {
      nombre: 'Agosto',
      numero: 8
    }, {
      nombre: 'Septiembre',
      numero: 9
    }, {
      nombre: 'Octubre',
      numero: 10
    }, {
      nombre: 'Noviembre',
      numero: 11
    }, {
      nombre: 'Diciembre',
      numero: 12
    }];
    vm.semana = ['Domingo', 'Lunes', 'Martes', 'Miercoles', 'Jueves', 'Viernes', 'Sabado'];
  })
  .filter('calendario', function() {
    return function(input) {
      if (input) {
        var result = [];
        var year = moment().year();
        var startDay = moment(input + '/01/' + year);
        var endDay = startDay.clone().endOf('month');
        var prefix = startDay.weekday();
        var dayPrevMonth = startDay.clone().day(0).date();
        var endPrevMonth = startDay.clone().day(0).endOf('month').date();
        if (endPrevMonth - dayPrevMonth < 7) {
          for (var i = dayPrevMonth; i <= endPrevMonth; i++) {
            result.push({
              day: i,
              current: false
            });
          }
        }
        var days = startDay.daysInMonth();
        for (var i = 0; i < days; i++) {
          result.push({
            day: i + 1,
            current: true
          });
        }

        var endNextWeek = endDay.clone().day(7).date();
        for (var i = 1; i < endNextWeek; i++) {
          result.push({
            day: i,
            current: false
          });
        }

        return result;
      }
    };
  });

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.header {
  font-weight: bolder;
  font-size: 12px;
}
.calendar.header .day {
  height: 30px;
}
.calendar {
  position: relative;
  width: 100%
}
.calendar .day {
  float: left;
  width: 13.8%;
  height: 100px;
  border: solid 1px lightgray;
}
.calendar .day.other {
  background-color: lightgray;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="http://momentjs.com/downloads/moment.min.js"></script>
<div ng-app="app" ng-controller="CalendarioCtrl as vm">
  <select ng-options="mes.numero as mes.nombre for mes in vm.meses" ng-model="vm.selected">
  </select>
  <br>
  <br>
  <div ng-if="vm.selected">
    <ul class="calendar header">
      <li class="day" ng-repeat="dia in vm.semana">{{dia}}</li>
    </ul>
    <ul class="calendar">
      <li class="day" ng-class="{other: !item.current}" ng-repeat="item in vm.selected | calendario track by $index">
        {{item.day}}
      </li>
    </ul>
  </div>
</div>

Of course the example has some problems like using the first day of the week according to the regional settings and the format of the dates so I recommend you use a professional library when you try to perform tasks like this.

Here I leave the link of a very popular

link