Description
- custom calendar similar Event Calendar
- connect to Blog Page
- show current week only
#1. Install Code
Hover on Page where you want to add Calendar > Click Gear icon
Click Advanced > Paste this code
<style>
.glassy-week-calendar{width:100%;padding:40px 0;color:#d5e4f5}.glassy-week-calendar *{box-sizing:border-box}.gwc-inner{width:100%;padding:16px 24px 40px}.glassy-week-calendar h1{text-align:center;margin:0 0 32px 0;padding:0;font-size:32px;letter-spacing:.12em}.yui3-calendar-header-label{display:inline-block;text-transform:capitalize}.gwc-weekdays{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));margin-bottom:16px;font-size:13px;letter-spacing:.18em;text-transform:uppercase;opacity:.8}.gwc-weekdays>div{text-align:center;padding:0 8px;color:#d5e4f5;opacity:.7;font-size:12px}.gwc-days-row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}.gwc-day{position:relative;aspect-ratio:1/1;padding:2px}.gwc-day-inner{position:absolute;inset:1px;padding:14px 14px 10px;background:rgb(110 110 110 / .05);color:#d5e4f5;overflow:hidden;display:block}.gwc-day-number{position:absolute;top:5px;right:12px;font-size:12px;opacity:.7;z-index:10}.gwc-day--other-month .gwc-day-inner{opacity:1}.gwc-day-link{display:block;position:absolute;inset:0;text-decoration:none;color:inherit;z-index:1}.gwc-day-image{position:absolute;inset:0;width:100%;height:100%;z-index:1;transition:transform 0.3s ease,opacity 0.3s ease}.gwc-day--has-post .gwc-day-number{background:#fafafa;color:#333;opacity:.7;text-align:center;display:flex;width:30px;height:30px;font-size:15px;align-items:center;justify-content:center;font-size:12px}.gwc-loading{text-align:center;padding:40px;font-size:16px;color:#d5e4f5;opacity:.7}@media(max-width:767px){.glassy-week-calendar h1{font-size:22px}.gwc-weekdays{font-size:11px;letter-spacing:.14em}.gwc-day-number{font-size:14px;top:8px;right:8px}.gwc-day-inner{padding:10px}.gwc-day--has-post .gwc-day-number,.gwc-day--today .gwc-day-number{padding:3px 8px;font-size:13px}}
</style>
<script>
!function(){const e='[data-att="new-calendar"]',t=3e5,a={data:null,timestamp:null,isValid(){return this.data&&this.timestamp&&Date.now()-this.timestamp<t},set(e){this.data=e,this.timestamp=Date.now()},get(){return this.isValid()?this.data:null}};function n(e){const t=(new DOMParser).parseFromString(e,"text/html").querySelectorAll(".blog-item"),a=[];return t.forEach((e=>{const t=e.querySelector(".blog-title a, .image-wrapper"),n=e.querySelector("img[data-src], img[src]"),i=e.querySelector(".blog-date"),r=e.querySelector(".blog-title");if(!t||!i)return;const l=t.getAttribute("href"),d=n?n.getAttribute("data-src")||n.getAttribute("src"):null,s=i.textContent.trim(),o=r?r.textContent.trim():"",c=function(e){if(!e)return null;const t=e.match(/(\d{1,2})\/(\d{1,2})\/(\d{2})/);if(!t)return null;const[,a,n,i]=t,r=2e3+parseInt(i);return new Date(r,parseInt(a)-1,parseInt(n))}(s);c&&l&&a.push({date:c,timestamp:c.getTime(),url:l,image:d,title:o})})),a}async function i(e){const t=e.getAttribute("data-url");if(!t)return void console.error("No data-url attribute found");e.innerHTML='<div class="gwc-loading">Loading calendar...</div>';let i=a.get();i||(i=await async function(e){let t=[],a=null,i=!0,r=0;for(;i&&r<10;){const l=a?`${e}?offset=${a}`:e,d=await fetch(l).then((e=>e.text())).catch((()=>null));if(!d)break;const s=n(d);if(0===s.length)break;t=t.concat(s);const o=(new DOMParser).parseFromString(d,"text/html").querySelector(".blog-list-pagination .older a");if(o){const e=o.getAttribute("href").match(/offset=(\d+)/);a=e?e[1]:null,i=!!a}else i=!1;r++,await new Promise((e=>setTimeout(e,200)))}return t}(t),a.set(i));const r=function(e,t){const a=e.getFullYear(),n=e.getMonth(),i=new Date(e),r=i.getDay();i.setDate(e.getDate()-r);const l=new Date,d=l.getFullYear(),s=l.getMonth(),o=l.getDate();let c="";for(let e=0;e<7;e++){const a=new Date(i);a.setDate(i.getDate()+e);const r=new Date(a.getFullYear(),a.getMonth(),a.getDate()).getTime(),l=t.find((e=>new Date(e.date.getFullYear(),e.date.getMonth(),e.date.getDate()).getTime()===r));let u="gwc-day";a.getMonth()!==n&&(u+=" gwc-day--other-month"),a.getFullYear()===d&&a.getMonth()===s&&a.getDate()===o&&(u+=" gwc-day--today"),l&&(u+=" gwc-day--has-post");let g=`<div class="gwc-day-number">${a.getDate()}</div>`;if(l){const e=l.image?`background-image: url('${l.image}'); background-size: cover; background-position: center;`:"";g=`\n <a href="${l.url}" class="gwc-day-link" title="${l.title||""}">\n <div class="gwc-day-image" style="${e}"></div>\n <div class="gwc-day-number">${a.getDate()}</div>\n </a>\n `}c+=`\n <div class="${u}">\n <div class="gwc-day-inner">\n ${g}\n </div>\n </div>\n `}return`\n <div class="glassy-week-calendar">\n <div class="gwc-inner">\n <h1>\n <div class="yui3-u yui3-calendar-header-label">${["January","February","March","April","May","June","July","August","September","October","November","December"][n]} ${a}</div>\n </h1>\n <div class="gwc-weekdays">\n <div aria-label="Sunday">SU</div>\n <div aria-label="Monday">MO</div>\n <div aria-label="Tuesday">TU</div>\n <div aria-label="Wednesday">WE</div>\n <div aria-label="Thursday">TH</div>\n <div aria-label="Friday">FR</div>\n <div aria-label="Saturday">SA</div>\n </div>\n <div class="gwc-days-row">\n ${c}\n </div>\n </div>\n </div>\n `}(new Date,i);e.innerHTML=r}function r(){document.querySelectorAll(e).forEach((e=>{i(e)}))}"loading"===document.readyState?document.addEventListener("DOMContentLoaded",r):r(),window.addEventListener("mercury:load",r)}();
</script>
Next, edit page where you want to add Calendar > Add a Code Block
Paste syntax like this into Code Block
<div data-att="new-calendar" data-url="/subscription-rituals"></div>
Remember to change Blog Page URL here
data-url="/subscription-rituals"
#2. Customize
Code will get Blog Item Thumbnail + Blog Item URL only
