7/10/26 - Calendar with Agenda Script

This is a standalone retro calendar widget, perfect for your blog's sidebar. It updates the month and days automatically based on the current date, and allows you to display emojis for your custom schedule or events. In case of any questions or bugs, feel free to leave a comment on this post and I will do my best to help you out!

Image Preview

How it Works

• Automatic Updates: The calendar will automatically display the current month and year.
• Interactive Events: Days with scheduled events will display an emoji instead of the number. Hovering the mouse over the emoji reveals a custom pop-up message with the day and details.
• Current Day: The current date is highlighted with a soft pink background.
• Available in Portuguese and English.

Click "Read More" for the code and how to install.

How to Add Your Events

Before pasting the code into your blog, you can add all your custom events inside the <script> section. Look for the configuration area at the top of the script:

// ============================================================

// 📝 DATE CONFIGURATION (Format: "YYYY-MM-DD")

// ============================================================

const Agenda = {

    "2026-07-10": { emoji: "🎂", texto: "Birthday!" },

    "2026-07-15": { emoji: "🛒", texto: "Shopping" },

    "2026-07-22": { emoji: "🎮", texto: "Game Night" }

};

Rules for adding dates:

• Follow the "YYYY-MM-DD" format strictly (Year-Month-Day).
• Always use two digits for months and days (e.g., 07 for July, 09 for the 9th).
• Separate each event line with a comma. You can add events for the entire year in advance; the calendar will only load them when that specific month arrives.

How to Install on Your Blog

For Blogger / Blogspot:

• Go to your Blogger Dashboard and click on Layout.
• Click Add a Gadget in your sidebar section.
• Choose HTML/JavaScript from the list.
• Leave the title blank (or name it "Calendar"), paste your customized script into the content box, and click Save.

For WordPress:

• Go to your Dashboard and navigate to Appearance > Widgets (or Appearance > Customize > Widgets).
• Add a Custom HTML block to your sidebar.
• Paste the script into the block and click Update/Save.

Get the Code

English:

<div id="side-cal-wrap" style="display:flex;justify-content:center;font-family:'Courier New',monospace;color:#333;width:160px;margin:0 auto;"> <div style="width:100%;background:#fff;border:1px solid #000;box-shadow:2px 2px 0px #000;padding:6px;box-sizing:border-box;"> <div id="sd-m" style="text-align:center;text-transform:uppercase;font-size:11px;font-weight:bold;letter-spacing:0.5px;margin-bottom:6px;border-bottom:1px solid #000;padding-bottom:3px;"></div> <div style="display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-weight:bold;font-size:9px;color:#5d7ca6;margin-bottom:4px;"> <span>S</span><span>M</span><span>T</span><span>W</span><span>T</span><span>F</span><span>S</span> </div> <div id="sd-d" style="display:grid;grid-template-columns:repeat(7,1fr);text-align:center;row-gap:3px;font-size:10px;"></div> </div> </div> <script> (function(){ // ============================================================ // 📝 DATE CONFIGURATION (Format: "YYYY-MM-DD") // ============================================================ const Agenda = { "2026-07-10": { emoji: "🎂", text: "Birthday!" }, "2026-07-15": { emoji: "🛒", text: "Shopping" }, "2026-07-22": { emoji: "🎮", text: "Game Night" }, "2026-07-26": { emoji: "🎨", text: "New Post" } }; // ============================================================ const d=new Date(),m=d.getMonth(),y=d.getFullYear(),str=["January","February","March","April","May","June","July","August","September","October","November","December"]; document.getElementById("sd-m").innerText=`${str[m]} ${y}`; const f=new Date(y,m,1).getDay(),l=new Date(y,m+1,0).getDate(),c=document.getElementById("sd-d"); for(let i=0;i<f;i++) c.appendChild(document.createElement("span")); for(let day=1;day<=l;day++){ const box=document.createElement("div"); box.style.cssText="position:relative;height:18px;line-height:18px;font-weight:bold;cursor:default;border-radius:2px;"; const format=`${y}-${String(m+1).padStart(2,'0')}-${String(day).padStart(2,'0')}`; if(day===d.getDate()) box.style.cssText+="background:#ffb6c1;color:#fff;"; if(Agenda[format]){ const ev=Agenda[format]; box.innerText=ev.emoji; box.style.cursor="help"; if(day===d.getDate()) box.style.background="#ffb6c1"; const tt=document.createElement("div"); tt.innerText=`${day}: ${ev.text}`; tt.style.cssText="position:absolute;bottom:110%;left:50%;transform:translateX(-50%);background:#333;color:#fff;padding:3px 6px;font-size:9px;border-radius:2px;white-space:nowrap;display:none;z-index:10;line-height:12px;box-shadow:1px 1px 2px rgba(0,0,0,0.2);"; box.addEventListener("mouseenter",()=>tt.style.display="block"); box.addEventListener("mouseleave",()=>tt.style.display="none"); box.appendChild(tt); } else { box.innerText=day; } c.appendChild(box); } })(); </script>

Portuguese:

<div id="side-cal-wrap" style="display:flex;justify-content:center;font-family:'Courier New',monospace;color:#333;width:160px;margin:0 auto;"> <div style="width:100%;background:#fff;border:1px solid #000;box-shadow:2px 2px 0px #000;padding:6px;box-sizing:border-box;"> <div id="sd-m" style="text-align:center;text-transform:uppercase;font-size:11px;font-weight:bold;letter-spacing:0.5px;margin-bottom:6px;border-bottom:1px solid #000;padding-bottom:3px;"></div> <div style="display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-weight:bold;font-size:9px;color:#5d7ca6;margin-bottom:4px;"> <span>D</span><span>S</span><span>T</span><span>Q</span><span>Q</span><span>S</span><span>S</span> </div> <div id="sd-d" style="display:grid;grid-template-columns:repeat(7,1fr);text-align:center;row-gap:3px;font-size:10px;"></div> </div> </div> <script> (function(){ // ============================================================ // 📝 CONFIGURAÇÃO DE DATAS (Formato: "AAAA-MM-DD") // ============================================================ const Agenda = { "2026-07-10": { emoji: "🎂", texto: "Aniversário!" }, "2026-07-15": { emoji: "🛒", texto: "Compras" }, "2026-07-22": { emoji: "🎮", texto: "Jogos" }, "2026-07-26": { emoji: "🎨", texto: "Post Novo" } }; // ============================================================ const d=new Date(),m=d.getMonth(),y=d.getFullYear(),str=["Janeiro","Fevereiro","Março","Abril","Maio","Junho","Julho","Agosto","Setembro","Outubro","Novembro","Dezembro"]; document.getElementById("sd-m").innerText=`${str[m]} ${y}`; const f=new Date(y,m,1).getDay(),l=new Date(y,m+1,0).getDate(),c=document.getElementById("sd-d"); for(let i=0;i<f;i++) c.appendChild(document.createElement("span")); for(let day=1;day<=l;day++){ const box=document.createElement("div"); box.style.cssText="position:relative;height:18px;line-height:18px;font-weight:bold;cursor:default;border-radius:2px;"; const format=`${y}-${String(m+1).padStart(2,'0')}-${String(day).padStart(2,'0')}`; if(day===d.getDate()) box.style.cssText+="background:#ffb6c1;color:#fff;"; if(Agenda[format]){ const ev=Agenda[format]; box.innerText=ev.emoji; box.style.cursor="help"; if(day===d.getDate()) box.style.background="#ffb6c1"; const tt=document.createElement("div"); tt.innerText=`${day}: ${ev.texto}`; tt.style.cssText="position:absolute;bottom:110%;left:50%;transform:translateX(-50%);background:#333;color:#fff;padding:3px 6px;font-size:9px;border-radius:2px;white-space:nowrap;display:none;z-index:10;line-height:12px;box-shadow:1px 1px 2px rgba(0,0,0,0.2);"; box.addEventListener("mouseenter",()=>tt.style.display="block"); box.addEventListener("mouseleave",()=>tt.style.display="none"); box.appendChild(tt); } else { box.innerText=day; } c.appendChild(box); } })(); </script>