How to make a 28 day calendar!

Question

How to make a 28 day calendar!

Navigation

#1 by (1 votes)

3

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

Every month should start on the first day on Sunday, so it will format the rest of the month.

It is necessary next to the calendar to go the number of the week, for example, week 1, week 2, week 3 and week 4, the following month returns to week 1 ..

I looked for something of the genre in the datepicker Jquery plugin, but I did not find anything like it, so I think I need to do it myself. Anyone have any tips? Thanks!

I need this because I want to make an administrative for a game, the game retains the calendar as follows:

Every month, it starts on Sunday: Day 1 of January, Sunday; Day 1 of February, Sunday;

And every month has 28 days

So every month 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 number of the week, every month will have 4 weeks, I do not want that number to be commative, that is, every month the number of weeks rests! I think now it's clearer \ o

javascript jquery calendar

asked by anonymous 29.08.2015 / 21:24

1 answer

PDO with type BIT The method or operation is not implemented error

score 1 · Answer 1

Personal what do you think? I was able to mount, since it will be fixed and now I go to the dynamic part of the system, I need to be able to scroll 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 a year and returns to the first position of the vector! The same happens 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><divid="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>