4

Criei uma função javascript que monta uma agenda. Preciso que essa agenda monte conforme a quantidade e os dias da semana do determinado mês. Ex(Dia 1 de agosto caiu em uma Terça-Feira). Preciso também que quando eu mudar o mês minha agenda monte conforme o mês selecionado. Segue o código.

Função que monta minha agenda

$(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);
});

Função que seta o mês atual

 $(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()]);

});
1

3 Respostas 3

6

Não sei se entendi, mas se você está tendo dificuldades em obter o dia da semana que suas Datas, você pode utilizar o método Date.prototype.getDay() que retorno o valor do dia da semana para a data, sendo:

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

Por exemplo:

var d = new Date();
var n = d.getDay();
document.getElementById("result").innerHTML = n;
<p id="result"></p>

Edit

Conforme comentário você precisa de:

  • Saber quantos dias tem determinado mês - que você pode fazer conforme este post no SOen, assim:

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>

  • E que dia cai dia 1° dia de determinado mês, quase na mesma ideia, algo assim:

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>

Obs: Sempre que estiver manipulando Datas, lembre-se que os meses não base 0 (0-based).

4
  • 2
    0 = Domingo, 1 = Segunda, e assim por diante.
    – Joao Paulo
    Commented 28/08/2015 às 12:56
  • Então ainda não é isso. Eu tenho no meu html os dias da semana estáticos. O que eu preciso fazer é verificar quantos dias por exemplo tem o mês de agosto e em que dia da semana caiu o dia 1, pra minha agenda ser montada a partir disso. Commented 28/08/2015 às 13:02
  • @RaphaelGumm, adicionei informação a minha resposta original conforme seu esclarecimento nos comentários a resposta. Verifique se lhe ajuda! Commented 28/08/2015 às 13:28
  • Perfeito @Fernando, era exatamente isso que eu precisava. Obrigado mesmo. Commented 28/08/2015 às 13:56
4

para pegar o total de dias do mês, podemos usar um pequeno trick, que é pegar o dia 0 do proximo mês.

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>
  <input id="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>

3

Como pegar a quantidade de dias do mês:

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 

Como pegar o dia da semana:

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

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

Setando os valores na mesma função:

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .