Tweaked so that displayInColumn: true works

Also added sample markup/styling for this so that it side scrolls

Changes default Timezone to UTC

Author: oilee80

calus.js

@@ -39,7 +39,8 @@ let defaultTemplate = `
         </div>
     </div>
 </div>
-`
+`;
+
 export default function calus(options) {
     let el = options.el || '#calendar'
     let docEl = el instanceof HTMLElement ? el : document.querySelector(el)
@@ -50,7 +51,7 @@ export default function calus(options) {
         docEl.innerHTML = defaultTemplate
     }
 
-    let timezone = options.timezone || 'America/Los_Angeles'
+    let timezone = options.timezone || 'utc';
 
     return new Vue({
         el: el,
@@ -59,11 +60,14 @@ export default function calus(options) {
             // set this if you want to provide a list of ISO dates instead of Luxon
             // date objects)
             availableDates: options.availableDates || [],
+
             // currently selected date. this is reset when changing available dates
             selected: null,
+
             // whether to show all the months in a column, or a single month with
             // controls to change which month is shown
             displayInColumn: options.displayInColumn || false,
+
             // which month is currently shown on screen (only used when
             // `displayInColumn` is false)
             currentDisplayedMonth: DateTime.local().setZone(timezone, { keepLocalTime: true }).startOf('month'),
@@ -73,6 +77,7 @@ export default function calus(options) {
 
             // callback for when an available date is clicked
             onSelect: options.onSelect || function (day) { },
+
             // callback for when selected month is changed with button
             onChangeMonth: options.onChangeMonth || function(prev, current) { },
         },
@@ -87,8 +92,8 @@ export default function calus(options) {
                     : this.now.plus({ months: 2 })
             },
             months: function () {
-                let months = []
-                let date = null
+                let months = [];
+                let date = null;
 
                 if (this.displayInColumn) {
                     date = this.firstAvailable < this.now ? this.firstAvailable : this.now
@@ -98,16 +103,22 @@ export default function calus(options) {
 
                 let startOfCurrentlyDisplayed = this.availableDates.findIndex(x => x > date)
                 let available = this.availableDates.slice(this.displayInColumn ? 0 : startOfCurrentlyDisplayed)
-
                 let end = (this.displayInColumn ? this.lastAvailable : this.currentDisplayedMonth)
 
-                let startOfToday = this.now.startOf('day')
+                let startOfToday = this.now.startOf('day');
 
                 while (date.startOf('month') <= end) {
                     let days = []
-
-                    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 })
+                    let monthStart;
+                    let monthEnd;
+
+                    if (this.displayInColumn) {
+                        monthStart = date.hasSame(this.now, 'month') ? date : date.startOf('month');
+                        monthEnd = date.endOf('month');
+                    } else {
+                        monthStart = date.startOf('month').startOf('week').plus({ days: this.weekStartOffset });
+                        monthEnd = date.endOf('month').endOf('week').plus({ days: this.weekStartOffset });
+                    }
 
                     for (let day = monthStart; day <= monthEnd; day = day.plus({ days: 1 })) {
                         while(available.length && day > available[0]) {
@@ -134,8 +145,8 @@ export default function calus(options) {
 
                     months.push({
                         time: date.startOf('month'),
-                        isCurrentMonth: days[15].time.startOf('month').toFormat('y-MMM') === startOfToday.startOf('month').toFormat('y-MMM'),
-                        isInCurrentYear: days[15].time.startOf('year').toFormat('y') === startOfToday.startOf('year').toFormat('y'),
+                        isCurrentMonth: (this.displayInColumn ? days[0] : days[15]).time.startOf('month').toFormat('y-MMM') === startOfToday.startOf('month').toFormat('y-MMM'),
+                        isInCurrentYear: (this.displayInColumn ? days[0] : days[15]).time.startOf('year').toFormat('y') === startOfToday.startOf('year').toFormat('y'),
                         days: days
                     })
 

demo/script.js

@@ -1,8 +1,30 @@
 document.addEventListener('DOMContentLoaded', () => {
-    let calendar = new Calus({
-        el: '#calendar',
+    let calendar1 = new Calus({
+        el: '#calendar1',
         useDefaultTemplate: true,
-    })
+    });
 
-    console.log(calendar)
+    console.log(calendar1);
+
+    let calendar2 = new Calus({
+        el: '#calendar2',
+        availableDates: [
+            window.luxon.DateTime.local(),
+            window.luxon.DateTime.local().plus({days: 1}),
+            window.luxon.DateTime.local().plus({days: 2}),
+            window.luxon.DateTime.local().plus({weeks: 1}),
+            window.luxon.DateTime.local().plus({weeks: 2}),
+            window.luxon.DateTime.local().plus({months: 2}),
+        ]
+    });
+
+    console.log(calendar2);
+
+    let calendar3 = new Calus({
+        el: '#calendar3',
+        displayInColumn: true,
+        useDefaultTemplate: true,
+    });
+
+    console.log(calendar3);
 })

demo/style.css

@@ -14,13 +14,53 @@
 }
 
 .month__days .day {
-    padding: 0.25em 0;
+    padding: 0.25em;
 }
 
 .month__days .day.is-past {
-    opacity: 0.5;
+    opacity: 0.6;
+}
+.month__days .day.is-different-month {
+    opacity: 0.15;
+}
+
+.month__days .day.is-available {
+    background-color: #000;
+    border-radius: 100%;
+    color: #fff;
+    font-weight: bold;
+}
+.month__days .day.is-this-month.is-available {
+    cursor: pointer;
 }
 
 .month__days .day.is-today {
     text-decoration: underline;
+}
+
+
+
+.month-container--column {
+    display: flex;
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    width: auto;
+}
+.month-container--column .month {
+    flex: 0 0 auto;
+}
+.month-container--column .month__header {
+    display: block;
+    text-align: left;
+}
+.month-container--column .month__text {
+    left: 0;
+    position: sticky;
+}
+.month-container--column .month__days {
+    display: block;
+    white-space: nowrap;
+}
+.month-container--column .day {
+    display: inline-block;
 }

dist/calus.lib.js

@@ -4,14 +4,61 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+    <script src="dist/calus.lib.js"></script>
+
+    <!-- Below includes are only required for Demo purposes -->
     <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="demo/script.js"></script>
     <title>Document</title>
 </head>
 <body>
-    <div id="calendar"></div>
+    <h1>Example with <code>useDefaultTemplate: true</code> as an option</h1>
+    <div id="calendar1"></div>
+
+    <h1>Example with custom template</h1>
+    <p>Also makes use of the <code>availableDates</code> option to mark dates as available</p>
+    <div id="calendar2">
+        <div class="month-container" v-bind:class="{ 'month-container--column': displayInColumn }">
+            <div class="month" v-for="month in months" v-bind:data-month="month.time.toFormat('MM/y')">
+                <div class="month__header">
+                    <button type="button" class="month__control month__control--prev" v-if="!displayInColumn" v-on:click="scrollMonth(-1)">
+                        ‹
+                    </button>
+                    <div class="month__text">
+                        {{ month.time.toFormat(month.isInCurrentYear ? 'MMMM' : 'MMMM y') }}
+                    </div>
+                    <button type="button" class="month__control month__control--prev" v-if="!displayInColumn" v-on:click="scrollMonth(1)">
+                        ›
+                    </button>
+                </div>
+                <div class="month__days">
+                    <div class="day"
+                        v-for="day in month.days"
+                        v-bind:data-date="+day.time"
+                        v-bind:class="{
+                            'is-today': day.isToday,
+                            'is-not-today': !day.isToday,
+                            'is-available': day.isAvailable,
+                            'is-not-available': !day.isAvailable,
+                            'is-past': day.isPast,
+                            'is-future': day.isFuture,
+                            'is-selected': day.isSelected,
+                            'is-this-month': day.isThisMonth,
+                            'is-different-month': !day.isThisMonth,
+                        }"
+                        v-on:click="select(day)"
+                    >
+                        <div class="day__inner">
+                            {{ day.time.day }}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <h1>Example of the calendar displayed as a column</h1>
+    <div id="calendar3"></div>
 </body>
 </html>

index.html

@@ -7,7 +7,7 @@
     "build": "webpack",
     "start": "npx http-server . -d",
     "test": "echo \"Error: no test specified\" && exit 1",
-    "watch": "webpack --watch"
+    "watch": "NODE_ENV=development webpack --watch"
   },
   "typings": "./index.d.ts",
   "author": "",

package.json

@@ -26,6 +26,7 @@ module.exports = {
             }
         ]
     },
+    mode: process.env.NODE_ENV ? process.env.NODE_ENV : 'production',
     resolve: {
         alias: {
             "vue$": "vue/dist/vue.esm.js",