Piotrek Bąk

Wypowiedzi

• Wszystko
• Tylko fora

• 
  Wpis na grupie JavaScript w temacie Kalendarz JavaScript

  12.05.2018, 14:55

  Witam. Odwzorowuje strone (http://energia-eko.com/) i mam pewien problem. Jest tam coś takiego jak kalendarium javascript. Na stronie głównej (home) jest taki szary pas a w nim są dni miesiąca liczbowo od 1 do 30 zależy od miesiąca jest napisa KALENDARIUM plus nazwa miesiąca i rok . Potrzebny jest mi tylko kod javascript. Są dwa przyciski po bokach poprzedni i następny i gdy klikne w któryś to się zmienia miesiąc. Jest teraz maj jak klilkne next to pojawia się czeriwec jak do previous to maj itd. Wstawiam kod html
  <div class="wow fadeIn content calendar">
  <h1>Kalendarium <b>MJA 2018</b></h1>
  
  <form action="" method="post" class="prev_month">
  <input type="image" src="prev_cal.jpg" />
  <input type="hidden" name="year" value="2018" />
  <input type="hidden" name="month" value="04" />
  <input type="hidden" name="action_calc" value="prev_cal" />
  </form>
  
  <form action="" method="post" class="next_month">
  <input type="image" src="next_cal.jpg" />
  <input type="hidden" name="year" value="2018" />
  <input type="hidden" name="month" value="04" />
  <input type="hidden" name="action_calc" value="next_cal" />
  </form>
  
  <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span><span>13</span><span>14</span><span>15</span><span>16</span><span>17</span><span>18</span><span>19</span><span>20</span><span>21</span><span>22</span><span>23</span><span>24</span><span>25</span><span class="today">26</span><span>27</span><span>28</span><span>29</span><span>30</span>
  </div>
  oraz kod css
  
  .calendar{
  padding:10rem 0;
  text-align:center;
  position:relative;
  }
  
  .calendar span,
  .calendar a{
  width:2.9%;
  text-align:center;
  display:inline-block;
  text-decoration:none;
  line-height:70px;
  background: #F2F2F2;
  }
  
  .calendar a.entry{
  background:#2e3b59;
  color:#fff;
  position:relative;
  }
  
  .calendar .today{
  background:#e4e4e4;
  font-weight:bold;
  }
  
  .calendar a.entry .info img{
  position:absolute;
  top:-10px;
  left:50%;
  transform:translate(-50%,0);
  }
  
  .calendar a.entry .info{
  display:none;
  padding:1rem 2rem;
  color:#fff;
  background:#2e3b59;
  font-size:30px;
  text-align:center;
  text-decoration:none;
  position:absolute;
  bottom:-11rem;
  z-index:99999999999999;
  left:50%;
  white-space:nowrap;
  transform:translate(-50%,0);
  box-shadow: 7px 6px #c8c8c8;
  }
  
  .calendar a.entry:hover{
  text-decoration:none;
  }
  
  .calendar a.entry:hover .info{
  display:block;
  }
  
  .calendar .prev_month{
  position:absolute;
  left:60px;
  bottom:11rem;
  }
  .calendar .next_month{
  position:absolute;
  right:60px;
  bottom:11rem;
  }
  mi jest potrzebny sam kod javascript. Trochę próbowałem się z tym bawić i napisałem coś takiego
  <script>
  var content = '';
  var data = new Date();
  var day = data.getDay();
  var month = data.getMonth();
  var year = data.getFullYear();
  var currentdayMonth = day;
  for (var i = 1; i < 31; i++) {
  if (dayMonth === currentdayMonth) {
  content += '<span class="today">' + i + '</span>';
  } else {
  content += '<span class="today">' + i + '</span>';
  }
  
  }
  $("#yourControl").html(content);
  
  </script>
  i nie wiem czy będzie działać. Proszę o pomoc. Jeśli coś jest niejasne proszę pisać.