| 1 |
(function () { |
| 2 |
var MONTHS = ['January','February','March','April','May','June','July','August','September','October','November','December']; |
| 3 |
var DAYS_MON = ['Mon','Tue','Wed','Thu','Fri','Sat','Sun']; |
| 4 |
var DAYS_SUN = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat']; |
| 5 |
|
| 6 |
function pad(n) { return String(n).padStart(2, '0'); } |
| 7 |
|
| 8 |
function dateStr(y, m, d) { return y + '-' + pad(m + 1) + '-' + pad(d); } |
| 9 |
|
| 10 |
function buildCalendar(wrap, events, year, month, opts) { |
| 11 |
wrap.innerHTML = ''; |
| 12 |
|
| 13 |
/* Index events by date */ |
| 14 |
var byDate = {}; |
| 15 |
events.forEach(function (ev) { (byDate[ev.date] = byDate[ev.date] || []).push(ev); }); |
| 16 |
|
| 17 |
var today = new Date(); |
| 18 |
var firstDay = new Date(year, month, 1).getDay(); |
| 19 |
if (opts.firstMonday) firstDay = (firstDay + 6) % 7; |
| 20 |
var daysInMonth = new Date(year, month + 1, 0).getDate(); |
| 21 |
var prevDays = new Date(year, month, 0).getDate(); |
| 22 |
|
| 23 |
var dayNames = opts.firstMonday ? DAYS_MON : DAYS_SUN; |
| 24 |
|
| 25 |
/* Day name row */ |
| 26 |
var nameRow = document.createElement('div'); |
| 27 |
nameRow.className = 'bkbg-cal-day-names'; |
| 28 |
dayNames.forEach(function (n) { |
| 29 |
var d = document.createElement('div'); |
| 30 |
d.className = 'bkbg-cal-day-name'; |
| 31 |
d.textContent = n; |
| 32 |
nameRow.appendChild(d); |
| 33 |
}); |
| 34 |
wrap.appendChild(nameRow); |
| 35 |
|
| 36 |
/* Day cells grid */ |
| 37 |
var grid = document.createElement('div'); |
| 38 |
grid.className = 'bkbg-cal-days'; |
| 39 |
|
| 40 |
var cells = []; |
| 41 |
for (var p = firstDay - 1; p >= 0; p--) { |
| 42 |
cells.push({ day: prevDays - p, current: false, ds: '' }); |
| 43 |
} |
| 44 |
for (var d = 1; d <= daysInMonth; d++) { |
| 45 |
cells.push({ day: d, current: true, ds: dateStr(year, month, d) }); |
| 46 |
} |
| 47 |
var remaining = 42 - cells.length; |
| 48 |
for (var n = 1; n <= remaining; n++) { |
| 49 |
cells.push({ day: n, current: false, ds: '' }); |
| 50 |
} |
| 51 |
|
| 52 |
cells.forEach(function (cell) { |
| 53 |
var div = document.createElement('div'); |
| 54 |
div.className = 'bkbg-cal-day'; |
| 55 |
if (!cell.current) div.classList.add('is-other-month'); |
| 56 |
|
| 57 |
var isToday = cell.current && opts.highlightToday |
| 58 |
&& today.getFullYear() === year |
| 59 |
&& today.getMonth() === month |
| 60 |
&& today.getDate() === cell.day; |
| 61 |
if (isToday) div.classList.add('is-today'); |
| 62 |
|
| 63 |
var numEl = document.createElement('div'); |
| 64 |
numEl.className = 'bkbg-cal-day-number'; |
| 65 |
numEl.textContent = cell.day; |
| 66 |
div.appendChild(numEl); |
| 67 |
|
| 68 |
var cellEvents = cell.ds ? (byDate[cell.ds] || []) : []; |
| 69 |
cellEvents.slice(0, 3).forEach(function (ev) { |
| 70 |
var pill = document.createElement(ev.url ? 'a' : 'div'); |
| 71 |
pill.className = 'bkbg-cal-event-pill'; |
| 72 |
pill.textContent = ev.title; |
| 73 |
pill.style.background = ev.color || ''; |
| 74 |
if (ev.url) { pill.href = ev.url; pill.target = '_blank'; pill.rel = 'noopener'; } |
| 75 |
div.appendChild(pill); |
| 76 |
}); |
| 77 |
if (cellEvents.length > 3) { |
| 78 |
var more = document.createElement('div'); |
| 79 |
more.className = 'bkbg-cal-more'; |
| 80 |
more.textContent = '+' + (cellEvents.length - 3) + ' more'; |
| 81 |
div.appendChild(more); |
| 82 |
} |
| 83 |
grid.appendChild(div); |
| 84 |
}); |
| 85 |
wrap.appendChild(grid); |
| 86 |
} |
| 87 |
|
| 88 |
function buildEventList(listEl, events) { |
| 89 |
listEl.innerHTML = ''; |
| 90 |
var head = document.createElement('p'); |
| 91 |
head.className = 'bkbg-cal-list-heading'; |
| 92 |
head.textContent = 'Upcoming Events'; |
| 93 |
listEl.appendChild(head); |
| 94 |
|
| 95 |
var sorted = events.slice().sort(function (a, b) { return a.date > b.date ? 1 : -1; }).slice(0, 8); |
| 96 |
sorted.forEach(function (ev) { |
| 97 |
var item = document.createElement('div'); |
| 98 |
item.className = 'bkbg-cal-event-item'; |
| 99 |
|
| 100 |
var stripe = document.createElement('div'); |
| 101 |
stripe.className = 'bkbg-cal-event-stripe'; |
| 102 |
stripe.style.background = ev.color || ''; |
| 103 |
item.appendChild(stripe); |
| 104 |
|
| 105 |
var info = document.createElement('div'); |
| 106 |
info.className = 'bkbg-cal-event-info'; |
| 107 |
|
| 108 |
var title = document.createElement('p'); |
| 109 |
title.className = 'bkbg-cal-event-title'; |
| 110 |
title.textContent = ev.title; |
| 111 |
info.appendChild(title); |
| 112 |
|
| 113 |
if (ev.category) { |
| 114 |
var cat = document.createElement('p'); |
| 115 |
cat.className = 'bkbg-cal-event-cat'; |
| 116 |
cat.textContent = ev.category; |
| 117 |
info.appendChild(cat); |
| 118 |
} |
| 119 |
item.appendChild(info); |
| 120 |
|
| 121 |
var date = document.createElement('span'); |
| 122 |
date.className = 'bkbg-cal-event-date'; |
| 123 |
date.textContent = ev.date; |
| 124 |
item.appendChild(date); |
| 125 |
|
| 126 |
if (ev.url) { |
| 127 |
item.style.cursor = 'pointer'; |
| 128 |
item.addEventListener('click', function () { window.open(ev.url, '_blank', 'noopener'); }); |
| 129 |
} |
| 130 |
listEl.appendChild(item); |
| 131 |
}); |
| 132 |
} |
| 133 |
|
| 134 |
function initCalendar(wrapper) { |
| 135 |
if (wrapper.dataset.initialized) return; |
| 136 |
wrapper.dataset.initialized = '1'; |
| 137 |
|
| 138 |
var gridWrap = wrapper.querySelector('.bkbg-cal-grid-wrap'); |
| 139 |
var listEl = wrapper.querySelector('.bkbg-cal-event-list'); |
| 140 |
var navEl = wrapper.querySelector('.bkbg-cal-nav'); |
| 141 |
var labelEl = wrapper.querySelector('.bkbg-cal-month-label'); |
| 142 |
var prevBtn = wrapper.querySelector('.bkbg-cal-prev'); |
| 143 |
var nextBtn = wrapper.querySelector('.bkbg-cal-next'); |
| 144 |
|
| 145 |
if (!gridWrap) return; |
| 146 |
|
| 147 |
var events = []; |
| 148 |
try { events = JSON.parse(gridWrap.getAttribute('data-events') || '[]'); } catch (e) {} |
| 149 |
var firstMonday = gridWrap.getAttribute('data-first-monday') === '1'; |
| 150 |
var highlightToday = gridWrap.getAttribute('data-highlight-today') === '1'; |
| 151 |
var showYear = gridWrap.getAttribute('data-show-year') === '1'; |
| 152 |
|
| 153 |
var now = new Date(); |
| 154 |
var curYear = now.getFullYear(); |
| 155 |
var curMonth = now.getMonth(); |
| 156 |
|
| 157 |
function render() { |
| 158 |
buildCalendar(gridWrap, events, curYear, curMonth, { firstMonday: firstMonday, highlightToday: highlightToday }); |
| 159 |
if (labelEl) labelEl.textContent = MONTHS[curMonth] + (showYear ? ' ' + curYear : ''); |
| 160 |
if (listEl) buildEventList(listEl, events); |
| 161 |
} |
| 162 |
|
| 163 |
if (prevBtn) prevBtn.addEventListener('click', function () { |
| 164 |
curMonth--; if (curMonth < 0) { curMonth = 11; curYear--; } render(); |
| 165 |
}); |
| 166 |
if (nextBtn) nextBtn.addEventListener('click', function () { |
| 167 |
curMonth++; if (curMonth > 11) { curMonth = 0; curYear++; } render(); |
| 168 |
}); |
| 169 |
|
| 170 |
render(); |
| 171 |
} |
| 172 |
|
| 173 |
function init() { |
| 174 |
document.querySelectorAll('.bkbg-cal-wrapper').forEach(initCalendar); |
| 175 |
} |
| 176 |
|
| 177 |
if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', init); } else { init(); } |
| 178 |
}()); |
| 179 |
|
