3

Seguinte, preciso fazer um calendário de 28 dias com os seguintes critérios:

Todo mês deve iniciar o primeiro dia no domingo, portanto isso já formata todo o resto do mês.

É necessário ao lado do calendário ir o número da semana, por exemplo, semana 1, semana 2, semana 3 e semana 4, no mês seguinte retorna para semana 1..

Eu procurei algo do gênero no plugin do Jquery do datepicker, mas não achei nada parecido, por tanto acho que preciso fazer o meu mesmo. Alguém da alguma dica? Obrigado!


Necessito disso porque quero fazer um administrativo para um jogo, o jogo mantém o calendário da seguinte forma:

Todo mês, inicia no domingo: Dia 1 de Janeiro, domingo; Dia 1 de Fevereiro, domingo;

E todo mês tem 28 dias

Portanto todo mês será a mesma coisa

D  S  T  Q  Q  S  S
1  2  3  4  5  6  7
8  9  10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28

Na esquerda necessita ter o número da semana, todo mês terá 4 semanas, não quero que esse número seja comulativo, ou seja, a cada mês o número de semanas reseta! Acho que agora ficou mais claro \o

11
  • 2
    Não entendi, você quer que o calendário tenha no máximo 28 dias? Então o usuário não poderá escolher o mês?
    – Paulo
    Commented 29/08/2015 às 19:50
  • Então.. o sistema de mês é normal.. o mês precisa ter 28 dias porque o preciso de 4 semanas certinhas e fechadas, de domingo a segunda...
    – Hermus
    Commented 29/08/2015 às 20:16
  • E os meses com até 31 dias? O que acontece com esses dias que sobram?
    – Paulo
    Commented 29/08/2015 às 20:20
  • E se o primeiro domingo do mês for dia 5? O usuário nunca vai poder escolher o dia ... 1, 2, 3, 4? Esse calendário que você quer montar é meio estranho.
    – Paulo
    Commented 29/08/2015 às 20:25
  • O bootstrap datepicker permite visualizar o número da semana jsfiddle.net/54h58y1r
    – Paulo
    Commented 29/08/2015 às 20:38

1 Resposta 1

1

Pessoal o que acham? Eu consegui montar, já que vai ser fixo e agora vou para a parte dinâmica do sistema, preciso conseguir rolar os meses e anos, os anos vai ser facil, é só somar ou subtrair, os meses pensei em colocar em um vetor, e cada vez que chegue no último mês, ele soma um ano e volta pra primeira posição do vetor! O mesmo acontece pro inicio! O que acham?

$(document).ready(function() {
  for (var csu = 1; csu <= 22; csu += 7) {
    $("#csu").append(csu);
    if (csu != 22) {
      $("#csu").append("<br/><br/>");
    }
  }

  for (var cm = 2; cm <= 23; cm += 7) {
    $("#cm").append(cm);
    if (cm != 23) {
      $("#cm").append("<br/><br/>");
    }
  }

  for (var ctu = 3; ctu <= 24; ctu += 7) {
    $("#ctu").append(ctu);
    if (ctu != 24) {
      $("#ctu").append("<br/><br/>");
    }
  }

  for (var cw = 4; cw <= 25; cw += 7) {
    $("#cw").append(cw);
    if (cw != 25) {
      $("#cw").append("<br/><br/>");
    }
  }

  for (var cth = 5; cth <= 26; cth += 7) {
    $("#cth").append(cth);
    if (cth != 26) {
      $("#cth").append("<br/><br/>");
    }
  }

  for (var cf = 6; cf <= 27; cf += 7) {
    $("#cf").append(cf);
    if (cf != 27) {
      $("#cf").append("<br/><br/>");
    }
  }

  for (var csa = 7; csa <= 28; csa += 7) {
    $("#csa").append(csa);
    if (csa != 28) {
      $("#csa").append("<br/><br/>");
    }
  }
});
#calendario {
  width: 250px;
  height: 200px;
  background-color: lightgrey;
  border: 1px solid black;
}
#cabecalho {} #controle_esq,
#controle_dir {
  font-weight: bolder;
}
#controle_esq {
  margin-left: 8%;
  float: left;
}
#controle_dir {
  margin-right: 8%;
  float: right;
}
#cabecalho span {
  display: block;
}
#mes,
#ano,
#cabecalho_dias {
  text-align: center;
  font-weight: bolder;
  color: black;
}
#dias {
  width: 240px;
  height: 160px;
  background-color: #ddd;
  margin-left: 5px;
  color: white;
}
#cabecalho_dias span {
  margin-right: 6%;
}
#cabecalho_dias #week {
  margin-right: 6%;
}
#num_dias {
  width: 210px;
  height: 140px;
  border-left: 1px solid gray;
  margin-left: 24px;
  background-color: #aaa;
}
#num_dias div {
  text-align: center;
  margin-bottom: 4%;
  width: 30px;
  padding-top: 8px;
  padding-bottom: 6px;
  float: left;
}
.colunas {
  background-color: #bbb;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div id="calendario">
    <div id="cabecalho">

      <span id="ano">2015</span>
      <span id="controle_esq"><<</span>
      <span id="controle_dir">>></span>
      <span id="mes">Agosto</span>
    </div>
    <div id="dias">
      <div id="cabecalho_dias">
        <span id="week" value="WEEK">W</span>
        <span value="SUN">S</span>
        <span value="MON">M</span>
        <span value="TUE">T</span>
        <span value="WED">W</span>
        <span value="THU">T</span>
        <span value="FRI">F</span>
        <span value="SAT">S</span>
      </div>
      <div id="num_dias">
        <div id="csu" class="colunas"></div>
        <div id="cm"></div>
        <div id="ctu" class="colunas"></div>
        <div id="cw"></div>
        <div id="cth" class="colunas"></div>
                        <div id="cf "></div>
                        <div id="csa " class="colunas "></div>
                    </div>
                    <div id="num_sem ">
                    </div>
                </div>
            </div>

    </body>

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 .