worked on calendar

DBTApp/app/src/main/java/de/cdaut/dbtapp/MainActivity.kt

@@ -10,6 +10,7 @@ import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Emergency
 import androidx.compose.material3.FloatingActionButton
 import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
@@ -38,6 +39,7 @@ class MainActivity : ComponentActivity() {
 @Composable
 private fun MainContent() {
     val navController = rememberNavController()
+    MaterialTheme {
         Box {
             Scaffold(
                 modifier = Modifier.fillMaxSize(),
@@ -69,6 +71,7 @@ private fun MainContent() {
                 }
             }
         }
+    }
 }
 
 @Composable

DBTApp/app/src/main/java/de/cdaut/dbtapp/components/Tracking.kt

@@ -1,6 +1,7 @@
 package de.cdaut.dbtapp.components
 
 import androidx.compose.foundation.background
+import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
@@ -12,16 +13,17 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.lazy.grid.GridCells
 import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
+import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.ChevronLeft
 import androidx.compose.material.icons.filled.ChevronRight
 import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.getValue
+import androidx.compose.runtime.MutableState
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
-import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
@@ -54,10 +56,11 @@ private fun TopCalendarPrev() {
 @Composable
 private fun TopCalendar() {
 
-    var currentDate: LocalDate by remember {
+    var currentDateMut: MutableState<LocalDate> = remember {
         mutableStateOf(LocalDate.now())
     }
 
+
     Column(
         horizontalAlignment = Alignment.CenterHorizontally
     ) {
@@ -72,7 +75,7 @@ private fun TopCalendar() {
             //Header stating the currently selected date
             Text(
                 fontSize = 4.5.em,
-                text = currentDate.format(
+                text = currentDateMut.value.format(
                     DateTimeFormatter.ofLocalizedDate(FormatStyle.LONG)
                         .withLocale(LocalConfiguration.current.locales[0])
                 )
@@ -82,7 +85,7 @@ private fun TopCalendar() {
                 Icon(
                     modifier = Modifier
                         .clickable(onClick = {
-                            currentDate = currentDate.minusMonths(1)
+                            currentDateMut.value = currentDateMut.value.minusMonths(1)
                         })
                         .size(30.dp),
                     imageVector = Icons.Filled.ChevronLeft,
@@ -92,7 +95,7 @@ private fun TopCalendar() {
                 Icon(
                     modifier = Modifier
                         .clickable(onClick = {
-                            currentDate = currentDate.plusMonths(1)
+                            currentDateMut.value = currentDateMut.value.plusMonths(1)
                         })
                         .size(30.dp),
                     imageVector = Icons.Filled.ChevronRight,
@@ -118,15 +121,16 @@ private fun TopCalendar() {
             }
         }
 
-        CalendarDaysGrid(currentDate)
+        CalendarDaysGrid(currentDateMut)
     }
 }
 
 @Composable
-fun CalendarDaysGrid(date: LocalDate, modifier: Modifier = Modifier) {
+fun CalendarDaysGrid(selectedDateMut: MutableState<LocalDate>, modifier: Modifier = Modifier) {
     val locale = LocalConfiguration.current.locales[0]
+    val selectedDate = selectedDateMut.value
 
-    val firstDayOfMonth = LocalDate.of(date.year, date.month, 1)
+    val firstDayOfMonth = LocalDate.of(selectedDate.year, selectedDate.month, 1)
     val totalDaysInMonth = firstDayOfMonth.lengthOfMonth()
     val firstDayOfWeek = WeekFields.of(locale).firstDayOfWeek
 
@@ -146,14 +150,33 @@ fun CalendarDaysGrid(date: LocalDate, modifier: Modifier = Modifier) {
         modifier = Modifier.fillMaxWidth()
     ) {
         items(days.size) { index ->
-            Box(
+            days[index]?.let { day ->
-                modifier = Modifier
+
+                var dayBoxModifier = Modifier
                     .aspectRatio(1f)
-                    .padding(4.dp),
+                    .padding(4.dp)
+                    .clickable(onClick = {
+                        selectedDateMut.value = LocalDate.of(
+                            selectedDate.year,
+                            selectedDate.month,
+                            day
+                        )
+                    })
+
+                //add a mark to the currently selected day
+                if (day == selectedDate.dayOfMonth) {
+                    dayBoxModifier = dayBoxModifier.border(
+                        2.dp,
+                        MaterialTheme.colorScheme.primaryContainer,
+                        CircleShape
+                    )
+                }
+
+                Box(
+                    modifier = dayBoxModifier,
                     contentAlignment = Alignment.Center
                 ) {
-                days[index]?.let {
+                    Text(text = day.toString())
-                    Text(text = it.toString())
                 }
             }
         }