Calendar using html css and javascript

Question

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.

What is your question? Because anyway you would not avoid for loop. — Flasz
– Flasz, Commented Nov 3, 2014 at 12:54
My question is what to write instead of "code for creating day-boxes" and if my css-code will work. — user2982233
– user2982233, Commented Nov 3, 2014 at 13:02
fullcalendar.io is one of the calendars i found, and its superbig, i want to build it myself, i need to understand it all cause im not going to use it as a ordinary calendar. — user2982233
– user2982233, Commented Nov 3, 2014 at 13:03
Please never use the same id for multiple elements. Browsers will go crazy. If you want to group multiple elements and adress them via css use a class. — Markai
– Markai, Commented Nov 3, 2014 at 13:07

Edi G. · Accepted Answer · 2014-11-03 13:10:41Z

1

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>';   
}

edited Nov 3, 2014 at 13:10

answered Nov 3, 2014 at 13:05

Edi G.

2,4207 gold badges25 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user2982233 Over a year ago

This was what i was looking for, it doesnt work perfectly but i think that is because of my other code i didnt show. Thank you very much

user2982233 Over a year ago

Again, thank you very much! I got it work exactly like i wanted now and i changed the css as you suggested.

Edi G. Over a year ago

You're welcome. Have fun in the world of java-script :)

kki3908050 · Accepted Answer · 2014-11-03 13:01:12Z

1

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

answered Nov 3, 2014 at 13:01

kki3908050

1652 silver badges9 bronze badges

Collectives™ on Stack Overflow

Calendar using html css and javascript

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related