Gustavo/FrontFocusAgenda
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Atualização do calendarii

Browse Source
This commit is contained in:
Gustavo
2026-03-23 08:50:26 -03:00
parent 185946a3c6
commit c49f619569
4 changed files with 438 additions and 196 deletions
Download Patch File Download Diff File Expand all files Collapse all files

305
calendario.html
View File

@@ -4,25 +4,35 @@
<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 rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<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">
<link rel="icon" href="imagens/icone.png">
</head>
<body> <!--Barrinha que fica no topo-->
<body>
<!-- HEADER -->
<div id="header">
<h1 id="title">Focus Agenda</h1>
</div> <!--cabo bar--> <!--Começo daquele mini calendario na esquerda/-->
</div>
<!-- BARRA ESQUERDA -->
<div id="barraesquerda">
<!-- MINI CALENDÁRIO -->
<div id="calendario">
<div class="calendariotop">
<div class="mes" id="mes">Janeiro 2025</div>
<div class="calendarseta"> <button class="prox" aria-label="Mês anterior">‹</button> <button class="ant"
aria-label="Próximo mês">›</button> </div>
<div id="mes"></div>
<div id="calendarseta">
<button class="ant">‹</button>
<button class="prox">›</button>
</div>
</div>
<table class="calendariodia">
<thead>
<tr>
@@ -35,86 +45,223 @@
<th>SAB</th>
</tr>
</thead>
<tbody>
<tr>
<td class="outromes">31</td>
<td class="dia">1</td>
<td class="dia">2</td>
<td class="dia">3</td>
<td class="dia">4</td>
<td class="dia">5</td>
<td class="dia">6</td>
</tr>
<tr>
<td class="dia">7</td>
<td class="dia">8</td>
<td class="dia">9</td>
<td class="dia">10</td>
<td class="dia">11</td>
<td class="dia">12</td>
<td class="dia">13</td>
</tr>
<tr>
<td class="dia">14</td>
<td class="dia">15</td>
<td class="dia">16</td>
<td class="dia">17</td>
<td class="dia">18</td>
<td class="dia">19</td>
<td class="dia">20</td>
</tr>
<tr>
<td class="dia">21</td>
<td class="dia">22</td>
<td class="dia">23</td>
<td class="dia">24</td>
<td class="dia">25</td>
<td class="dia">26</td>
<td class="dia">27</td>
</tr>
<tr>
<td class="dia">28</td>
<td class="dia">29</td>
<td class="dia">30</td>
<td class="dia">31</td>
<td class="outromes">1</td>
<td class="outromes">2</td>
<td class="outromes">3</td>
</tr>
</tbody>
<tbody id="dias"></tbody>
</table>
</div>
<!--Cabo mini calendario-->
<div class="agenda">
<div class="agenda-header">
<strong>HOJE</strong> 07/11/2025
<!-- AGENDA -->
<div id="agenda"></div>
<!-- FERIADOS -->
<div id="feriados"></div>
</div>
<div class="evento azul">
<div class="hora">08:15 – 09:15</div>
<div class="titulo">Coçar oq fazer</div>
<div class="link">https://youtube.com</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>
<div class="evento azul">
<div class="hora">09:00 – 10:00</div>
<div class="titulo">COMO QUE DIMINUI A FONTE?</div>
<div class="link">https://sccor.com</div>
</div>
<div class="evento rosa">
<div class="hora">11:00 – 11:45</div>
<div class="titulo">Pintar boobie-goods</div>
</div>
<div class="evento azul">
<div class="hora">18:20 – 23:00</div>
<div class="titulo">Ir pro curso (infelizmente)</div>
<div class="link">dom 4, BBP</div>
</div>
<img src="imagens/engrenagem.png" class="icone-img" alt="Configurações">
</div>
</div>
<!-- MÊS -->
<div class="month-title">
<span>‹</span>
Janeiro, 2025
<span>›</span>
</div>
<!-- CALENDÁRIO GRANDE -->
<div class="calendar-area" id="calendarArea"></div>
</div>
<!-- SCRIPT -->
<script>
/* ===== MINI CALENDÁRIO ===== */
let dataAtual = new Date();
function renderCalendario() {
const mesEl = document.getElementById("mes");
const diasEl = document.getElementById("dias");
const meses = [
"Janeiro", "Fevereiro", "Março", "Abril",
"Maio", "Junho", "Julho", "Agosto",
"Setembro", "Outubro", "Novembro", "Dezembro"
];
let ano = dataAtual.getFullYear();
let mes = dataAtual.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 diaAtual = 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 (diaAtual <= ultimoDia) {
let hoje = new Date();
let classeHoje =
diaAtual === hoje.getDate() &&
mes === hoje.getMonth() &&
ano === hoje.getFullYear()
? "today"
: "";
linha.innerHTML += `<td class="${classeHoje}">${diaAtual}</td>`;
diaAtual++;
}
else {
linha.innerHTML += `<td class="outromes">${diaSeguinte}</td>`;
diaSeguinte++;
}
}
diasEl.appendChild(linha);
}
}
document.querySelector(".prox").onclick = () => {
dataAtual.setMonth(dataAtual.getMonth() + 1);
renderCalendario();
};
document.querySelector(".ant").onclick = () => {
dataAtual.setMonth(dataAtual.getMonth() - 1);
renderCalendario();
};
/* ===== CALENDÁRIO GRANDE ===== */
function renderCalendarioGrande() {
const area = document.getElementById("calendarArea");
area.innerHTML = "";
for (let i = 0; i < 35; i++) {
area.innerHTML += `<div class="dia-box"></div>`;
}
}
/* ===== DADOS ===== */
let agendaData = [
{
hora: "08:15 – 09:15",
titulo: "Coçar oq fazer",
link: "https://youtube.com",
cor: "azul"
},
{
hora: "09:00 – 10:00",
titulo: "COMO QUE DIMINUI A FONTE?",
link: "https://sccor.com",
cor: "azul"
},
{
hora: "11:00 – 11:45",
titulo: "Pintar boobie-goods",
cor: "rosa"
},
{
hora: "18:20 – 23:00",
titulo: "Ir pro curso (infelizmente)",
link: "dom 4, BBP",
cor: "azul"
}
];
let feriadosData = [
{ texto: "15 – Proclamação da República" },
{ texto: "20 – Dia Nacional da Consciência Negra" }
];
/* ===== RENDER 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>
`;
});
}
/* ===== RENDER 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>
`;
});
}
/* ===== INICIAR ===== */
renderCalendario();
renderCalendarioGrande();
renderAgenda();
renderFeriados();
</script>
</body>
</html>