{ const cellHeight = width < 640 ? 7 : 9; const marginTop = width < 640 ? 8 : 10; const marginLeft = width < 640 ? 30 : 33; const height = cellHeight * numDays + marginTop; const innerWidth = width - marginLeft; const ctx = DOM.context2d(width, height); ctx.fillStyle = 'white'; ctx.fillRect(0, 0, width, height); // sunlight backgrounds function drawBg(day, date0, date1) { let date = minDate + secondsPerDay * day; if (date < dst) date -= secondsPerDay / 24; if (isNaN(date0)) date0 = date * 1000; if (isNaN(date1)) date1 = (date + secondsPerDay) * 1000; const date0offset = date0 / 1000 - date + (date0 < dst ? 3600 : 0); const date1offset = date1 / 1000 - date + (date1 < dst ? 3600 : 0); const x0 = Math.floor(date0offset / secondsPerDay * innerWidth) + 0.5; const x1 = Math.floor(date1offset / secondsPerDay * innerWidth) + 0.5; ctx.fillRect(marginLeft + x0, marginTop + day * cellHeight, x1 - x0, cellHeight); } for (let day = 0; day < numDays; day++) { ctx.fillStyle = '#74add1'; ctx.fillRect(marginLeft, marginTop + day * cellHeight, innerWidth, cellHeight); const times = suncalc.getTimes(new Date((minDate + secondsPerDay * (day + 0.5)) * 1000), 50.5, 30.5); ctx.fillStyle = '#abd9e9'; // drawBg(day, times.nightEnd, times.night); /* ctx.fillStyle = '#e0f3f8'; */ drawBg(day, times.dawn, times.dusk); ctx.fillStyle = '#ffffdd'; drawBg(day, times.sunrise, times.sunset); // ctx.fillStyle = '#FFE8A8'; drawBg(day, times.goldenHourEnd, times.goldenHour); } // sirens // ctx.fillStyle = 'rgba(255,0,0,0.1)'; // for (let i = 0; i < kyivSirens.length; i += 2) { // const date0 = kyivSirens[i]; // const date1 = kyivSirens[i + 1]; // const date0offset = date0 - minDate + (date0 < dst ? 3600 : 0); // const date1offset = date1 - minDate + (date1 < dst ? 3600 : 0); // const day0 = Math.floor(date0offset / secondsPerDay); // const day1 = Math.floor(date1offset / secondsPerDay); // const x0 = (date0offset % secondsPerDay) * innerWidth / secondsPerDay; // const x1 = (date1offset % secondsPerDay) * innerWidth / secondsPerDay; // const w = (date1 - date0) * innerWidth / secondsPerDay; // ctx.fillRect(marginLeft + x0, marginTop + day0 * cellHeight, w, cellHeight); // if (day1 !== day0) { // for (let d = day0 + 1; d < day1; d++) { // ctx.fillRect(marginLeft, marginTop + d * cellHeight, innerWidth, cellHeight); // } // ctx.fillRect(marginLeft, marginTop + day1 * cellHeight, x1, cellHeight); // } // } // blackout ranges ctx.fillStyle = 'black'; for (let i = 0; i < ranges.length; i += 2) { const date0 = ranges[i]; const date1 = ranges[i + 1]; const date0offset = date0 - minDate + (date0 < dst ? 0 : -3600); const date1offset = date1 - minDate + (date1 < dst ? 0 : -3600); const day0 = Math.floor(date0offset / secondsPerDay); const day1 = Math.floor(date1offset / secondsPerDay); const x0 = (date0offset % secondsPerDay) * innerWidth / secondsPerDay; const x1 = (date1offset % secondsPerDay) * innerWidth / secondsPerDay; const w = (date1 - date0) * innerWidth / secondsPerDay; ctx.fillRect(marginLeft + x0, marginTop + day0 * cellHeight, w, cellHeight); if (day1 !== day0) { for (let d = day0 + 1; d < day1; d++) { ctx.fillRect(marginLeft, marginTop + d * cellHeight, innerWidth, cellHeight); } ctx.fillRect(marginLeft, marginTop + day1 * cellHeight, x1, cellHeight); } } ctx.fillStyle = '#bbb'; const lx = ((dateUpdated - minDate) % secondsPerDay) * innerWidth / secondsPerDay; const lw = innerWidth - lx; ctx.fillRect(marginLeft + lx, marginTop + (numDays - 1) * cellHeight, lw, cellHeight); // vertical guides ctx.strokeStyle = 'rgba(0,0,0,0.20)'; ctx.beginPath(); for (let i = 1; i < 24; i++) { const x = Math.floor(i * innerWidth / 24) + 0.5; ctx.moveTo(marginLeft + x, 0); ctx.lineTo(marginLeft + x, height); } ctx.stroke(); // horizontal guides for (let i = 1; i < numDays; i++) { const date = new Date((minDate + secondsPerDay * (i + 0.5)) * 1000); const y = marginTop + i * cellHeight + 0.5; ctx.beginPath(); ctx.moveTo(2, y); ctx.lineTo(marginLeft + innerWidth, y); ctx.strokeStyle = date.getDate() === 1 ? 'rgba(0,0,0,1)' : (firstWeekDay + i) % 7 === 1 ? 'rgba(0,0,0,0.3)' : 'rgba(0,0,0,0.1)'; ctx.stroke(); } // labels ctx.fillStyle = 'black'; ctx.textAlign = 'left'; ctx.textBaseline = 'top'; ctx.font = `${width < 640 ? 8 : 9}px Helvetica, Arial, sans-serif`; for (let i = 0; i < 24; i++) { ctx.fillText(String(i), marginLeft + i * innerWidth / 24 + 2, 0); } ctx.textBaseline = 'middle'; for (let i = 0; i < numDays; i++) { const dateStr = new Date((minDate + (i + 0.5) * secondsPerDay) * 1000) .toLocaleString('en-US', {timeZone: 'Europe/Kiev', month: 'short', day: 'numeric'}); ctx.fillText(dateStr, 2, marginTop + Math.round((i + 0.5) * cellHeight) + 0.5); } return ctx.canvas; }