| js/letnice.jsView |
|---|
| 2 | 2 | { |
| 3 | 3 | let base = document.getElementById("center"); |
| 4 | 4 | |
| 5 | 5 | const monthNames = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ]; |
| 6 | | - const dayNames = [ "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday" ] |
| 6 | + const dayNames = [ "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday" ] |
| 7 | 7 | |
| 8 | 8 | let year = new Date().getFullYear(); |
| 9 | 9 | let month = 0; |
| 10 | + let today = new Date(year, new Date().getMonth(), new Date().getDate()-1, 0); |
| 10 | 11 | let style = "day"; |
| 11 | | - |
| 12 | | - function doHeader() |
| 13 | | - { |
| 14 | | - return `<div class="header"><p class="y">${year}</p><p class="p">${yearProgress(year) + "%"}</p></div>`; |
| 15 | | - } |
| 16 | 12 | |
| 17 | 13 | while(month < 12) |
| 18 | 14 | { |
| 19 | 15 | base.innerHTML += `<div class="month"> |
| 25 | 21 | </svg></div>` |
| 26 | 22 | month++ |
| 27 | 23 | } |
| 28 | 24 | |
| 25 | + function doHeader() |
| 26 | + { |
| 27 | + return `<div class="header"><p class="y">${year}</p><p class="p">${yearProgress(year) + "%"}</p></div>`; |
| 28 | + } |
| 29 | + |
| 30 | + function yearProgress(year) |
| 31 | + { |
| 32 | + progress = new Date() - new Date(year, 0, 1, 0); |
| 33 | + return ((progress/31536000000)*100).toFixed(2); |
| 34 | + } |
| 35 | + |
| 29 | 36 | function doLabels() |
| 30 | 37 | { |
| 31 | 38 | let html = ""; |
| 32 | 39 | let y = 0; |
| 33 | 40 | |
| 34 | 41 | for(i = 0; i < 7; i++) |
| 35 | 42 | { |
| 36 | | - y = (i * 14)+1; |
| 43 | + y = (i * 14) + 1; |
| 37 | 44 | html += `<text class="dayLabel" x="5" y='${y}' dy="10">${dayNames[i].substr(0,1)}</text>` |
| 38 | 45 | } |
| 39 | 46 | return html; |
| 40 | 47 | } |
| 45 | 52 | monthLength = new Date(year, month+1, 0).getDate(); |
| 46 | 53 | let date = 0; |
| 47 | 54 | let x = 0; |
| 48 | 55 | let y = 0; |
| 49 | | - let today = new Date(year, new Date().getMonth(), new Date().getDate(), 0); |
| 50 | | - |
| 56 | + |
| 51 | 57 | while(date < monthLength) |
| 52 | 58 | { |
| 53 | 59 | x += 14; |
| 54 | | - let week = 0 |
| 60 | + let week = 0; |
| 55 | 61 | |
| 56 | 62 | while(week < 7 && date != monthLength) |
| 57 | 63 | { |
| 58 | 64 | y = week * 14 + 2; |
| 59 | | - let day = new Date(year, month, date); |
| 60 | | - |
| 65 | + let day = new Date(year, month, date, 0); |
| 66 | + |
| 61 | 67 | if(day.getDay() != week) |
| 62 | 68 | { |
| 63 | 69 | style = "null"; |
| 64 | 70 | date-- |
| 70 | 76 | else if(day.getDay() == 5 || day.getDay() == 6) |
| 71 | 77 | { |
| 72 | 78 | style = "weekend"; |
| 73 | 79 | } |
| 80 | + else if(String(day) == String(today)) |
| 81 | + { |
| 82 | + style = "today"; |
| 83 | + } |
| 74 | 84 | else |
| 75 | 85 | { |
| 76 | 86 | style = "day"; |
| 77 | 87 | } |
| 78 | | - |
| 79 | | - html += `<rect class='${style}' x='${x}' y='${y}' title='${dayNames[week] + "_" + (date+1)}' width="12px" height="12px" rx="2" ry="2" onclick=""></rect>` |
| 88 | + html += `<rect class='${style}' x='${x}' y='${y}' title='${(date+1) == 0 ? "null" : dayNames[week] + " " + (date+1)}' width="12px" height="12px" rx="2" ry="2" onclick=""></rect>` |
| 80 | 89 | week++ |
| 81 | 90 | date++ |
| 82 | 91 | } |
| 83 | 92 | } |
| 84 | 93 | return html; |
| 85 | 94 | } |
| 86 | | - |
| 87 | | - function yearProgress(year) |
| 88 | | - { |
| 89 | | - progress = new Date() - new Date(year, 0, 1, 0); |
| 90 | | - return ((progress/31536000000)*100).toFixed(2); |
| 91 | | - } |
| 92 | 95 | } |