Calender code.

If you want to use it you could give credit...

<div style="border: 2px solid #0ff; border-radius: 20px; padding: 16px; background: #1a1a2e; color: #fff; max-width: 340px; box-shadow: 0 0 15px #0ff; transition: all 0.3s cubic-bezier(0.4,0,0.2,1);" onmouseover="this.style.transform='scale(1.02)'; this.style.boxShadow='0 0 25px #0ff';" onmouseout="this.style.transform='scale(1)'; this.style.boxShadow='0 0 15px #0ff';">
<h3 style="text-align: center; font-size: 24px; margin-bottom: 12px; color: #0ff; text-shadow: 0 0 5px #0ff, 0 0 10px #f0f;">January</h3>
<table style="width: 100%; border-collapse: collapse; text-align: center; font-family: Arial, sans-serif;"><!-- Weekday headers with symbols -->
<tbody>
<tr style="font-weight: bold; color: #0ff;">
<td>☀️ Sun</td>
<td>🌙 Mon</td>
<td>🔥 Tue</td>
<td>💧 Wed</td>
<td>🌿 Thu</td>
<td>⚡ Fri</td>
<td>⭐ Sat</td>
</tr>
<!-- Week 1 (Dec 31 → Jan 6) -->
<tr>
<td style="color: #555;">31</td>
<td>
<div style="padding: 6px; border-radius: 8px; transition: all 0.2s ease; cursor: pointer;" onmouseover="this.style.background='#0ff'; this.style.color='#111'; this.style.transform='scale(1.2)';" onmouseout="this.style.background=''; this.style.color=''; this.style.transform='scale(1)';">1</div>
</td>
<td>
<div style="padding: 6px; border-radius: 8px; transition: all 0.2s ease; cursor: pointer;" onmouseover="this.style.background='#f0f'; this.style.color='#111'; this.style.transform='scale(1.2)';" onmouseout="this.style.background=''; this.style.color=''; this.style.transform='scale(1)';">2</div>
</td>
<td>
<div style="padding: 6px; border-radius: 8px; transition: all 0.2s ease; cursor: pointer;" onmouseover="this.style.background='#ff0'; this.style.color='#111'; this.style.transform='scale(1.2)';" onmouseout="this.style.background=''; this.style.color=''; this.style.transform='scale(1)';">3</div>
</td>
<td>
<div style="padding: 6px; border-radius: 8px; transition: all 0.2s ease; cursor: pointer;" onmouseover="this.style.background='#0f0'; this.style.color='#111'; this.style.transform='scale(1.2)';" onmouseout="this.style.background=''; this.style.color=''; this.style.transform='scale(1)';">4</div>
</td>
<td>
<div style="padding: 6px; border-radius: 8px; transition: all 0.2s ease; cursor: pointer;" onmouseover="this.style.background='#f80'; this.style.color='#111'; this.style.transform='scale(1.2)';" onmouseout="this.style.background=''; this.style.color=''; this.style.transform='scale(1)';">5</div>
</td>
<td>
<div style="padding: 6px; border-radius: 8px; transition: all 0.2s ease; cursor: pointer;" onmouseover="this.style.background='#0ff'; this.style.color='#111'; this.style.transform='scale(1.2)';" onmouseout="this.style.background=''; this.style.color=''; this.style.transform='scale(1)';">6</div>
</td>
</tr>
<!-- Week 2 -->
<tr>
<td>
<div style="padding: 6px; border-radius: 8px; transition: all 0.2s ease; cursor: pointer;" onmouseover="this.style.background='#f0f'; this.style.color='#111'; this.style.transform='scale(1.2)';" onmouseout="this.style.background=''; this.style.color=''; this.style.transform='scale(1)';">7</div>
</td>
<td>
<div style="padding: 6px; border-radius: 8px; transition: all 0.2s ease; cursor: pointer;" onmouseover="this.style.background='#ff0'; this.style.color='#111'; this.style.transform='scale(1.2)';" onmouseout="this.style.background=''; this.style.color=''; this.style.transform='scale(1)';">8</div>
</td>
<td>
<div style="padding: 6px; border-radius: 8px; transition: all 0.2s ease; cursor: pointer;" onmouseover="this.style.background='#0f0'; this.style.color='#111'; this.style.transform='scale(1.2)';" onmouseout="this.style.background=''; this.style.color=''; this.style.transform='scale(1)';">9</div>
</td>
<td>
<div style="padding: 6px; border-radius: 8px; transition: all 0.2s ease; cursor: pointer;" onmouseover="this.style.background='#f80'; this.style.color='#111'; this.style.transform='scale(1.2)';" onmouseout="this.style.background=''; this.style.color=''; this.style.transform='scale(1)';">10</div>
</td>
<td>
<div style="padding: 6px; border-radius: 8px; transition: all 0.2s ease; cursor: pointer;" onmouseover="this.style.background='#f0f'; this.style.color='#111'; this.style.transform='scale(1.2)';" onmouseout="this.style.background=''; this.style.color=''; this.style.transform='scale(1)';">11</div>
</td>
<td>
<div style="padding: 6px; border-radius: 8px; transition: all 0.2s ease; cursor: pointer;" onmouseover="this.style.background='#0ff'; this.style.color='#111'; this.style.transform='scale(1.2)';" onmouseout="this.style.background=''; this.style.color=''; this.style.transform='scale(1)';">12</div>
</td>
<td>
<div style="padding: 6px; border-radius: 8px; transition: all 0.2s ease; cursor: pointer;" onmouseover="this.style.background='#ff0'; this.style.color='#111'; this.style.transform='scale(1.2)';" onmouseout="this.style.background=''; this.style.color=''; this.style.transform='scale(1)';">13</div>
</td>
</tr>
<!-- Week 3 -->
<tr>
<td>
<div style="padding: 6px; border-radius: 8px; transition: all 0.2s ease; cursor: pointer;" onmouseover="this.style.background='#0f0'; this.style.color='#111'; this.style.transform='scale(1.2)';" onmouseout="this.style.background=''; this.style.color=''; this.style.transform='scale(1)';">14</div>
</td>
<td>
<div style="padding: 6px; border-radius: 8px; transition: all 0.2s ease; cursor: pointer;" onmouseover="this.style.background='#f80'; this.style.color='#111'; this.style.transform='scale(1.2)';" onmouseout="this.style.background=''; this.style.color=''; this.style.transform='scale(1)';">15</div>
</td>
<td>
<div style="padding: 6px; border-radius: 8px; transition: all 0.2s ease; cursor: pointer;" onmouseover="this.style.background='#f0f'; this.style.color='#111'; this.style.transform='scale(1.2)';" onmouseout="this.style.background=''; this.style.color=''; this.style.transform='scale(1)';">16</div>
</td>
<td>
<div style="padding: 6px; border-radius: 8px; transition: all 0.2s ease; cursor: pointer;" onmouseover="this.style.background='#0ff'; this.style.color='#111'; this.style.transform='scale(1.2)';" onmouseout="this.style.background=''; this.style.color=''; this.style.transform='scale(1)';">17</div>
</td>
<td>
<div style="padding: 6px; border-radius: 8px; transition: all 0.2s ease; cursor: pointer;" onmouseover="this.style.background='#ff0'; this.style.color='#111'; this.style.transform='scale(1.2)';" onmouseout="this.style.background=''; this.style.color=''; this.style.transform='scale(1)';">18</div>
</td>
<td>
<div style="padding: 6px; border-radius: 8px; transition: all 0.2s ease; cursor: pointer;" onmouseover="this.style.background='#0f0'; this.style.color='#111'; this.style.transform='scale(1.2)';" onmouseout="this.style.background=''; this.style.color=''; this.style.transform='scale(1)';">19</div>
</td>
<td>
<div style="padding: 6px; border-radius: 8px; transition: all 0.2s ease; cursor: pointer;" onmouseover="this.style.background='#f80'; this.style.color='#111'; this.style.transform='scale(1.2)';" onmouseout="this.style.background=''; this.style.color=''; this.style.transform='scale(1)';">20</div>
</td>
</tr>
<!-- Week 4 -->
<tr>
<td>
<div style="padding: 6px; border-radius: 8px; transition: all 0.2s ease; cursor: pointer;" onmouseover="this.style.background='#f0f'; this.style.color='#111'; this.style.transform='scale(1.2)';" onmouseout="this.style.background=''; this.style.color=''; this.style.transform='scale(1)';">21</div>
</td>
<td>
<div style="padding: 6px; border-radius: 8px; transition: all 0.2s ease; cursor: pointer;" onmouseover="this.style.background='#0ff'; this.style.color='#111'; this.style.transform='scale(1.2)';" onmouseout="this.style.background=''; this.style.color=''; this.style.transform='scale(1)';">22</div>
</td>
<td>
<div style="padding: 6px; border-radius: 8px; transition: all 0.2s ease; cursor: pointer;" onmouseover="this.style.background='#ff0'; this.style.color='#111'; this.style.transform='scale(1.2)';" onmouseout="this.style.background=''; this.style.color=''; this.style.transform='scale(1)';">23</div>
</td>
<td>
<div style="padding: 6px; border-radius: 8px; transition: all 0.2s ease; cursor: pointer;" onmouseover="this.style.background='#0f0'; this.style.color='#111'; this.style.transform='scale(1.2)';" onmouseout="this.style.background=''; this.style.color=''; this.style.transform='scale(1)';">24</div>
</td>
<td>
<div style="padding: 6px; border-radius: 8px; transition: all 0.2s ease; cursor: pointer;" onmouseover="this.style.background='#f80'; this.style.color='#111'; this.style.transform='scale(1.2)';" onmouseout="this.style.background=''; this.style.color=''; this.style.transform='scale(1)';">25</div>
</td>
<td>
<div style="padding: 6px; border-radius: 8px; transition: all 0.2s ease; cursor: pointer;" onmouseover="this.style.background='#f0f'; this.style.color='#111'; this.style.transform='scale(1.2)';" onmouseout="this.style.background=''; this.style.color=''; this.style.transform='scale(1)';">26</div>
</td>
<td>
<div style="padding: 6px; border-radius: 8px; transition: all 0.2s ease; cursor: pointer;" onmouseover="this.style.background='#0ff'; this.style.color='#111'; this.style.transform='scale(1.2)';" onmouseout="this.style.background=''; this.style.color=''; this.style.transform='scale(1)';">27</div>
</td>
</tr>
<!-- Week 5 -->
<tr>
<td>
<div style="padding: 6px; border-radius: 8px; transition: all 0.2s ease; cursor: pointer;" onmouseover="this.style.background='#ff0'; this.style.color='#111'; 

test

this.style.transform='scale(1.2)';" onmouseout="this.style.background=''; this.style.color=''; this.style.transform='scale(1)';">28</div>
</td>
<td>
<div style="padding: 6px; border-radius: 8px; transition: all 0.2s ease; cursor: pointer;" onmouseover="this.style.background='#0f0'; this.style.color='#111'; this.style.transform='scale(1.2)';" onmouseout="this.style.background=''; this.style.color=''; this.style.transform='scale(1)';">29</div>
</td>
<td>
<div style="padding: 6px; border-radius: 8px; transition: all 0.2s ease; cursor: pointer;" onmouseover="this.style.background='#f80'; this.style.color='#111'; this.style.transform='scale(1.2)';" onmouseout="this.style.background=''; this.style.color=''; this.style.transform='scale(1)';">30</div>
</td>
<td>
<div style="padding: 6px; border-radius: 8px; transition: all 0.2s ease; cursor: pointer;" onmouseover="this.style.background='#f0f'; this.style.color='#111'; this.style.transform='scale(1.2)';" onmouseout="this.style.background=''; this.style.color=''; this.style.transform='scale(1)';">31</div>
</td>
<td style="color: #555;"></td>
<td style="color: #555;"></td>
<td style="color: #555;"></td>
</tr>
</tbody>
</table>
</div>
<!-- Inline keyframe animation -->
<p>
<script>
  const style = document.createElement('style');
  style.innerHTML = `
    @keyframes floatGlow {
      0%   { transform: translateY(0px) rotate(0deg); text-shadow: 0 0 10px #0ff, 0 0 20px #0ff, 0 0 30px #0ff; }
      25%  { transform: translateY(-2px) rotate(-2deg); text-shadow: 0 0 12px #0ff, 0 0 22px #0ff, 0 0 32px #0ff; }
      50%  { transform: translateY(-4px) rotate(1deg); text-shadow: 0 0 14px #0ff, 0 0 24px #0ff, 0 0 34px #0ff; }
      75%  { transform: translateY(-2px) rotate(-1deg); text-shadow: 0 0 12px #0ff, 0 0 22px #0ff, 0 0 32px #0ff; }
      100% { transform: translateY(0px) rotate(0deg); text-shadow: 0 0 10px #0ff, 0 0 20px #0ff, 0 0 30px #0ff; }
    }
  `;
  document.head.appendChild(style);</script>
<span id="importantLinks" style="font-size: 36px; font-weight: bold; font-family: Arial, sans-serif; color: #0ff; display: inline-block; position: relative; animation: float 3s ease-in-out infinite alternate;">&nbsp;</span><span id="coeSidebar" style="font-size: 36px; font-weight: bold; font-family: Arial, sans-serif; color: #0ff; display: inline-block; position: relative;"></span><span id="coeSidebar" style="font-size: 36px; font-weight: bold; font-family: Arial, sans-serif; color: #0ff; display: inline-block; position: relative;"></span>
<script>
  const text = document.getElementById('coeSidebar');
  let angle = 0;
  setInterval(() => {
    angle += 0.02; // speed of rotation
    const x = Math.cos(angle) * 8; // horizontal circular movement
    const y = Math.sin(angle) * 4; // vertical circular movement
    text.style.transform = `translate(${x}px, ${y}px)`;
  }, 20);
</script>
<span style="background: linear-gradient(270deg, #ff0, #f0f, #0ff, #0f0, #f80); -webkit-background-clip: text; color: transparent; display: inline-block; animation: rainbowMove 5s linear infinite;"></span>
<script>
  const style = document.createElement('style');
  style.innerHTML = `
    @keyframes rainbowMove {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }
  `;
  document.head.appendChild(style);
</script>
</p>
<!-- Inline animation -->
<p>
<script>
  const style = document.createElement('style');
  style.innerHTML = `
    @keyframes float {
      0%   { transform: translateY(0px); }
      50%  { transform: translateY(-4px); }
      100% { transform: translateY(0px); }
    }
  `;
  document.head.appendChild(style);
</script>
</p>
<p>
<script>
  const text = document.getElementById('coeSidebar');
  let angle = 0;
  setInterval(() => {
    angle += 0.03; // speed
    const x = Math.cos(angle) * 10; // horizontal orbit
    const y = Math.sin(angle) * 5;  // vertical orbit
    const rotate = Math.sin(angle) * 10; // slight rotation
    text.style.transform = `translate(${x}px, ${y}px) rotate(${rotate}deg)`;
  }, 20);
</script>
</p>

oh my that's a lot of code

thanks tho

oops lots of it is duplicates, i am refining it.

ok