new design and added class function

2025-01-28 06:19:12 +01:00
parent b3d6c7c75b
commit 8e0d7c9e8d
5 changed files with 255 additions and 100 deletions
--- a/index.html
+++ b/index.html
@@ -8,19 +8,19 @@

    <title>Calendar</title>

-    <link href="style.css" rel="stylesheet">
+    <link href="./style.css" rel="stylesheet">
 </head>
 <body>
 <div class="container">
-    <div class="calendar">
+    <div id="calendar">
        <div id="calendar__header">
-            <div class="year">2025</div>
+            <div class="year" id="year">2024</div>
            <div class="actions">
-                <button>-</button>
+                <button> <</button>
                <button>Today</button>
-                <button>+</button>
+                <button> ></button>
            </div>
-            <div class="month">September</div>
+            <div class="month" id="month">September</div>
        </div>

        <div id="calendar__body">
@@ -28,6 +28,23 @@
    </div>
 </div>

-<script src="script.js"></script>
+<footer>
+    <div>
+        &copy; 2025 VikingOwl
+    </div>
+    <div style="margin: 0 .5rem">&mdash;</div>
+    <a href="https://somegit.dev/vikingowl/Calendar">Gitea</a>
+</footer>
+
+<script type="module">
+    import Calendar from "./Calendar.js";
+
+    const calendarDiv = document.querySelector("#calendar");
+    if (calendarDiv) {
+        const calendar = new Calendar(calendarDiv, {locale: 'de-DE', firstDayInWeek: 'Monday'})
+        calendar.init()
+        calendar.render()
+    }
+</script>
 </body>
 </html>