527 lines
19 KiB
HTML
527 lines
19 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="icon" href="imagens/icone.png">
|
|
<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 CALENDARIO -->
|
|
<div id="calendario">
|
|
<div class="calendariotop">
|
|
<div id="mes"></div>
|
|
<div id="calendarseta">
|
|
<button class="ant" aria-label="Mes anterior">‹</button>
|
|
<button class="prox" aria-label="Proximo mes">›</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>
|
|
|
|
<!-- CONTEUDO PRINCIPAL -->
|
|
<div class="main">
|
|
<div class="topbar">
|
|
<h1>Calendario</h1>
|
|
|
|
<div class="user-area">
|
|
<img src="imagens/sino.png" class="icone-img" alt="Notificacoes">
|
|
|
|
<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="Configuracoes">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="calendar-header">
|
|
<div class="mes-nav">
|
|
<button class="seta antGrande" aria-label="Anterior">‹</button>
|
|
<span class="titulo-mes">Janeiro, 2025</span>
|
|
<button class="seta proxGrande" aria-label="Proximo">›</button>
|
|
</div>
|
|
|
|
<div class="view-switch">
|
|
<button type="button" data-view="dia">Dia</button>
|
|
<button type="button" data-view="semana">Semana</button>
|
|
<button type="button" data-view="mes" class="active">Mes</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- CALENDARIO GRANDE -->
|
|
<div class="calendar-area month-view" id="calendarArea"></div>
|
|
</div>
|
|
|
|
<script>
|
|
let dataMini = new Date();
|
|
let dataGrande = new Date();
|
|
let modoAtual = "mes";
|
|
|
|
const meses = [
|
|
"Janeiro", "Fevereiro", "Marco", "Abril",
|
|
"Maio", "Junho", "Julho", "Agosto",
|
|
"Setembro", "Outubro", "Novembro", "Dezembro"
|
|
];
|
|
|
|
const nomesDiaLongo = [
|
|
"Domingo", "Segunda", "Terca", "Quarta", "Quinta", "Sexta", "Sabado"
|
|
];
|
|
|
|
const nomesDiaCurto = ["Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sab"];
|
|
|
|
function normalizarData(data) {
|
|
return new Date(data.getFullYear(), data.getMonth(), data.getDate());
|
|
}
|
|
|
|
function adicionarDias(data, quantidade) {
|
|
const novaData = new Date(data);
|
|
novaData.setDate(novaData.getDate() + quantidade);
|
|
return novaData;
|
|
}
|
|
|
|
function formatarISO(data) {
|
|
const ano = data.getFullYear();
|
|
const mes = String(data.getMonth() + 1).padStart(2, "0");
|
|
const dia = String(data.getDate()).padStart(2, "0");
|
|
return `${ano}-${mes}-${dia}`;
|
|
}
|
|
|
|
function formatarDataCurta(data) {
|
|
const dia = String(data.getDate()).padStart(2, "0");
|
|
const mes = String(data.getMonth() + 1).padStart(2, "0");
|
|
return `${dia}/${mes}`;
|
|
}
|
|
|
|
function obterInicioSemana(data) {
|
|
const inicio = normalizarData(data);
|
|
inicio.setDate(inicio.getDate() - inicio.getDay());
|
|
return inicio;
|
|
}
|
|
|
|
function extrairMinutos(horaIntervalo) {
|
|
const inicio = horaIntervalo.split("-")[0].trim();
|
|
const [hora, minuto] = inicio.split(":").map(Number);
|
|
return hora * 60 + minuto;
|
|
}
|
|
|
|
const hojeBase = normalizarData(new Date());
|
|
|
|
const agendaData = [
|
|
{ data: formatarISO(hojeBase), hora: "08:15 - 09:15", titulo: "Planejamento do dia", cor: "vermelho" },
|
|
{ data: formatarISO(hojeBase), hora: "10:00 - 11:00", titulo: "Reuniao rapida", cor: "rosa" },
|
|
{ data: formatarISO(adicionarDias(hojeBase, 1)), hora: "14:00 - 15:00", titulo: "Revisar tarefas", cor: "azul" },
|
|
{ data: formatarISO(adicionarDias(hojeBase, 3)), hora: "16:00 - 17:00", titulo: "Entrega parcial", cor: "verde" }
|
|
];
|
|
|
|
const feriadosData = [
|
|
{ texto: "01 - Ano Novo" }
|
|
];
|
|
|
|
function obterEventosDaData(data) {
|
|
const chave = formatarISO(normalizarData(data));
|
|
return agendaData
|
|
.filter((evento) => evento.data === chave)
|
|
.sort((a, b) => extrairMinutos(a.hora) - extrairMinutos(b.hora));
|
|
}
|
|
|
|
function atualizarTituloGrande() {
|
|
const titulo = document.querySelector(".titulo-mes");
|
|
|
|
if (modoAtual === "mes") {
|
|
titulo.textContent = `${meses[dataGrande.getMonth()]}, ${dataGrande.getFullYear()}`;
|
|
return;
|
|
}
|
|
|
|
if (modoAtual === "semana") {
|
|
const inicio = obterInicioSemana(dataGrande);
|
|
const fim = adicionarDias(inicio, 6);
|
|
titulo.textContent = `Semana ${formatarDataCurta(inicio)} - ${formatarDataCurta(fim)}/${fim.getFullYear()}`;
|
|
return;
|
|
}
|
|
|
|
titulo.textContent = `${nomesDiaLongo[dataGrande.getDay()]}, ${formatarDataCurta(dataGrande)}/${dataGrande.getFullYear()}`;
|
|
}
|
|
|
|
function configurarArea(classeModo) {
|
|
const area = document.getElementById("calendarArea");
|
|
area.className = `calendar-area ${classeModo}`;
|
|
area.replaceChildren();
|
|
return area;
|
|
}
|
|
|
|
function criarCardEvento(evento) {
|
|
const card = document.createElement("div");
|
|
card.className = `calendar-event ${evento.cor}`;
|
|
|
|
const hora = document.createElement("div");
|
|
hora.className = "calendar-event-hora";
|
|
hora.textContent = evento.hora;
|
|
|
|
const titulo = document.createElement("div");
|
|
titulo.className = "calendar-event-titulo";
|
|
titulo.textContent = evento.titulo;
|
|
|
|
card.appendChild(hora);
|
|
card.appendChild(titulo);
|
|
return card;
|
|
}
|
|
|
|
/* MINI CALENDARIO */
|
|
function renderCalendarioMini() {
|
|
const mesEl = document.getElementById("mes");
|
|
const diasEl = document.getElementById("dias");
|
|
|
|
const ano = dataMini.getFullYear();
|
|
const mes = dataMini.getMonth();
|
|
|
|
mesEl.textContent = `${meses[mes]} ${ano}`;
|
|
diasEl.replaceChildren();
|
|
|
|
const primeiroDia = new Date(ano, mes, 1).getDay();
|
|
const ultimoDia = new Date(ano, mes + 1, 0).getDate();
|
|
const ultimoDiaMesAnterior = new Date(ano, mes, 0).getDate();
|
|
|
|
let diaAtualNum = 1;
|
|
let diaSeguinte = 1;
|
|
|
|
const totalCelulas = primeiroDia + ultimoDia;
|
|
let totalLinhas = Math.ceil(totalCelulas / 7);
|
|
if (totalLinhas < 4) totalLinhas = 4;
|
|
|
|
for (let semana = 0; semana < totalLinhas; semana++) {
|
|
const linha = document.createElement("tr");
|
|
|
|
for (let diaSemana = 0; diaSemana < 7; diaSemana++) {
|
|
const pos = semana * 7 + diaSemana;
|
|
const celula = document.createElement("td");
|
|
|
|
if (pos < primeiroDia) {
|
|
const dia = ultimoDiaMesAnterior - (primeiroDia - pos - 1);
|
|
celula.className = "outromes";
|
|
celula.textContent = String(dia);
|
|
} else if (diaAtualNum <= ultimoDia) {
|
|
const hoje = new Date();
|
|
const isHoje =
|
|
diaAtualNum === hoje.getDate() &&
|
|
mes === hoje.getMonth() &&
|
|
ano === hoje.getFullYear();
|
|
|
|
if (isHoje) {
|
|
celula.className = "today";
|
|
}
|
|
|
|
celula.textContent = String(diaAtualNum);
|
|
diaAtualNum++;
|
|
} else {
|
|
celula.className = "outromes";
|
|
celula.textContent = String(diaSeguinte);
|
|
diaSeguinte++;
|
|
}
|
|
|
|
linha.appendChild(celula);
|
|
}
|
|
|
|
diasEl.appendChild(linha);
|
|
}
|
|
}
|
|
|
|
/* CALENDARIO GRANDE - MES */
|
|
function renderCalendarioMes() {
|
|
const area = configurarArea("month-view");
|
|
atualizarTituloGrande();
|
|
|
|
nomesDiaCurto.forEach((dia) => {
|
|
const el = document.createElement("div");
|
|
el.className = "dia-semana";
|
|
el.textContent = dia;
|
|
area.appendChild(el);
|
|
});
|
|
|
|
const ano = dataGrande.getFullYear();
|
|
const mes = dataGrande.getMonth();
|
|
const primeiroDia = new Date(ano, mes, 1).getDay();
|
|
const ultimoDia = new Date(ano, mes + 1, 0).getDate();
|
|
const ultimoMesAnterior = new Date(ano, mes, 0).getDate();
|
|
|
|
const totalCelulasMes = 42;
|
|
let proximoDia = 1;
|
|
|
|
for (let i = 0; i < totalCelulasMes; i++) {
|
|
const box = document.createElement("div");
|
|
box.className = "dia-box";
|
|
|
|
if (i < primeiroDia) {
|
|
box.classList.add("outro-mes");
|
|
box.textContent = String(ultimoMesAnterior - (primeiroDia - i - 1));
|
|
} else if (i < primeiroDia + ultimoDia) {
|
|
const diaAtual = i - primeiroDia + 1;
|
|
box.textContent = String(diaAtual);
|
|
|
|
const hoje = new Date();
|
|
const isHoje =
|
|
diaAtual === hoje.getDate() &&
|
|
mes === hoje.getMonth() &&
|
|
ano === hoje.getFullYear();
|
|
|
|
if (isHoje) {
|
|
box.classList.add("today");
|
|
}
|
|
} else {
|
|
box.classList.add("outro-mes");
|
|
box.textContent = String(proximoDia++);
|
|
}
|
|
|
|
area.appendChild(box);
|
|
}
|
|
}
|
|
|
|
/* CALENDARIO GRANDE - SEMANA */
|
|
function renderCalendarioSemana() {
|
|
const area = configurarArea("week-view");
|
|
atualizarTituloGrande();
|
|
|
|
const inicioSemana = obterInicioSemana(dataGrande);
|
|
|
|
for (let i = 0; i < 7; i++) {
|
|
const dataColuna = adicionarDias(inicioSemana, i);
|
|
const eventos = obterEventosDaData(dataColuna);
|
|
|
|
const coluna = document.createElement("div");
|
|
coluna.className = "week-col";
|
|
|
|
const cabecalho = document.createElement("div");
|
|
cabecalho.className = "week-col-head";
|
|
cabecalho.textContent = nomesDiaCurto[dataColuna.getDay()];
|
|
|
|
const numero = document.createElement("span");
|
|
numero.className = "week-col-date";
|
|
numero.textContent = `${formatarDataCurta(dataColuna)}/${dataColuna.getFullYear()}`;
|
|
cabecalho.appendChild(numero);
|
|
|
|
if (
|
|
dataColuna.getDate() === new Date().getDate() &&
|
|
dataColuna.getMonth() === new Date().getMonth() &&
|
|
dataColuna.getFullYear() === new Date().getFullYear()
|
|
) {
|
|
coluna.classList.add("today");
|
|
}
|
|
|
|
const lista = document.createElement("div");
|
|
lista.className = "week-events";
|
|
|
|
if (eventos.length === 0) {
|
|
const vazio = document.createElement("div");
|
|
vazio.className = "week-empty";
|
|
vazio.textContent = "Sem eventos";
|
|
lista.appendChild(vazio);
|
|
} else {
|
|
eventos.forEach((evento) => {
|
|
lista.appendChild(criarCardEvento(evento));
|
|
});
|
|
}
|
|
|
|
coluna.appendChild(cabecalho);
|
|
coluna.appendChild(lista);
|
|
area.appendChild(coluna);
|
|
}
|
|
}
|
|
|
|
/* CALENDARIO GRANDE - DIA */
|
|
function renderCalendarioDia() {
|
|
const area = configurarArea("day-view");
|
|
atualizarTituloGrande();
|
|
|
|
const eventos = obterEventosDaData(dataGrande);
|
|
|
|
const painel = document.createElement("div");
|
|
painel.className = "day-panel";
|
|
|
|
const cabecalho = document.createElement("div");
|
|
cabecalho.className = "day-panel-header";
|
|
cabecalho.textContent = `Agenda de ${formatarDataCurta(dataGrande)}/${dataGrande.getFullYear()}`;
|
|
|
|
const lista = document.createElement("div");
|
|
lista.className = "day-events";
|
|
|
|
if (eventos.length === 0) {
|
|
const vazio = document.createElement("div");
|
|
vazio.className = "day-empty";
|
|
vazio.textContent = "Nenhum evento para este dia.";
|
|
lista.appendChild(vazio);
|
|
} else {
|
|
eventos.forEach((evento) => {
|
|
lista.appendChild(criarCardEvento(evento));
|
|
});
|
|
}
|
|
|
|
painel.appendChild(cabecalho);
|
|
painel.appendChild(lista);
|
|
area.appendChild(painel);
|
|
}
|
|
|
|
function renderCalendarioGrande() {
|
|
if (modoAtual === "dia") {
|
|
renderCalendarioDia();
|
|
return;
|
|
}
|
|
|
|
if (modoAtual === "semana") {
|
|
renderCalendarioSemana();
|
|
return;
|
|
}
|
|
|
|
renderCalendarioMes();
|
|
}
|
|
|
|
function renderAgenda() {
|
|
const container = document.getElementById("agenda");
|
|
container.replaceChildren();
|
|
|
|
const header = document.createElement("div");
|
|
header.className = "agenda-header";
|
|
|
|
const strong = document.createElement("strong");
|
|
strong.textContent = "HOJE ";
|
|
header.appendChild(strong);
|
|
|
|
const hoje = new Date();
|
|
header.appendChild(document.createTextNode(new Intl.DateTimeFormat("pt-BR").format(hoje)));
|
|
container.appendChild(header);
|
|
|
|
const eventosHoje = obterEventosDaData(hoje);
|
|
|
|
if (eventosHoje.length === 0) {
|
|
const vazio = document.createElement("div");
|
|
vazio.className = "agenda-empty";
|
|
vazio.textContent = "Sem eventos para hoje.";
|
|
container.appendChild(vazio);
|
|
return;
|
|
}
|
|
|
|
eventosHoje.forEach((ev) => {
|
|
const evento = document.createElement("div");
|
|
evento.className = `evento ${ev.cor}`;
|
|
|
|
const hora = document.createElement("div");
|
|
hora.className = "hora";
|
|
hora.textContent = ev.hora;
|
|
|
|
const titulo = document.createElement("div");
|
|
titulo.className = "titulo";
|
|
titulo.textContent = ev.titulo;
|
|
|
|
evento.appendChild(hora);
|
|
evento.appendChild(titulo);
|
|
container.appendChild(evento);
|
|
});
|
|
}
|
|
|
|
function renderFeriados() {
|
|
const container = document.getElementById("feriados");
|
|
container.replaceChildren();
|
|
|
|
const header = document.createElement("div");
|
|
header.className = "feriados-header";
|
|
header.textContent = "FERIADOS";
|
|
container.appendChild(header);
|
|
|
|
feriadosData.forEach((f) => {
|
|
const item = document.createElement("div");
|
|
item.className = "feriado";
|
|
|
|
const dot = document.createElement("span");
|
|
dot.className = "dot";
|
|
|
|
const texto = document.createElement("span");
|
|
texto.textContent = f.texto;
|
|
|
|
item.appendChild(dot);
|
|
item.appendChild(texto);
|
|
container.appendChild(item);
|
|
});
|
|
}
|
|
|
|
function moverPeriodo(direcao) {
|
|
if (modoAtual === "dia") {
|
|
dataGrande.setDate(dataGrande.getDate() + direcao);
|
|
} else if (modoAtual === "semana") {
|
|
dataGrande.setDate(dataGrande.getDate() + (direcao * 7));
|
|
} else {
|
|
dataGrande.setMonth(dataGrande.getMonth() + direcao);
|
|
}
|
|
|
|
renderCalendarioGrande();
|
|
}
|
|
|
|
function ativarBotaoModo(modo) {
|
|
const botoes = document.querySelectorAll(".view-switch button");
|
|
botoes.forEach((botao) => {
|
|
botao.classList.toggle("active", botao.dataset.view === modo);
|
|
});
|
|
}
|
|
|
|
document.querySelector(".prox").onclick = () => {
|
|
dataMini.setMonth(dataMini.getMonth() + 1);
|
|
renderCalendarioMini();
|
|
};
|
|
|
|
document.querySelector(".ant").onclick = () => {
|
|
dataMini.setMonth(dataMini.getMonth() - 1);
|
|
renderCalendarioMini();
|
|
};
|
|
|
|
document.querySelector(".antGrande").onclick = () => moverPeriodo(-1);
|
|
document.querySelector(".proxGrande").onclick = () => moverPeriodo(1);
|
|
|
|
document.querySelectorAll(".view-switch button").forEach((btn) => {
|
|
btn.addEventListener("click", () => {
|
|
modoAtual = btn.dataset.view;
|
|
ativarBotaoModo(modoAtual);
|
|
renderCalendarioGrande();
|
|
});
|
|
});
|
|
|
|
renderCalendarioMini();
|
|
renderCalendarioGrande();
|
|
renderAgenda();
|
|
renderFeriados();
|
|
</script>
|
|
</body>
|
|
</html>
|