root
664 lines
21 KiB
PHP
664 lines
21 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Teacher Calendar</title>
|
|
<style>
|
|
:root {
|
|
--bg: #f4efe6;
|
|
--panel: #fffaf2;
|
|
--panel-strong: #f0e3ce;
|
|
--ink: #1d2a39;
|
|
--muted: #6b7280;
|
|
--accent: #0f766e;
|
|
--accent-soft: #d4f4ef;
|
|
--line: #d8ccb8;
|
|
--shadow: 0 18px 45px rgba(38, 32, 24, 0.12);
|
|
--today: #f59e0b;
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
body {
|
|
margin: 0;
|
|
min-height: 100vh;
|
|
font-family: Georgia, "Times New Roman", serif;
|
|
color: var(--ink);
|
|
background:
|
|
radial-gradient(circle at top left, rgba(15, 118, 110, 0.15), transparent 35%),
|
|
radial-gradient(circle at top right, rgba(245, 158, 11, 0.18), transparent 28%),
|
|
linear-gradient(180deg, #f7f1e7 0%, #efe7da 100%);
|
|
}
|
|
|
|
.shell {
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
padding: 32px 20px 48px;
|
|
}
|
|
|
|
.hero {
|
|
display: grid;
|
|
gap: 18px;
|
|
grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.9fr);
|
|
align-items: end;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.hero-card,
|
|
.summary-card,
|
|
.calendar-card,
|
|
.agenda-card {
|
|
background: rgba(255, 250, 242, 0.92);
|
|
border: 1px solid rgba(216, 204, 184, 0.9);
|
|
box-shadow: var(--shadow);
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.hero-card {
|
|
border-radius: 28px;
|
|
padding: 28px;
|
|
}
|
|
|
|
.eyebrow {
|
|
font-size: 12px;
|
|
letter-spacing: 0.18em;
|
|
text-transform: uppercase;
|
|
color: var(--accent);
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
h1 {
|
|
margin: 0 0 8px;
|
|
font-size: clamp(2rem, 4vw, 3.6rem);
|
|
line-height: 0.94;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.hero p,
|
|
.summary-meta,
|
|
.agenda-empty,
|
|
.legend span,
|
|
.calendar-note,
|
|
.month-caption {
|
|
color: var(--muted);
|
|
}
|
|
|
|
.summary-card {
|
|
border-radius: 24px;
|
|
padding: 22px;
|
|
}
|
|
|
|
.summary-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 12px;
|
|
margin-top: 14px;
|
|
}
|
|
|
|
.stat {
|
|
background: var(--panel-strong);
|
|
border-radius: 18px;
|
|
padding: 14px;
|
|
}
|
|
|
|
.stat strong {
|
|
display: block;
|
|
font-size: 1.8rem;
|
|
line-height: 1;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.layout {
|
|
display: grid;
|
|
gap: 22px;
|
|
grid-template-columns: minmax(0, 1.65fr) minmax(300px, 0.95fr);
|
|
}
|
|
|
|
.calendar-card,
|
|
.agenda-card {
|
|
border-radius: 28px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.calendar-header,
|
|
.agenda-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 14px;
|
|
padding: 22px 24px;
|
|
border-bottom: 1px solid var(--line);
|
|
background: rgba(240, 227, 206, 0.45);
|
|
}
|
|
|
|
.calendar-header h2,
|
|
.agenda-header h2 {
|
|
margin: 0;
|
|
font-size: 1.35rem;
|
|
}
|
|
|
|
.calendar-toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
button {
|
|
appearance: none;
|
|
border: 0;
|
|
border-radius: 999px;
|
|
cursor: pointer;
|
|
font: inherit;
|
|
}
|
|
|
|
.nav-button,
|
|
.today-button {
|
|
padding: 10px 14px;
|
|
background: #e8ddcb;
|
|
color: var(--ink);
|
|
}
|
|
|
|
.today-button {
|
|
background: var(--accent);
|
|
color: #fff;
|
|
}
|
|
|
|
.calendar-body {
|
|
padding: 18px 18px 22px;
|
|
}
|
|
|
|
.weekdays,
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(7, minmax(0, 1fr));
|
|
gap: 10px;
|
|
}
|
|
|
|
.weekdays {
|
|
padding: 0 6px 12px;
|
|
font-size: 0.82rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.day {
|
|
min-height: 132px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
padding: 12px;
|
|
border-radius: 20px;
|
|
border: 1px solid rgba(216, 204, 184, 0.85);
|
|
background: rgba(255, 255, 255, 0.74);
|
|
transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
|
|
}
|
|
|
|
.day:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 14px 28px rgba(54, 46, 33, 0.08);
|
|
}
|
|
|
|
.day.muted {
|
|
opacity: 0.45;
|
|
}
|
|
|
|
.day.today {
|
|
border-color: rgba(245, 158, 11, 0.9);
|
|
box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.2);
|
|
}
|
|
|
|
.day.selected {
|
|
border-color: var(--accent);
|
|
box-shadow: inset 0 0 0 1px rgba(15, 118, 110, 0.22);
|
|
background: #fffdfa;
|
|
}
|
|
|
|
.day-number {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 34px;
|
|
height: 34px;
|
|
border-radius: 50%;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.today .day-number {
|
|
background: rgba(245, 158, 11, 0.18);
|
|
color: #9a5600;
|
|
}
|
|
|
|
.event-stack {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
|
|
.event-pill {
|
|
display: block;
|
|
padding: 7px 9px;
|
|
border-radius: 12px;
|
|
font-size: 0.8rem;
|
|
line-height: 1.2;
|
|
color: #12202f;
|
|
background: #dbe7f5;
|
|
border-left: 4px solid #8aa6cf;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.event-pill.more {
|
|
background: var(--panel-strong);
|
|
border-left-color: #9c8360;
|
|
color: #5c4730;
|
|
}
|
|
|
|
.legend {
|
|
display: flex;
|
|
gap: 14px;
|
|
flex-wrap: wrap;
|
|
margin-top: 16px;
|
|
padding: 0 8px;
|
|
}
|
|
|
|
.legend-item {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.legend-swatch {
|
|
width: 14px;
|
|
height: 14px;
|
|
border-radius: 999px;
|
|
border: 1px solid rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
.agenda-body {
|
|
padding: 20px;
|
|
}
|
|
|
|
.agenda-date {
|
|
margin: 0 0 14px;
|
|
font-size: 1.05rem;
|
|
}
|
|
|
|
.agenda-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 14px;
|
|
}
|
|
|
|
.agenda-item {
|
|
padding: 16px;
|
|
border-radius: 18px;
|
|
border: 1px solid rgba(216, 204, 184, 0.85);
|
|
background: rgba(255, 255, 255, 0.7);
|
|
}
|
|
|
|
.agenda-item h3 {
|
|
margin: 0 0 8px;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.agenda-item p {
|
|
margin: 0;
|
|
color: var(--muted);
|
|
white-space: pre-line;
|
|
}
|
|
|
|
.agenda-tag {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 0.72rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
margin-bottom: 10px;
|
|
color: #5e5c52;
|
|
}
|
|
|
|
.agenda-dot {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 999px;
|
|
background: #8aa6cf;
|
|
}
|
|
|
|
.calendar-note {
|
|
margin-top: 10px;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
@media (max-width: 1100px) {
|
|
.hero,
|
|
.layout {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 760px) {
|
|
.shell {
|
|
padding: 16px 12px 28px;
|
|
}
|
|
|
|
.weekdays,
|
|
.grid {
|
|
gap: 6px;
|
|
}
|
|
|
|
.day {
|
|
min-height: 108px;
|
|
padding: 10px 8px;
|
|
border-radius: 16px;
|
|
}
|
|
|
|
.event-pill {
|
|
padding: 6px 7px;
|
|
font-size: 0.72rem;
|
|
}
|
|
|
|
.summary-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.calendar-header,
|
|
.agenda-header {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="shell">
|
|
<section class="hero">
|
|
<div class="hero-card hero">
|
|
<div>
|
|
<div class="eyebrow">Teacher Portal</div>
|
|
<h1>School Calendar</h1>
|
|
<p>Monthly view for teacher-visible events, no-school days, and staff-only items.</p>
|
|
</div>
|
|
</div>
|
|
<aside class="summary-card">
|
|
<div class="eyebrow">Current Scope</div>
|
|
<div class="summary-meta">School Year {{ $schoolYear }} · Default Semester {{ $defaultSemester }}</div>
|
|
<div class="summary-grid">
|
|
<div class="stat">
|
|
<strong id="stat-total">0</strong>
|
|
<span>Total events</span>
|
|
</div>
|
|
<div class="stat">
|
|
<strong id="stat-no-school">0</strong>
|
|
<span>No-school days</span>
|
|
</div>
|
|
<div class="stat">
|
|
<strong id="stat-staff">0</strong>
|
|
<span>Staff-only events</span>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
</section>
|
|
|
|
<section class="layout">
|
|
<article class="calendar-card">
|
|
<div class="calendar-header">
|
|
<div>
|
|
<h2 id="month-label">Month</h2>
|
|
<div class="month-caption" id="month-caption">Teacher schedule overview</div>
|
|
</div>
|
|
<div class="calendar-toolbar">
|
|
<button class="nav-button" id="prev-month" type="button">Prev</button>
|
|
<button class="today-button" id="jump-today" type="button">Today</button>
|
|
<button class="nav-button" id="next-month" type="button">Next</button>
|
|
</div>
|
|
</div>
|
|
<div class="calendar-body">
|
|
<div class="weekdays">
|
|
<div>Sun</div>
|
|
<div>Mon</div>
|
|
<div>Tue</div>
|
|
<div>Wed</div>
|
|
<div>Thu</div>
|
|
<div>Fri</div>
|
|
<div>Sat</div>
|
|
</div>
|
|
<div class="grid" id="calendar-grid"></div>
|
|
<div class="legend">
|
|
<div class="legend-item"><span class="legend-swatch" style="background:#dbe7f5"></span><span>General event</span></div>
|
|
<div class="legend-item"><span class="legend-swatch" style="background:#ffc107"></span><span>No school</span></div>
|
|
<div class="legend-item"><span class="legend-swatch" style="background:#28a745"></span><span>Staff only</span></div>
|
|
<div class="legend-item"><span class="legend-swatch" style="background:#6f42c1"></span><span>Meeting</span></div>
|
|
</div>
|
|
<div class="calendar-note">Select any day to inspect the event list for that date.</div>
|
|
</div>
|
|
</article>
|
|
|
|
<aside class="agenda-card">
|
|
<div class="agenda-header">
|
|
<h2>Day Agenda</h2>
|
|
<div class="month-caption" id="agenda-count">0 events</div>
|
|
</div>
|
|
<div class="agenda-body">
|
|
<h3 class="agenda-date" id="agenda-date"></h3>
|
|
<div class="agenda-list" id="agenda-list"></div>
|
|
<p class="agenda-empty" id="agenda-empty">No events scheduled for this day.</p>
|
|
</div>
|
|
</aside>
|
|
</section>
|
|
</div>
|
|
|
|
<script>
|
|
const rawEvents = @json($events);
|
|
|
|
const events = rawEvents.map((event) => {
|
|
const start = String(event.start || '').slice(0, 10);
|
|
return {
|
|
...event,
|
|
start,
|
|
backgroundColor: event.backgroundColor || '#8aa6cf',
|
|
};
|
|
});
|
|
|
|
const eventsByDate = events.reduce((map, event) => {
|
|
if (!event.start) {
|
|
return map;
|
|
}
|
|
if (!map[event.start]) {
|
|
map[event.start] = [];
|
|
}
|
|
map[event.start].push(event);
|
|
return map;
|
|
}, {});
|
|
|
|
Object.values(eventsByDate).forEach((list) => {
|
|
list.sort((left, right) => String(left.title || '').localeCompare(String(right.title || '')));
|
|
});
|
|
|
|
const monthLabel = document.getElementById('month-label');
|
|
const monthCaption = document.getElementById('month-caption');
|
|
const calendarGrid = document.getElementById('calendar-grid');
|
|
const agendaDate = document.getElementById('agenda-date');
|
|
const agendaList = document.getElementById('agenda-list');
|
|
const agendaEmpty = document.getElementById('agenda-empty');
|
|
const agendaCount = document.getElementById('agenda-count');
|
|
const today = new Date();
|
|
const todayKey = toDateKey(today);
|
|
|
|
const availableDates = Object.keys(eventsByDate).sort();
|
|
const initialDate = availableDates.includes(todayKey) ? todayKey : (availableDates[0] || todayKey);
|
|
|
|
let selectedDate = initialDate;
|
|
let visibleMonth = new Date(initialDate + 'T12:00:00');
|
|
visibleMonth.setDate(1);
|
|
|
|
document.getElementById('prev-month').addEventListener('click', () => {
|
|
visibleMonth = new Date(visibleMonth.getFullYear(), visibleMonth.getMonth() - 1, 1);
|
|
renderCalendar();
|
|
});
|
|
|
|
document.getElementById('next-month').addEventListener('click', () => {
|
|
visibleMonth = new Date(visibleMonth.getFullYear(), visibleMonth.getMonth() + 1, 1);
|
|
renderCalendar();
|
|
});
|
|
|
|
document.getElementById('jump-today').addEventListener('click', () => {
|
|
selectedDate = todayKey;
|
|
visibleMonth = new Date(today.getFullYear(), today.getMonth(), 1);
|
|
renderCalendar();
|
|
renderAgenda();
|
|
});
|
|
|
|
function renderCalendar() {
|
|
calendarGrid.innerHTML = '';
|
|
|
|
const year = visibleMonth.getFullYear();
|
|
const month = visibleMonth.getMonth();
|
|
const firstDay = new Date(year, month, 1);
|
|
const lastDay = new Date(year, month + 1, 0);
|
|
const leading = firstDay.getDay();
|
|
const totalCells = Math.ceil((leading + lastDay.getDate()) / 7) * 7;
|
|
const startDate = new Date(year, month, 1 - leading);
|
|
|
|
monthLabel.textContent = new Intl.DateTimeFormat('en-US', { month: 'long', year: 'numeric' }).format(firstDay);
|
|
monthCaption.textContent = `${countMonthEvents(year, month)} event${countMonthEvents(year, month) === 1 ? '' : 's'} in view`;
|
|
|
|
for (let i = 0; i < totalCells; i += 1) {
|
|
const cellDate = new Date(startDate.getFullYear(), startDate.getMonth(), startDate.getDate() + i);
|
|
const dateKey = toDateKey(cellDate);
|
|
const dayEvents = eventsByDate[dateKey] || [];
|
|
const isCurrentMonth = cellDate.getMonth() === month;
|
|
const isToday = dateKey === todayKey;
|
|
const isSelected = dateKey === selectedDate;
|
|
|
|
const cell = document.createElement('button');
|
|
cell.type = 'button';
|
|
cell.className = `day${isCurrentMonth ? '' : ' muted'}${isToday ? ' today' : ''}${isSelected ? ' selected' : ''}`;
|
|
cell.addEventListener('click', () => {
|
|
selectedDate = dateKey;
|
|
if (!isCurrentMonth) {
|
|
visibleMonth = new Date(cellDate.getFullYear(), cellDate.getMonth(), 1);
|
|
}
|
|
renderCalendar();
|
|
renderAgenda();
|
|
});
|
|
|
|
const number = document.createElement('span');
|
|
number.className = 'day-number';
|
|
number.textContent = String(cellDate.getDate());
|
|
cell.appendChild(number);
|
|
|
|
const stack = document.createElement('div');
|
|
stack.className = 'event-stack';
|
|
|
|
dayEvents.slice(0, 3).forEach((event) => {
|
|
const pill = document.createElement('span');
|
|
pill.className = 'event-pill';
|
|
pill.textContent = event.title || 'Untitled';
|
|
pill.style.borderLeftColor = event.backgroundColor || '#8aa6cf';
|
|
pill.style.background = withAlpha(event.backgroundColor || '#dbe7f5', 0.18);
|
|
stack.appendChild(pill);
|
|
});
|
|
|
|
if (dayEvents.length > 3) {
|
|
const more = document.createElement('span');
|
|
more.className = 'event-pill more';
|
|
more.textContent = `+${dayEvents.length - 3} more`;
|
|
stack.appendChild(more);
|
|
}
|
|
|
|
cell.appendChild(stack);
|
|
calendarGrid.appendChild(cell);
|
|
}
|
|
}
|
|
|
|
function renderAgenda() {
|
|
const dayEvents = eventsByDate[selectedDate] || [];
|
|
agendaDate.textContent = new Intl.DateTimeFormat('en-US', {
|
|
weekday: 'long',
|
|
month: 'long',
|
|
day: 'numeric',
|
|
year: 'numeric',
|
|
}).format(new Date(selectedDate + 'T12:00:00'));
|
|
agendaList.innerHTML = '';
|
|
agendaCount.textContent = `${dayEvents.length} event${dayEvents.length === 1 ? '' : 's'}`;
|
|
agendaEmpty.style.display = dayEvents.length === 0 ? 'block' : 'none';
|
|
|
|
dayEvents.forEach((event) => {
|
|
const item = document.createElement('article');
|
|
item.className = 'agenda-item';
|
|
|
|
const tag = document.createElement('div');
|
|
tag.className = 'agenda-tag';
|
|
const dot = document.createElement('span');
|
|
dot.className = 'agenda-dot';
|
|
dot.style.background = event.backgroundColor || '#8aa6cf';
|
|
tag.appendChild(dot);
|
|
tag.append(document.createTextNode(buildTagLabel(event)));
|
|
|
|
const title = document.createElement('h3');
|
|
title.textContent = event.title || 'Untitled';
|
|
|
|
const description = document.createElement('p');
|
|
description.textContent = event.description || 'No extra details provided.';
|
|
|
|
item.appendChild(tag);
|
|
item.appendChild(title);
|
|
item.appendChild(description);
|
|
agendaList.appendChild(item);
|
|
});
|
|
}
|
|
|
|
function buildTagLabel(event) {
|
|
const props = event.extendedProps || {};
|
|
if (String(event.id || '').startsWith('pm-')) {
|
|
return 'Meeting';
|
|
}
|
|
if (props.no_school) {
|
|
return 'No School';
|
|
}
|
|
if (props.notify_teacher && props.notify_admin && !props.notify_parent) {
|
|
return 'Staff Only';
|
|
}
|
|
return 'School Event';
|
|
}
|
|
|
|
function countMonthEvents(year, month) {
|
|
return events.filter((event) => {
|
|
const date = new Date(event.start + 'T12:00:00');
|
|
return date.getFullYear() === year && date.getMonth() === month;
|
|
}).length;
|
|
}
|
|
|
|
function toDateKey(date) {
|
|
const year = date.getFullYear();
|
|
const month = String(date.getMonth() + 1).padStart(2, '0');
|
|
const day = String(date.getDate()).padStart(2, '0');
|
|
return `${year}-${month}-${day}`;
|
|
}
|
|
|
|
function withAlpha(hex, alpha) {
|
|
const normalized = hex.replace('#', '');
|
|
if (normalized.length !== 6) {
|
|
return 'rgba(219, 231, 245, 0.18)';
|
|
}
|
|
const r = parseInt(normalized.slice(0, 2), 16);
|
|
const g = parseInt(normalized.slice(2, 4), 16);
|
|
const b = parseInt(normalized.slice(4, 6), 16);
|
|
return `rgba(${r}, ${g}, ${b}, ${alpha})`;
|
|
}
|
|
|
|
document.getElementById('stat-total').textContent = String(events.length);
|
|
document.getElementById('stat-no-school').textContent = String(events.filter((event) => event.extendedProps && event.extendedProps.no_school).length);
|
|
document.getElementById('stat-staff').textContent = String(events.filter((event) => {
|
|
const props = event.extendedProps || {};
|
|
return props.notify_teacher && props.notify_admin && !props.notify_parent;
|
|
}).length);
|
|
|
|
renderCalendar();
|
|
renderAgenda();
|
|
</script>
|
|
</body>
|
|
</html>
|