346 lines
9.0 KiB
HTML
346 lines
9.0 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="pt-br">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Focus Agenda</title>
|
||
|
||
<link rel="stylesheet" href="calendario.css">
|
||
|
||
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<!-- HEADER -->
|
||
<div id="header">
|
||
<h1 id="title">Focus Agenda</h1>
|
||
</div>
|
||
|
||
<!-- BARRA ESQUERDA -->
|
||
<div id="barraesquerda">
|
||
|
||
<!-- MINI CALENDÁRIO -->
|
||
<div id="calendario">
|
||
<div class="calendariotop">
|
||
<div id="mes"></div>
|
||
|
||
<div id="calendarseta">
|
||
<button class="ant">‹</button>
|
||
<button class="prox">›</button>
|
||
</div>
|
||
</div>
|
||
|
||
<table class="calendariodia">
|
||
<thead>
|
||
<tr>
|
||
<th>DOM</th>
|
||
<th>SEG</th>
|
||
<th>TER</th>
|
||
<th>QUA</th>
|
||
<th>QUI</th>
|
||
<th>SEX</th>
|
||
<th>SAB</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="dias"></tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<!-- AGENDA -->
|
||
<div id="agenda"></div>
|
||
|
||
<!-- FERIADOS -->
|
||
<div id="feriados"></div>
|
||
|
||
</div>
|
||
|
||
<!-- CONTEÚDO PRINCIPAL -->
|
||
<div class="main">
|
||
|
||
<!-- TOPBAR (igual ao print) -->
|
||
<div class="topbar">
|
||
<h1>Calendario</h1>
|
||
|
||
<div class="user-area">
|
||
<img src="imagens/sino.png" class="icone-img" alt="Notificações">
|
||
|
||
<div class="perfil">
|
||
<div class="avatar"></div>
|
||
<div class="info">
|
||
<span class="nome">Usuario</span>
|
||
<span class="cargo">Admin</span>
|
||
</div>
|
||
</div>
|
||
|
||
<img src="imagens/engrenagem.png" class="icone-img" alt="Configurações">
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- MÊS -->
|
||
<div class="calendar-header">
|
||
|
||
<!-- ESQUERDA (SETAS + MÊS) -->
|
||
<div class="mes-nav">
|
||
<button class="seta antGrande">‹</button>
|
||
<span class="titulo-mes">Janeiro, 2025</span>
|
||
<button class="seta proxGrande">›</button>
|
||
</div>
|
||
|
||
<!-- DIREITA (DIA / SEMANA / MÊS) -->
|
||
<div class="view-switch">
|
||
<button>Dia</button>
|
||
<button>Semana</button>
|
||
<button class="active">Mês</button>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- CALENDÁRIO GRANDE -->
|
||
<div class="calendar-area" id="calendarArea"></div>
|
||
|
||
</div>
|
||
|
||
<script>
|
||
/* ===== VARIÁVEIS ===== */
|
||
let dataMini = new Date();
|
||
let dataGrande = new Date();
|
||
|
||
/* ===== MESES ===== */
|
||
const meses = [
|
||
"Janeiro", "Fevereiro", "Março", "Abril",
|
||
"Maio", "Junho", "Julho", "Agosto",
|
||
"Setembro", "Outubro", "Novembro", "Dezembro"
|
||
];
|
||
|
||
/* ===== MINI CALENDÁRIO ===== */
|
||
function renderCalendario() {
|
||
const mesEl = document.getElementById("mes");
|
||
const diasEl = document.getElementById("dias");
|
||
|
||
let ano = dataMini.getFullYear();
|
||
let mes = dataMini.getMonth();
|
||
|
||
mesEl.textContent = `${meses[mes]} ${ano}`;
|
||
|
||
let primeiroDia = new Date(ano, mes, 1).getDay();
|
||
let ultimoDia = new Date(ano, mes + 1, 0).getDate();
|
||
let ultimoDiaMesAnterior = new Date(ano, mes, 0).getDate();
|
||
|
||
diasEl.innerHTML = "";
|
||
|
||
let diaAtualNum = 1;
|
||
let diaSeguinte = 1;
|
||
|
||
let totalCelulas = primeiroDia + ultimoDia;
|
||
let totalLinhas = Math.ceil(totalCelulas / 7);
|
||
if (totalLinhas < 4) totalLinhas = 4;
|
||
|
||
for (let semana = 0; semana < totalLinhas; semana++) {
|
||
let linha = document.createElement("tr");
|
||
|
||
for (let diaSemana = 0; diaSemana < 7; diaSemana++) {
|
||
let pos = semana * 7 + diaSemana;
|
||
|
||
if (pos < primeiroDia) {
|
||
let dia = ultimoDiaMesAnterior - (primeiroDia - pos - 1);
|
||
linha.innerHTML += `<td class="outromes">${dia}</td>`;
|
||
}
|
||
else if (diaAtualNum <= ultimoDia) {
|
||
let hoje = new Date();
|
||
|
||
let classeHoje =
|
||
diaAtualNum === hoje.getDate() &&
|
||
mes === hoje.getMonth() &&
|
||
ano === hoje.getFullYear()
|
||
? "today"
|
||
: "";
|
||
|
||
linha.innerHTML += `<td class="${classeHoje}">${diaAtualNum}</td>`;
|
||
diaAtualNum++;
|
||
}
|
||
else {
|
||
linha.innerHTML += `<td class="outromes">${diaSeguinte}</td>`;
|
||
diaSeguinte++;
|
||
}
|
||
}
|
||
|
||
diasEl.appendChild(linha);
|
||
}
|
||
}
|
||
|
||
/* ===== CALENDÁRIO GRANDE ===== */
|
||
function renderCalendarioGrande() {
|
||
const area = document.getElementById("calendarArea");
|
||
const titulo = document.querySelector(".titulo-mes");
|
||
|
||
let ano = dataGrande.getFullYear();
|
||
let mes = dataGrande.getMonth();
|
||
|
||
/* ATUALIZA TÍTULO */
|
||
titulo.textContent = `${meses[mes]}, ${ano}`;
|
||
|
||
area.innerHTML = "";
|
||
|
||
/* DIAS DA SEMANA */
|
||
const diasSemana = ["Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sab"];
|
||
|
||
diasSemana.forEach(dia => {
|
||
area.innerHTML += `<div class="dia-semana">${dia}</div>`;
|
||
});
|
||
|
||
let primeiroDia = new Date(ano, mes, 1).getDay();
|
||
let ultimoDia = new Date(ano, mes + 1, 0).getDate();
|
||
let ultimoMesAnterior = new Date(ano, mes, 0).getDate();
|
||
|
||
let total = primeiroDia + ultimoDia;
|
||
let linhas = Math.ceil(total / 7);
|
||
|
||
let diaAtualNum = 1;
|
||
let proxMes = 1;
|
||
|
||
for (let i = 0; i < linhas * 7; i++) {
|
||
let classe = "dia-box";
|
||
let numero = "";
|
||
|
||
if (i < primeiroDia) {
|
||
numero = ultimoMesAnterior - (primeiroDia - i - 1);
|
||
classe += " outro-mes";
|
||
}
|
||
else if (diaAtualNum <= ultimoDia) {
|
||
numero = diaAtualNum;
|
||
|
||
let hoje = new Date();
|
||
if (
|
||
diaAtualNum === hoje.getDate() &&
|
||
mes === hoje.getMonth() &&
|
||
ano === hoje.getFullYear()
|
||
) {
|
||
classe += " today";
|
||
}
|
||
|
||
diaAtualNum++;
|
||
}
|
||
else {
|
||
numero = proxMes++;
|
||
classe += " outro-mes";
|
||
}
|
||
|
||
area.innerHTML += `<div class="${classe}">${numero}</div>`;
|
||
}
|
||
}
|
||
|
||
/* ===== ATUALIZAÇÕES ===== */
|
||
function atualizarMini() {
|
||
renderCalendario();
|
||
}
|
||
|
||
function atualizarGrande() {
|
||
renderCalendarioGrande();
|
||
}
|
||
|
||
/* ===== SETAS MINI ===== */
|
||
document.querySelector(".prox").onclick = () => {
|
||
dataMini.setMonth(dataMini.getMonth() + 1);
|
||
atualizarMini();
|
||
};
|
||
|
||
document.querySelector(".ant").onclick = () => {
|
||
dataMini.setMonth(dataMini.getMonth() - 1);
|
||
atualizarMini();
|
||
};
|
||
|
||
/* ===== SETAS GRANDE ===== */
|
||
document.querySelector(".antGrande").onclick = () => {
|
||
dataGrande.setMonth(dataGrande.getMonth() - 1);
|
||
atualizarGrande();
|
||
};
|
||
|
||
document.querySelector(".proxGrande").onclick = () => {
|
||
dataGrande.setMonth(dataGrande.getMonth() + 1);
|
||
atualizarGrande();
|
||
};
|
||
|
||
/* ===== BOTÕES DIA / SEMANA / MÊS ===== */
|
||
const botoesView = document.querySelectorAll(".view-switch button");
|
||
|
||
botoesView.forEach(btn => {
|
||
btn.addEventListener("click", () => {
|
||
botoesView.forEach(b => b.classList.remove("active"));
|
||
btn.classList.add("active");
|
||
|
||
const tipo = btn.textContent;
|
||
|
||
if (tipo === "Dia") {
|
||
alert("Modo DIA (você pode implementar depois)");
|
||
}
|
||
else if (tipo === "Semana") {
|
||
alert("Modo SEMANA (você pode implementar depois)");
|
||
}
|
||
else {
|
||
atualizarGrande(); // Mês já funciona
|
||
}
|
||
});
|
||
});
|
||
|
||
/* ===== AGENDA ===== */
|
||
function renderAgenda() {
|
||
const container = document.getElementById("agenda");
|
||
|
||
container.innerHTML = `
|
||
<div class="agenda-header">
|
||
<strong>HOJE</strong> ${new Date().toLocaleDateString()}
|
||
</div>
|
||
`;
|
||
|
||
agendaData.forEach(ev => {
|
||
container.innerHTML += `
|
||
<div class="evento ${ev.cor}">
|
||
<div class="hora">${ev.hora}</div>
|
||
<div class="titulo">${ev.titulo}</div>
|
||
${ev.link ? `<div class="link">${ev.link}</div>` : ""}
|
||
</div>
|
||
`;
|
||
});
|
||
}
|
||
|
||
/* ===== FERIADOS ===== */
|
||
function renderFeriados() {
|
||
const container = document.getElementById("feriados");
|
||
|
||
container.innerHTML = `
|
||
<div class="feriados-header">FERIADOS 🎉</div>
|
||
`;
|
||
|
||
feriadosData.forEach(f => {
|
||
container.innerHTML += `
|
||
<div class="feriado">
|
||
<span class="dot"></span>
|
||
<span>${f.texto}</span>
|
||
</div>
|
||
`;
|
||
});
|
||
}
|
||
|
||
/* ===== DADOS ===== */
|
||
let agendaData = [
|
||
{ hora: "08:15 – 09:15", titulo: "Evento 1", cor: "azul" },
|
||
{ hora: "10:00 – 11:00", titulo: "Evento 2", cor: "rosa" }
|
||
];
|
||
|
||
let feriadosData = [
|
||
{ texto: "01 – Ano Novo" }
|
||
];
|
||
|
||
/* ===== INICIAR ===== */
|
||
atualizarMini();
|
||
atualizarGrande();
|
||
renderAgenda();
|
||
renderFeriados();
|
||
</script>
|
||
</body>
|
||
|
||
</html> |