javascript – How to make a 28-day calendar!

Question:

Next, I need to make a 28-day calendar with the following criteria:

Every month should start the first day on Sunday, so this already formats the rest of the month.

Next to the calendar is the week number, for example week 1, week 2, week 3 and week 4, next month returns to week 1.

I looked for something like this in the datepicker Jquery plugin, but I didn't find anything like it, so I think I need to do my own. Does anyone give any tips? Thanks!


I need this because I want to do an admin for a game, the game keeps the schedule as follows:

Every month starts on Sunday: January 1st, Sunday; February 1st, Sunday;

And every month has 28 days

So every month it will be the same

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

On the left you need to have the week number, every month will have 4 weeks, I don't want this number to be cumulative, that is, every month the number of weeks resets! I think it's now clearer \N

Answer:

Guys what do you think? I managed to assemble, since it will be fixed and now I go to the dynamic part of the system, I need to be able to roll the months and years, the years will be easy, just add or subtract, the months I thought of putting in a vector, and each Once it arrives in the last month, it adds up to a year and goes back to the first position in the vector! The same goes for the beginning! What do you think?

$(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>
Scroll to Top
AllEscort