How to make a 28-day calendar!

Asked

Viewed 198 times

3

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.

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 like this in the Jquery plugin of datepicker, but I didn’t find anything like it, so I think I need to do the same. Anybody got a tip? Thank you!

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

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

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 you will have 4 weeks, I do not want this number to be commutative, that is, every month the number of weeks reset! I think it’s now become clear

javascript jquery calendar
  • 2

    I don’t understand, do you want the calendar to have a maximum of 28 days? Then the user won’t be able to choose the month?

  • So.. the month system is normal.. the month needs to be 28 days because I need 4 weeks straight and closed, from Sunday to Monday...

  • What about the months with up to 31 days? What happens to those days that are left?

  • What if the first Sunday of the month is day 5? The user will never be able to choose the day ... 1, 2, 3, 4? This calendar you want to set up is kind of weird.

  • The bootstrap datepicker displays the number of the week http://jsfiddle.net/54h58y1r/

  • @Orion From what I understand he wants a year of 13 months, all with 28 days

  • So the system is for the administration of a game, and the game treats the calendar as follows: - Every month starts on Sunday, and every month has 28 days... some have 30 other 31 days.. the number of days of a month is limited... What will change is only the month... And the week that needs to be reset every 4 cycles...

  • @I think I understand what you want. It should not be difficult, but in fact you will have to make your own interface, since hardly a plugin will allow you a custom calendar at this point. I suggest you insert the Datepicker HTML to do something similar.

  • @mathiasfk because it’s old! My big question is to do this, I managed to make it clickable and such.. send the value to where I want, but I wanted to make a beautiful API like datepicker, that rolled the months and stuff.. But I don’t know how I do it :/

  • Guys, I don’t really know how Stack works, but I’m slowly getting to develop my program! When you have something concrete put for you! Thanks!

  • If I were you, I’d really get fixed.

Show 6 more comments

1 answer

1

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 to put in a vector, and every time I arrive in the last month, It adds up to one year and returns to the first position of 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>

Browser other questions tagged javascript jquery calendar

You are not signed in. Login or sign up in order to post.