Can somebody help me with a calendar algorithm? How can I display the calendar with algorithm (using javascript)? Maybe somebody can copy my code and type inside?
code:
<!DOCTYPE html>
<html>
<head>
<style>
* {box-sizing: border-box;}
ul {list-style-type: none;}
body {font-family: Verdana, sans-serif;}
.month {
padding: 70px 25px;
width: 100%;
background: black;
text-align: center;
}
.month ul {
margin: 0;
padding: 0;
}
.month ul li {
color: white;
font-size: 20px;
text-transform: uppercase;
letter-spacing: 3px;
}
.month .prev {
float: left;
padding-top: 10px;
}
.month .next {
float: right;
padding-top: 10px;
}
.weekdays {
margin: 0;
padding: 10px 0;
background-color: #ddd;
}
.weekdays li {
display: inline-block;
width: 13.6%;
color: #666;
text-align: center;
}
.days {
padding: 10px 0;
background: #eee;
margin: 0;
}
.days li {
list-style-type: none;
display: inline-block;
width: 13.6%;
text-align: center;
margin-bottom: 5px;
font-size:12px;
color: #777;
}
.days li .active {
padding: 5px;
background: #1abc9c;
color: white !important
}
/* Add media queries for smaller screens */
@media screen and (max-width:720px) {
.weekdays li, .days li {width: 13.1%;}
}
@media screen and (max-width: 420px) {
.weekdays li, .days li {width: 12.5%;}
.days li .active {padding: 2px;}
}
@media screen and (max-width: 290px) {
.weekdays li, .days li {width: 12.2%;}
}
</style>
</head>
<body>
Month is working, year too
Select Month:
<select>
<script>
var maanden = ["Jan", "Feb", "Mar", "Apr","Mei","Jun", "Jul", "Aug"
,
"Sep", "Okt", "Nov","Dec"];
for( var i = 0; i <= 11; i++){
document.write( ' <option value="+(m-1)+">' +maanden[i] + '
</option>' )
}
</script>
</select>
Select Year
<select>
<script>
for( var m = 2000; m <= 2017; m++){
document.write( ' <option value="+(m-1)+">' +m + ' </option>' )
}
</script>
</select>
<input type="submit" name="submit" value="Print Calendar">
<div class="month">
<ul>
<li class="prev">❮</li>
<li class="next">❯</li>
<li>
September<br>
<span style="font-size:18px">2017</span>
</li>
</ul>
</div>
<ul class="weekdays">
<li>Zo</li>
<li>Ma</li>
<li>Di</li>
<li>Wo</li>
<li>Do</li>
<li>Vr</li>
li>Za</li>
</ul>
<ul class="days">
<li>26</li>
<li>27</li>
<li>28</li>
<li>29</li>
<li>30</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
<li>27</li>
<li>28</li>
<li>29</li>
<li>30</li>
</ul>
<script>
var d = new Date("October 13, 2014 11:13:00");
document.getElementById("demo").innerHTML = d;
</script>
</body>
</html>
