frontend: stolen calendar logic

frontend/src/lib/components/calendar.svelte

@@ -1,8 +1,73 @@
 <script lang="ts">
-    let current: Number = 9;
 
-    function set_day(day: Number) {
-        current = day;
+	var dayNames = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+	let monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+
+	let headers: Array<string> = [];
+	let now = new Date();
+	let year = now.getFullYear();		//	this is the month & year displayed
+	let month = now.getMonth();
+    let current = now.getDay();
+	var days: Array<Object> = [];	//	The days to display in each box
+
+	$: month,year,initContent();
+
+	// choose what date/day gets displayed in each date box.
+	function initContent() {
+		headers = dayNames;
+		initMonth();
+	}
+
+	function initMonth() {
+		days = [];
+		//	find the last Monday of the previous month
+		var firstDay = new Date(year, month, 1).getDay();
+		//console.log('fd='+firstDay+' '+dayNames[firstDay]);
+		var daysInThisMonth = new Date(year, month+1, 0).getDate();
+		var daysInLastMonth = new Date(year, month, 0).getDate();
+		var prevMonth = month==0 ? 11 : month-1;
+		
+		//	show the days before the start of this month (disabled) - always less than 7
+		for (let i=daysInLastMonth-firstDay;i<daysInLastMonth;i++) {
+			let d = new Date(prevMonth==11?year-1:year,prevMonth,i+1);
+			days.push({name:''+(i+1),enabled:false,date:d,});
+		}
+		//	show the days in this month (enabled) - always 28 - 31
+		for (let i=0;i<daysInThisMonth;i++) {
+			let d = new Date(year,month,i+1);
+			if (i==0) days.push({name:(i+1),enabled:true,date:d,});
+			else days.push({name:''+(i+1),enabled:true,date:d,});
+			//console.log('i='+i+'  dt is '+d+' date() is '+d.getDate());
+		}
+		//	show any days to fill up the last row (disabled) - always less than 7
+		for (let i=0;days.length%7;i++) {
+			let d = new Date((month==11?year+1:year),(month+1)%12,i+1);
+			if (i==0) days.push({name:(i+1),enabled:false,date:d,});
+			else days.push({name:''+(i+1),enabled:false,date:d,});
+		}
+        console.log(days);
+	}
+	
+	function next() {
+		month++;
+		if (month == 12) {
+			year++;
+			month=0;
+		}
+	}
+	function prev() {
+		if (month==0) {
+			month=11;
+			year--;
+		} else {
+			month--;
+		}
+	}
+
+    let selected: Object;
+
+    function set_day(day: Object) {
+        selected = day;
         return null;
     }
 </script>
@@ -10,23 +75,23 @@
 <div class="calendar input rounded">
     <div class="month">
         <ul>
-            <li class="prev">&#10094;</li>
-            <li class="next">&#10095;</li>
-            <li>Август 2025</li>
+            <button class="prev" onclick={prev()}>&#10094;</button>
+            <button class="next" onclick={next()}>&#10095;</button>
+            <li>{monthNames[month]} {year}</li>
         </ul>
     </div>
     <ul class="weekdays">
-        {#each ["Пн", "Вт", "Ср", "Чт", "Пт", "Сб", "Вс"] as weekday}
+        {#each headers as weekday}
             <li>{weekday}</li>
         {/each}
     </ul>
     <ul class="days">
-        {#each [...Array(31).keys()] as day}
+        {#each days as day}
             <li>
-                {#if current == day+1}
-                    <button class="active">{day+1}</button>
+                {#if selected == day}
+                    <button class="active">{day.name}</button>
                 {:else}
-                    <button class="nonactive" onclick={set_day(day+1)}>{day+1}</button>
+                    <button class="nonactive" onclick={set_day(day)}>{day.name}</button>
                 {/if}
             </li>
         {/each}
@@ -64,11 +129,13 @@
     .month .prev {
         float: inline-start;
         cursor: pointer;
+        background: none;
     }
 
     .month .next {
         float: inline-end;
         cursor: pointer;
+        background: none;
     }
 
     .weekdays {