Only show days in the calendar once that date has been reached.

Author: spier

index.html

@@ -7,7 +7,7 @@
 		<title>Patterns Advent Calendar / InnerSource Commons</title>
 		<meta name="description" content="An advent calendar for 2025, to highlight InnerSource patterns that need your help!" />
 		<meta name="keywords" content="advent calendar, web, html template, 3d, cubes, css, javascript, anime.js" />
-		<meta name="author" content="Codrops" />
+		<meta name="author" content="InnerSource Commons" />
 		<link rel="shortcut icon" href="favicon.ico">
 		<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700|Droid+Sans+Mono" rel="stylesheet" />
 		<link rel="stylesheet" type="text/css" href="css/normalize.css" />
@@ -77,9 +77,9 @@ <h1 class="codrops-header__title">Patterns Advent Calendar</h1>
 					<div class="cube" data-bg-color="#E0E1F5" data-title="Principle Of Having"></div>
 					<div class="cube" data-bg-color="#DFD1F0" data-title="Enemies"></div>
 					<div class="cube" data-bg-color="#DFD1F0" data-title="Better World"></div>
-					<div class="cube" data-inactive data-bg-color="#6161616" data-title="Coming soon"></div>
-					<div class="cube" data-inactive data-bg-color="#6161616" data-title="Coming soon"></div>
-					<div class="cube" data-inactive data-bg-color="#6161616" data-title="Coming soon"></div>
+					<div class="cube" data-bg-color="#6161616" data-title="23"></div>
+					<div class="cube" data-bg-color="#6161616" data-title="24"></div>
+					<div class="cube" data-bg-color="#6161616" data-title="25"></div>
 				</div>
 				<div class="content">
 					<!-- 1 -->
@@ -197,6 +197,21 @@ <h3 class="content__title">Better World</h3>
 						<p class="content__description">If you assume that there is no hope, you guarantee that there will be no hope. If you assume that there is an instinct for freedom, that there are opportunities to change things, then there is a possibility that you can contribute to making a better world.</p>
 						<p class="content__meta">Noam Chomsky</p>
 					</div>
+					<div class="content__block">
+						<h3 class="content__title">23</h3>
+						<p class="content__description">23</p>
+						<p class="content__meta">23</p>
+					</div>
+					<div class="content__block">
+						<h3 class="content__title">24</h3>
+						<p class="content__description">24</p>
+						<p class="content__meta">24</p>
+					</div>
+					<div class="content__block">
+						<h3 class="content__title">25</h3>
+						<p class="content__description">25</p>
+						<p class="content__meta">25</p>
+					</div>
 					<div class="content__number">0</div>
 					<button class="btn-back" aria-label="Back to the grid view">&crarr;</button>
 				</div><!-- /content -->

js/main2.js

@@ -200,14 +200,20 @@
 		this.days = [];
 		var self = this;
 		this.calendarDays.forEach(function(d, pos) {
-			// Get the bg color defined in the data-bg-color of each division.
+			// Advent calendar logic: only activate days that have been reached
+			var today = new Date(2025, 11, 5); // Simulates December 5, 2025: //new Date();
+			var year = 2025;
+			var month = 11; // December (0-based)
+			var dayOfMonth = pos + 1;
+			var unlockDate = new Date(year, month, dayOfMonth);
+			var isActive = today >= unlockDate && !d.hasAttribute('data-inactive');
 			var day = new Day({
-					number: pos,
-					color: d.getAttribute('data-bg-color') || '#f1f1f1',
-					previewTitle: d.getAttribute('data-title') || '',
-					inactive: d.hasAttribute('data-inactive')
-				}),
-				content = contents[pos];
+				number: pos,
+				color: d.getAttribute('data-bg-color') || '#f1f1f1',
+				previewTitle: d.getAttribute('data-title') || '',
+				inactive: !isActive
+			}),
+			content = contents[pos];
 
 			if( content !== undefined ) {
 				var contentTitle = contents[pos].querySelector('.content__title');