Calculate on which days of the week the days of the month fall

Question

Calculate on which days of the week the days of the month fall

Navigation

#1 by (6 votes)
#2 by (4 votes)
#3 by (3 votes)

4

I created a javascript function that assembles a calendar. I need this schedule to work according to the number and days of the week of the given month. Ex ( August 1st fell on a Tuesday ). I also need that when I change the month my schedule will mount according to the selected month. Follow the code.

Function that mounts my calendar

$(document).ready(function () {
    var str = '';
    var aux = 1;
    var tr = '';
    var tbl = $('#calendar');

    for (var i = 1; i < 32; i++) {

        if (aux == 1) {
            tr = '<tr>';
        }
        str += tr + '<td class="calendario btnExibirDetalhes" data-toggle="modal" data-target="#Modal" position="static">' + i + '</td>';
        if (aux == 7) {

            str = str + tr;
            aux = 0;
        }
        aux++;
        tr = '';
    }
    if (tr == '') {
        tr = '</tr>';
        str = str + tr
    }
    tbl.append(str);
});

Function that arrows the current month

 $(document).ready(function () {
    monName = new Array("Janeiro",
                        "Fevereiro",
                        "Março",
                        "Abril",
                        "Maio",
                        "Junho",
                        "Julho",
                        "Agosto",
                        "Setembro",
                        "Outubro",
                        "Novembro",
                        "Dezembro")
    hoje = new Date();
    var preenchemes = $('#mes');
    preenchemes.append(monName[hoje.getMonth()]);

});

javascript

asked by anonymous 28.08.2015 / 14:46

3 answers

4

To get the total number of days in a month, we can use a little trick, which is to catch the day 0 of the next month.

var month = document.getElementById("month");
var agenda = document.querySelector("#agenda tbody");
var lblDiaSemana = document.getElementById("lblDiaSemana");
var lblTotalDias = document.getElementById("lblTotalDias");
var tmplAgenda = Handlebars.compile(document.getElementById("tmplAgenda").innerHTML);
var diasSemana = [
  "Domingo",
  "Segunda",
  "Terça",
  "Quarta",
  "Quinta",
  "Sexta",
  "Sábado"
];

month.addEventListener("change", function (event) {
  var ano = parseInt(event.target.value.split("-")[0]);
  var mes = parseInt(event.target.value.split("-")[1]);

  var diaPrimeiro = new Date(ano, mes - 1, 1).getDay();
  var totalDias = new Date(ano, mes, 0).getDate();
  var mes = [];
  var inicio = diaPrimeiro;

  for (var diaMes = 0; diaMes < totalDias;) {
    var semana = [];
    for (var diaSemana = inicio; diaSemana < 7 && diaMes < totalDias; diaSemana++) {
      semana[diaSemana] = diaMes + 1;
      diaMes++;
    }
    mes.push(semana);
    inicio = 0;
  }
  

  // 00/09/2015 = 31/08/2015 ;D
  lblTotalDias.innerHTML = totalDias;
  lblDiaSemana.innerHTML = diasSemana[diaPrimeiro];
  agenda.innerHTML = tmplAgenda(mes);  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.3/handlebars.js"></script><div><inputid="month" type="month" />
</div>
<div>
  Dia da Semana: <span id="lblDiaSemana"></span>
</div>
<div>
  Total de Dias: <span id="lblTotalDias"></span>
</div>
<div>
  <table id="agenda">
    <thead>
      <tr>
        <td>Domingo</td>
        <td>Segunda</td>
        <td>Terça</td>
        <td>Quarta</td>
        <td>Quinta</td>
        <td>Sexta</td>
        <td>Sábado</td>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
</div>

<script id="tmplAgenda" type="text/x-handlebars-template">
  {{#each this}}
  <tr>
    {{#each this}}
    <td class="calendario btnExibirDetalhes" data-toggle="modal" data-target="#Modal" position="static">
      {{this}}
    </td>
    {{/each}}
  </tr>
  {{/each}}
</script>

28.08.2015 / 15:35

3

How to get the number of days of the month:

function daysInMonth(month,year) {
    return new Date(year, month, 0).getDate();
}

//Pegando a quantidade de dias do mês de fevereiro de 2015
alert(daysInMonth(2,2015)); // 28

How to get the day of the week:

function getDayOfWeek(month, year){
    return new Date(year, (month-1), 1).getDay();
}

alert(getDayOfWeek(2,2015)); // 5 que é Sexta-Feira

Setting the values in the same function:

function getMonthInfos(month, year){
    var monthDays = daysInMonth(month,year);
    var weekDay = getDayOfWeek(month, year);
}

28.08.2015 / 15:13

Is it possible to combine first: child with: hover? How to make background that repeats with sprites?

score 6 · Accepted Answer

I do not know if I understand, but if you are having difficulty getting the day of the week than your Dates, you can use the #

Valor | Dia da semana
------|---------------
  0   |    Domingo
  1   |    Segunda
  2   |    Terça
  3   |    Quarta
  4   |    Quinta
  5   |    Sexta
  6   |    Sábado

For example:

var d = new Date();
var n = d.getDay();
document.getElementById("result").innerHTML = n;

<p id="result"></p>

Edit

According to the comment you need:

Know how many days a particular month has - what you can do as this post on SOen , like this:

function daysInMonth(month, year) {
  return new Date(year, month + 1 /* para ir a proximo */ , 0 /* para voltar ao ultimo dia do mês anterior*/ ).getDate();
}

var d = new Date();
var result = daysInMonth(d.getMonth(), d.getFullYear());
document.getElementById("result").innerHTML = result;

<p id="result"></p>

And what day falls on the 1st day of a given month, almost on the same idea, something like this:

function firstDayWeekInMonth(month,year) {
   return new Date(year, month, 1).getDay();
}

var d = new Date();
var result = firstDayWeekInMonth(d.getMonth(), d.getFullYear());
document.getElementById("result").innerHTML = result;

<p id="result"></p>

Note: Whenever you are manipulating Dates, remember that months do not base 0 (% with%) .