Temat: Kalendarz JavaScript

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ć.