cesque
diff --git a/‎calus.js
+5-2 b/‎calus.js
+5-2
diff --git a/‎script.js ‎demo/script.js
+2-1 b/‎script.js ‎demo/script.js
+2-1
diff --git a/‎demo/style.css
+26 b/‎demo/style.css
+26
diff --git a/‎dist/calus.lib.js
+1-1 b/‎dist/calus.lib.js
+1-1
diff --git a/‎index.html
+2-1 b/‎index.html
+2-1
diff --git a/‎package-lock.json
+203 b/‎package-lock.json
+203
@@ -68,6 +68,9 @@ export default function calus(options) {
             // `displayInColumn` is false)
             currentDisplayedMonth: DateTime.local().setZone(timezone, { keepLocalTime: true }).startOf('month'),
 
+            // force the week to start on another day (0 is Monday)
+            weekStartOffset: options.weekStartOffset || 0,
+
             // callback for when an available date is clicked
             onSelect: options.onSelect || function (day) { },
             // callback for when selected month is changed with button
@@ -103,8 +106,8 @@ export default function calus(options) {
                 while (date.startOf('month') <= end) {
                     let days = []
 
-                    let monthStart = date.startOf('month').startOf('week')
-                    let monthEnd = date.set({ day: date.daysInMonth }).plus({ weeks: 1 }).startOf('week').plus({ days: -1 })
+                    let monthStart = date.startOf('month').startOf('week').plus({ days: this.weekStartOffset })
+                    let monthEnd = date.set({ day: date.daysInMonth }).plus({ weeks: 1 }).startOf('week').plus({ days: this.weekStartOffset })
 
                     for (let day = monthStart; day <= monthEnd; day = day.plus({ days: 1 })) {
                         while(available.length && day > available[0]) {
 
@@ -1,6 +1,7 @@
 document.addEventListener('DOMContentLoaded', () => {
     let calendar = new Calus({
-        el: '#calendar'
+        el: '#calendar',
+        useDefaultTemplate: true,
     })
 
     console.log(calendar)
 
@@ -0,0 +1,26 @@
+.month-container {
+    text-align: center;
+    width: 25%;
+}
+
+.month__header {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);;
+}
+
+.month__days {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+}
+
+.month__days .day {
+    padding: 0.25em 0;
+}
+
+.month__days .day.is-past {
+    opacity: 0.5;
+}
+
+.month__days .day.is-today {
+    text-decoration: underline;
+}
@@ -6,8 +6,9 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/global/luxon.min.js"></script>
+    <link href="demo/style.css" rel="stylesheet">
     <script src="dist/calus.lib.js"></script>
-    <script src="script.js"></script>
+    <script src="demo/script.js"></script>
     <title>Document</title>
 </head>
 <body>