git ssb

1
function Year()
2
{
3
  let base = document.body;
4
5
  let year = new Date().getFullYear();
6
7
  const monthNames = [
8
    "January", "February", "March",
9
    "April", "May", "June",
10
    "July", "August", "September",
11
    "October", "November", "December"
12
  ];
13
  
14
  const dayNames = [
15
    "Sunday", "Monday", "Tuesday", "Wednesday",
16
    "Thursday", "Friday", "Saturday" 
17
  ]
18
19
  // let leap = new Date(year, 1, 29).getDate() === 29;
20
  // let days = leap ? 366 : 365;
21
  // let cell = parseInt((base.getBoundingClientRect().width - 52*2)/52);
22
23
  let week = 0;
24
  let count = 1;
25
  let month = 0;
26
27
  let style = "day";
28
29
  // make grid
30
  // while(week < 52)
31
  // {
32
  //   let x = parseInt(week * (cell+2));
33
  //   let day = 0;
34
  //   while(day < 7)
35
  //   {
36
  //     let y = parseInt(day * (cell+2))
37
  //     count++;
38
  //     base.innerHTML += `<rect class='day' x='${x}' y='${y}' title='${count}' width='${cell}' height='${cell}' rx="2" ry="2" onclick=""></rect>`;
39
  //     day += 1
40
  //   }
41
  //   week += 1
42
  // }
43
44
//  let i = 0;
45
//   while(month < 12)
46
//   {
47
//     let day = 0;
48
//     let x = 0;
49
//     while(day < new Date(year, month).monthDays(month))
50
//     {
51
//       if(i === 7)
52
//       {
53
//         week++
54
//         i=0
55
//       }
56
//       day++;
57
//       i++
58
//       count++;
59
//       let y = parseInt(count * (cell+1));
60
//       console.log(count + ", M" + month + ", W" + week + ", D" + day);
61
//       base.innerHTML += `<rect class='${CheckDay(year, month, day)}' x='${x}' y='${y}' title='${count}' width='${cell}' height='${cell}' rx="2" ry="2" onclick=""></rect>`;
62
//     }
63
//     month++;
64
//   }
65
// }
66
67
    //start container
68
    //add month text
69
      //mtwtfss
70
        //start comparing date with weekdays
71
          //start iterating through days from a match until month is over
72
73
74
  //let cell = parseInt((base.getBoundingClientRect().width - 52*2)/52)
75
76
  while(month < 12)
77
  {
78
    base.innerHTML += `
79
      <div class="month">
80
      <p class="m" x="" y='${month * 140}' dy="10">${monthNames[new Date(year, month).getMonth()].substr(0,2)}</p>
81
      <svg class="graph">
82
      ${dayLabels()}
83
      ${populateMonth(month)}
84
      </svg></div>`
85
    month++
86
  }
87
88
  function dayLabels()
89
  {
90
    let html = "";
91
    let y = 0;
92
93
    for(i = 0; i < 7; i++)
94
    {
95
      y = i * 20;
96
      html += `<text class="dayLabel" x="7" y='${y}' dy="10">${dayNames[i].substr(0,1)}</text>`
97
    }
98
    return html;
99
  }
100
101
  function populateMonth(m)
102
  {
103
    html = "";
104
    monthLength = new Date(year, m, 0).getDate();
105
    let day = 0;
106
    let x = 14;
107
    let y = 0;
108
109
    while(day < monthLength)
110
    {
111
      let i = 0
112
      x += 14;
113
      
114
      while(i < 7)
115
      {
116
        y = i * 14;
117
        
118
        //is it monday? is it tuesday? etc. instantiate null until day match then start for every day;
119
        
120
        html += `<rect class="day" x='${x}' y='${y}' title='${day}' width="12px" height="12px" rx="2" ry="2" onclick=""></rect>`
121
        i++
122
        day++
123
        count++
124
      }
125
    }
126
    return html;
127
  }
128
}
129
130
131
  
132
  // while(count <= days)
133
  // {
134
  //   t = new Date(year, month, count)
135
  //   let x = cell;
136
  //   let y = parseInt(count * (cell+2));
137
    
138
  //   console.log(t);
139
140
  //   base.innerHTML += `<rect class='${CheckDay(t)}' x='${x}' y='${y}' title='${count}' width='${cell}' height='${cell}' rx="2" ry="2" onclick=""></rect>`;
141
  //   count++;
142
  // }
143
144
  // function CheckDay(day)
145
  // {
146
  //   switch(day.getDay())
147
  //   {
148
  //     case 0:
149
  //       style = "weekend";
150
  //       break;
151
  //     case 6:
152
  //       style = "weekend";
153
  //       break;
154
  //     default:
155
  //       style = "day";
156
  //   }
157
  //   return style;
158
  // }