Skip to main content
adicionou 1454 caracteres ao conteúdo
Fonte Link
Tobias Mesquita
  • 23,1mil
  • 1
  • 32
  • 52
var month = document.getElementById("month");
var diaSemanaagenda = document.querySelector("#agenda tbody");
var lblDiaSemana = document.getElementById("diaSemana""lblDiaSemana");
var totallblTotalDias = document.getElementById("total""lblTotalDias");
var diasSemanatmplAgenda = [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, 00/09/2015mes =- 31/08/20151, ;D1).getDay();
   var total.innerHTMLtotalDias = 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 = diasSemana[newtotalDias;
 Date(ano, meslblDiaSemana.innerHTML -= 1,diasSemana[diaPrimeiro];
 1) agenda.getDayinnerHTML = 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="diaSemana"><id="lblDiaSemana"></span>
</div>
<div>
    Total de Dias: <span id="total"><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>
var month = document.getElementById("month");
var diaSemana = document.getElementById("diaSemana");
var total = document.getElementById("total");
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]);
  
     // 00/09/2015 = 31/08/2015 ;D
    total.innerHTML = new Date(ano, mes, 0).getDate();
    diaSemana.innerHTML = diasSemana[new Date(ano, mes - 1, 1).getDay()];
});
<div>
    <input id="month" type="month" />
</div>
<div>
    Dia da Semana: <span id="diaSemana"></span>
</div>
<div>
    Total de Dias: <span id="total"></span>
</div>
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>
Fonte Link
Tobias Mesquita
  • 23,1mil
  • 1
  • 32
  • 52

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 diaSemana = document.getElementById("diaSemana");
var total = document.getElementById("total");
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]);
  
    // 00/09/2015 = 31/08/2015 ;D
    total.innerHTML = new Date(ano, mes, 0).getDate();
    diaSemana.innerHTML = diasSemana[new Date(ano, mes - 1, 1).getDay()];
});
<div>
    <input id="month" type="month" />
</div>
<div>
    Dia da Semana: <span id="diaSemana"></span>
</div>
<div>
    Total de Dias: <span id="total"></span>
</div>