CODEWITHSUNDEEP
javascripthtmlcsscalendar
user2982233
user2982233

Reputation: 3

Calendar using html css and javascript

I have been trying to do a calendar using HTML, css and javascript. I have little experience with all three of them.

I havent got it to work with javascript, so sofar i have just created it with html+css and its a really ugly solution:

css:

#day {
    float: left;
    border: 1px solid black;
    width: 85px;
    height: 85px;
    padding: 5px;
    margin: 5px;
    border-radius: 18px;
    }

html:

<div id="content">
<h1>November</h1>
<br>
<div id="day">
1
</div>
<div id="day">
2
</div>
<div id="day">
3
</div>
<div id="day">
4
</div>
<div id="day">
5
</div>
<div id="day">
6
</div>
<div id="day">
7
</div>
<br>
<div id="day">
8
</div>
<div id="day">
9
</div>
<div id="day">
10
</div>
<div id="day">
11
</div>
<div id="day">
12
</div>
<div id="day">
13
</div>
<div id="day">
14
</div>
<br>
<div id="day">
15
</div>
<div id="day">
16
</div>
<div id="day">
17
</div>
<div id="day">
18
</div>
<div id="day">
19
</div>
<div id="day">
20
</div>
<div id="day">
21
</div>
<br>
<div id="day">
22
</div>
<div id="day">
23
</div>
<div id="day">
24
</div>
<div id="day">
25
</div>
<div id="day">
26
</div>
<div id="day">
27
</div>
<div id="day">
28
</div>
<br>
<div id="day">
29
</div>
<div id="day">
30
</div>
</div>

I guess a for-loop would be good? something like:

for(i = 0; i<30;i++){
   "code for creating day-boxes"
}

I found a couple of calendars online, but they are all so complicated and i doesnt really do what i want it to do.

Upvotes: 0

Views: 3119

Answers (2)

Edi G.
Edi G.

Reputation: 2422

I'm not sure whether I get your question right, but shouldn't the following work?

var div = document.getElementById('content');

for(i = 1; i<=30;i++){
    div.innerHTML += '<div id=\'day\'>' + i + '</div>';   
}

Here is my jsfiddle-example

Note: dont use the same values (day) for id. Use the class attribute:

Change css to : 

.day {
    float: left;
    border: 1px solid black;
    width: 85px;
    height: 85px;
    padding: 5px;
    margin: 5px;
    border-radius: 18px;
}

And use this javascript code:

var div = document.getElementById('content');

for(i = 1; i<=30;i++){
    div.innerHTML += '<div class=\'day\'>' + i + '</div>';   
}

Upvotes: 1

kki3908050
kki3908050

Reputation: 165

For more advanced,stable and good documentation
http://jqueryui.com/datepicker/

Upvotes: 1

Related Questions