Skip to content

Commit

Permalink
Porting over in a few of Lees build changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@carl-wells-crowdhandler
carl-wells-crowdhandler committed Mar 4, 2020
2 parents 0fa62c0 + c77ec78 commit 06c08a9
Show file tree
Hide file tree
Showing 6 changed files with 331 additions and 27 deletions.
86 changes: 64 additions & 22 deletions calus.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,39 @@ import Vue from 'vue'
import { DateTime } from 'luxon'

let defaultTemplate = `
<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-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>
<button
type="button"
class="month__control month__control--prev"
v-if="!displayInColumn"
v-on:click="scrollMonth(-1)"
v-bind:disabled="limitCalendar && month.time.startOf('month') &lt; startDate"
>
‹
</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)"
v-bind:disabled="limitCalendar && month.time.endOf('month') &gt; endDate"
>
›
</button>
</div>
<div class="month__days">
<div class="day"
v-for="day in month.days"
Expand All @@ -39,29 +59,38 @@ let defaultTemplate = `
</div>
</div>
</div>
`
`;

export default function calus(options) {
let el = options.el || '#calendar'
let docEl = el instanceof HTMLElement ? el : document.querySelector(el)

if (!docEl) throw 'no element found: ' + docEl

docEl.innerHTML = defaultTemplate
if (options.useDefaultTemplate) {
docEl.innerHTML = defaultTemplate
}

let timezone = options.timezone || 'America/Los_Angeles'
let timezone = options.timezone || 'utc';

return new Vue({
el: el,
data: {
// If set to true then the calendar will be limited to [ start/end | now/last available | first available/now ]
limitCalendar: !!options.limitCalendar,

// list of dates which are available to select (use `setAvailable()` to
// 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().startOf('month'),
Expand All @@ -70,37 +99,50 @@ 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) { },

// Sets when the calendar should start (defaults to today)
start: options.start,

// Sets when the calendar should end (defaults to the last "available" date)
end: options.end,
},
computed: {
now: () => DateTime.local(),
firstAvailable: function () {
return this.availableDates.length ? this.availableDates[0] : this.now;
},
endDate: function () {
return this.end ?
this.end :
this.lastAvailable ?
this.lastAvailable :
this.now;
},
lastAvailable: function () {
return this.availableDates.length
? this.availableDates[this.availableDates.length - 1]
: 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
} else {
date = this.currentDisplayedMonth
}

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 startOfCurrentlyDisplayed = this.availableDates.findIndex(x => x > date);
let available = this.availableDates.slice(this.displayInColumn ? 0 : startOfCurrentlyDisplayed);
let end = (this.displayInColumn ? this.endDate : this.currentDisplayedMonth);

let startOfToday = this.now.startOf('day')
let startOfToday = this.now.startOf('day');

while (date <= end) {
while (date.startOf('month') <= end) {
let days = []

let monthStart = date.startOf('month').startOf('week').plus({ days: this.weekStartsOnSunday ? -1 : 0 })
Expand Down
7 changes: 7 additions & 0 deletions dist/calus.lib.js
View file

Large diffs are not rendered by default.

54 changes: 51 additions & 3 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,62 @@
<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="https://cdn.jsdelivr.net/npm/[email protected]/build/global/luxon.min.js"></script>
<script src="dist/calus.lib.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css">
<title>Calus</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)" v-bind:disabled="month.time.startOf('month') &lt; startDate">
‹
</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)" v-bind:disabled="month.time.endOf('month') &gt; endDate">
›
</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>

<h1>Example of the calendar with a set start/end date</h1>
<p>Also limited to start/end dates (user cannot scroll further)</p>
<div id="calendar4"></div>
</body>
</html>
Loading

0 comments on commit 06c08a9

Please sign in to comment.