Difference between revisions of "Team:Tuebingen/Notebook"
| Line 3: | Line 3: | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
| − | function | + | function initCal() { |
| + | var cal = document.getElementById('calendar'); | ||
| + | cal.style.cssText='width:100%;width:100%;text-align:center;'; | ||
| + | var count = 29; | ||
| + | for (var w=0;w<3;w++) { | ||
| + | var month = document.createElement('div'); | ||
| + | month.style.cssText = 'width:21vw;height:15vw;display:inline-block;margin:5px;border:2px solid grey'; | ||
| + | var monthTitle = document.createElement('div'); | ||
| + | monthTitle.style.cssText = 'width:100%;height:3vw;font-size:1.8vw;line-height:1.8vw;padding:0.2vw;box-sizing:border-box;font-weight:bold;border-bottom:2px solid grey;'; | ||
| + | if (w==0) monthTitle.innerHTML = 'July'; | ||
| + | if (w==1) monthTitle.innerHTML = 'August'; | ||
| + | if (w==2) monthTitle.innerHTML = 'September'; | ||
| + | month.appendChild(monthTitle); | ||
| + | for (var i=0;i<4;i++) { | ||
| + | var week = document.createElement('div'); | ||
| + | week.style.cssText = 'width:21vw;height:3vw;cursor:pointer;'; | ||
| + | week.onmouseover = function() {if (this.id != 'calWeek'+currentDia) this.style.backgroundColor = 'rgba(0,0,0,0.2)';}; | ||
| + | week.onmouseout = function() {if (this.id != 'calWeek'+currentDia) this.style.backgroundColor = 'transparent';}; | ||
| + | week.id = 'calWeek'+(w*4+i); | ||
| + | week.num = (w*4+i); | ||
| + | for (var q=0;q<7;q++) { | ||
| + | var date = document.createElement('div'); | ||
| + | date.style.cssText = 'width:3vw;height:3vw;float:left;border:1px solid grey;overflow:hidden;color:grey;font-size:16px;text-align:center;box-sizing:border-box;'; | ||
| + | date.innerHTML = count; | ||
| + | if (w == 0) if (count == 30) count = 0; | ||
| + | if (w > 0) if (count == 31) count = 0; | ||
| + | count++; | ||
| + | week.appendChild(date); | ||
| + | week.onclick = function() {diashow(this.num-currentDia);}; | ||
| + | } | ||
| + | month.appendChild(week); | ||
| + | } | ||
| + | cal.appendChild(month); | ||
| + | } | ||
| + | |||
| + | dias = new Array(12); | ||
| + | currentDia = 0; | ||
| + | parent.diashow = function diashow(shift) { | ||
| + | nextDia = currentDia+shift; | ||
| + | if (nextDia < 0) nextDia = dias.length-1; | ||
| + | else if (nextDia >= dias.length) nextDia = 0; | ||
| + | document.getElementById('dia'+currentDia).style.opacity = '0'; | ||
| + | document.getElementById('dia'+currentDia).style.display = 'none'; | ||
| + | document.getElementById('dia'+currentDia).style.zIndex = '0'; | ||
| + | document.getElementById('dia'+nextDia).style.opacity = '1'; | ||
| + | document.getElementById('dia'+nextDia).style.display = 'block'; | ||
| + | document.getElementById('dia'+nextDia).style.zIndex = '1'; | ||
| + | document.getElementById('calWeek'+currentDia).style.backgroundColor = 'transparent'; | ||
| + | document.getElementById('calWeek'+nextDia).style.backgroundColor = 'rgba(0,255,0,0.2)'; | ||
| + | currentDia = nextDia; | ||
| + | } | ||
| + | |||
| + | document.getElementById('arrowRight').style.display = 'block'; | ||
| + | document.getElementById('arrowLeft').style.display = 'block'; | ||
| + | diashow(0); | ||
} | } | ||
</script> | </script> | ||
| − | <body onload=" | + | <body onload="initCal();"> |
<div id="calendar"></div> | <div id="calendar"></div> | ||
Revision as of 12:32, 18 September 2015
<
>
week1
week2