|
|
Line 3: |
Line 3: |
| <script type="text/javascript"> | | <script type="text/javascript"> |
| | | |
− | function init() {
| |
| | | |
− | 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="init();"> | | <body onload="init();"> |