vue-simple-calendar - npm Package Compare versions

Comparing version 2.2.0 to 3.0.0

CHANGELOG.md

@@ -1,101 +0,140 @@
-
 ## Future?
-- Mobile-compatible drag and drop
-- Handles to drag events to make them longer or shorter
 
-## 3.0.0 (NOT STARTED)
-- CSS reorganization to rely less on complex cascading (easier theming)
-- More flexible header customization
-- IE11 support fix? (I'm losing my ability to test IE11 soon but plan to maintain compatibility for a bit longer, with some help)
+* Mobile-compatible drag and drop
+* Handles to drag events to make them longer or shorter
+* Add month name to the 1st of the month when viewing multiple months
 
+## 3.0.0 (2018-05-05)
+
+* Added `dateClasses` prop to allow easy dynamic styling of specific dates (#55,  thanks @LTroya!)
+* Massive CSS reorganization to rely less on complex cascading for easier theming (#45, #52)
+* Removed need for complex z-index on week and event elements (`zIndex` no longer passed in event slot)
+* Removed need for eventRowX class. Top position CSS is now computed dynamically based on the row and passed to the event slot as "top".
+* Removed limitation of 20 event rows per week
+* Default header buttons no longer use CSS content for their labels
+* The `dayContent` slot now does **not** contain the `cv-date-number` div, making it easier to provide your own content without having to duplicate the day number.
+* The `content` element within each day has been removed, as it is no longer needed. The default theme now uses box-shadow rather than border to highlight the date when dragging an event.
+* Fixed drag and drop issue in Firefox (#57)
+* Implemented new custom header capability, and refactored the default header as a separate component with the same interface
+* Upgraded to webpack 4.7
+* Refactored periodLabel from CSS logic into a reusable function
+* Transpilation to ES5 appears to be functioning properly
+* Activating the default theme now requires a class ("theme-default") (#45)
+* Fixed and tested polyfill in the same application in IE11
+* Fixed flexbox rendering issue in IE11
+
+### Migration guide for 3.0.0
+* IE11 support has been fixed! However, you will need to include `babel-polyfill` in your app's entry point, webpack config, or via a script tag, if you aren't already doing so.
+* Any custom themes or other CSS overrides will need to be modified for the upgraded classes and structure.
+* If you use the `dayContent` slot, you no longer need to render the day number, it's outside the slot now.
+* There was a problem in the default height of the calendar (it wasn't 100% of the parent), that has been resolved.
+* Webpack 4 is required to build the component or sample app. If you're just installing and using the component, this won't impact you.
+* Creating and slotting a custom header is now very simple.
+* To activate the default theme, your `<calendar-view>` element will need the `theme-default` class (in addition to importing the CSS file, of course).
+
+## 2.2.1 (2018.03.19)
+
+* Fix where babel was not transpiling appropriately for IE11 (#46)
+* Fix where "sticky" content was causing issues for IE11, which doesn't support sticky
+* Never published on npm due to continued IE11 issues
+
 ## 2.2.0 (2018.03.18)
-- Removed the events deprecated in 2.1.0
-- Upgraded to Webpack 4
-- Moved version history to this CHANGELOG file
-- Moved some opinionated styles from the baseline (SFC) to the default theme.
-- Fixed event slot issue reported in #42 and #50 (thanks @lexuzieel!).
-- Added `zIndex` prop to event scoped slot properties.
-- Formatted to meet newer eslint rules.
-- Corrected some minor positioning issues with events (including removing remaining em-based borders)
-- The `click-event` and `drag-*` events events now passes the **normalized** event (same as the "event" named slot). You can access your original event (*which is the one you should modify*) using the `originalEvent` attribute. While this is a minor breaking change, I wasn't quite ready to move up to 3.0, and this does make the API more consistent in how it passes events back to the caller.
-- **Known issue:** Babel is not currently transpiling correctly to provide IE11 support. Looking for assistance.
 
+* Removed the events deprecated in 2.1.0
+* Upgraded to Webpack 4
+* Moved version history to this CHANGELOG file
+* Moved some opinionated styles from the baseline (SFC) to the default theme.
+* Fixed event slot issue reported in #42 and #50 (thanks @lexuzieel!).
+* Added `zIndex` prop to event scoped slot properties.
+* Formatted to meet newer eslint rules.
+* Corrected some minor positioning issues with events (including removing remaining em-based borders)
+* The `click-event` and `drag-*` events events now passes the **normalized** event (same as the "event" named slot). You can access your original event (_which is the one you should modify_) using the `originalEvent` attribute. While this is a minor breaking change, I wasn't quite ready to move up to 3.0, and this does make the API more consistent in how it passes events back to the caller.
+* **Known issue:** Babel is not currently transpiling correctly to provide IE11 support. Looking for assistance.
+
 ## 2.1.2 / 2.1.3 (2018.01.27)
-- Prevent click-date events for future dates when disableFuture is true (feature parity with disablePast). Fixes #40.
 
+* Prevent click-date events for future dates when disableFuture is true (feature parity with disablePast). Fixes #40.
+
 ## 2.1.0 / 2.1.1 (2018.01.25)
+
 The events below were renamed to make them kebab-case (for DOM template compatibility) and to refine the wording. The old event names, shown here, were deprecated in this version and removed in 2.2:
-- `clickDay`
-- `clickEvent`
-- `setShowDate`
-- `dragEventStart`
-- `dragEventEnterDate`
-- `dragEventLeaveDate`
-- `dragEventOverDate`
-- `dropEventOnDate`
 
+* `clickDay`
+* `clickEvent`
+* `setShowDate`
+* `dragEventStart`
+* `dragEventEnterDate`
+* `dragEventLeaveDate`
+* `dragEventOverDate`
+* `dropEventOnDate`
+
 ## 2.0.1 (2018.01.23)
-- Fixed `outsideOfMonth` logic bug, #38
 
+* Fixed `outsideOfMonth` logic bug, #38
+
 ## 2.0.0 (2018.01.01)
+
 Version 2.0 includes some major upgrades! Here are the new features:
 
-- Dates passed as strings are interpreted using *browser local* time, not UTC, which prevents the event from showing up on an unexpected date.
-- Optional display of start and/or end times of events, with options for formatting
-- Ability to view more than one month at a time
-- Week view (including multi-week)
-- Year view (including, but not necessarily sanely, multi-year support)
-- New named slot for `event`
-- All slots now pass back useful properties the caller can bring into their scope
-- The main grid is scrollable if it is too tall for the component
-- Each week is scrollable if its events are too tall for the week's row in the component
+* Dates passed as strings are interpreted using _browser local_ time, not UTC, which prevents the event from showing up on an unexpected date.
+* Optional display of start and/or end times of events, with options for formatting
+* Ability to view more than one month at a time
+* Week view (including multi-week)
+* Year view (including, but not necessarily sanely, multi-year support)
+* New named slot for `event`
+* All slots now pass back useful properties the caller can bring into their scope
+* The main grid is scrollable if it is too tall for the component
+* Each week is scrollable if its events are too tall for the week's row in the component
 
 This means there are some breaking changes:
-- The component is now called **calendar-view** rather than **calendar-month**, to better reflect the flexibility of the period shown. (The package is still `vue-simple-calendar`.)
-- Because of the above, the CSS class of the root element has also changed to **calendar-view**.
-- The CSS class of the element containing the body of the view has changed from **month** to **weeks**, since periods other than a single month can be shown.
-- If you pass dates as strings, they MUST be in ISO form ("yyyy-mm-dd hh:mm:ss"). The time portion is optional, and within time, the minutes and seconds are also optional.
-- The header has been refactored to take better advantage of flexbox, increase the header text size, and group the buttons. This should make it easier to customize, but if you have a custom theme, it may need some updates.
-- If the calendar is too short to view the entire period, the calendar body is scrollable (scroll bars are hidden, use touch or scroll wheel).
-- If an individual week is too short to view all events in the week, the week's events are scrollable (scroll bars are hidden, use touch or scroll wheel).
-- The minimum cell height is now 3em, to ensure that at least one event shows vertically, and if there are others to scroll to, a small part of the next one is visible.
-- Emitted drag and drop events pass the original calendar event, not just its id.
-- The `dragEventDragOverDate` event (undocumented) has been renamed as `dragEventOverDate`. Prior to 2.0, user events emitted the calendar event's *id* as the first argument rather than the calendar event itself. Since not all calendar events will have an ID and the parent will probably want access to the actual calendar event, I changed these Vue events to emit the original calendar event, not just its id.
-- The `dayList` slot has been replaced with `dayHeader`, and slot `day` has been renamed as `dayContent`.
-- The word `slot` in the sense of an event display row has been renamed as `eventRow` in the code and CSS to avoid confusion with Vue slots.
-- Up to 20 events per day are now supported (up from 10).
-- Some basic colors, borders, etc. have been moved from the default theme into the component's core CSS, allowing the component to have a more appealing look with no theme in place and a better starting point for custom themes.
-- Reversed the circle-arrow labels to return to the current period. These are now clockwise to "go forward" to return to the current period, counter-clockwise to "go back" to return to the current period.
 
+* The component is now called **calendar-view** rather than **calendar-month**, to better reflect the flexibility of the period shown. (The package is still `vue-simple-calendar`.)
+* Because of the above, the CSS class of the root element has also changed to **calendar-view**.
+* The CSS class of the element containing the body of the view has changed from **month** to **weeks**, since periods other than a single month can be shown.
+* If you pass dates as strings, they MUST be in ISO form ("yyyy-mm-dd hh:mm:ss"). The time portion is optional, and within time, the minutes and seconds are also optional.
+* The header has been refactored to take better advantage of flexbox, increase the header text size, and group the buttons. This should make it easier to customize, but if you have a custom theme, it may need some updates.
+* If the calendar is too short to view the entire period, the calendar body is scrollable (scroll bars are hidden, use touch or scroll wheel).
+* If an individual week is too short to view all events in the week, the week's events are scrollable (scroll bars are hidden, use touch or scroll wheel).
+* The minimum cell height is now 3em, to ensure that at least one event shows vertically, and if there are others to scroll to, a small part of the next one is visible.
+* Emitted drag and drop events pass the original calendar event, not just its id.
+* The `dragEventDragOverDate` event (undocumented) has been renamed as `dragEventOverDate`. Prior to 2.0, user events emitted the calendar event's _id_ as the first argument rather than the calendar event itself. Since not all calendar events will have an ID and the parent will probably want access to the actual calendar event, I changed these Vue events to emit the original calendar event, not just its id.
+* The `dayList` slot has been replaced with `dayHeader`, and slot `day` has been renamed as `dayContent`.
+* The word `slot` in the sense of an event display row has been renamed as `eventRow` in the code and CSS to avoid confusion with Vue slots.
+* Up to 20 events per day are now supported (up from 10).
+* Some basic colors, borders, etc. have been moved from the default theme into the component's core CSS, allowing the component to have a more appealing look with no theme in place and a better starting point for custom themes.
+* Reversed the circle-arrow labels to return to the current period. These are now clockwise to "go forward" to return to the current period, counter-clockwise to "go back" to return to the current period.
+
 #### Props Added in 2.0
+
 * `showEventTimes` - If true, shows the start and/or end time of an event beside the event title. Midnight is not shown, a midnight time is assumed to indicate an all-day or indeterminate time. (If you want to show midnight, use `00:00:01` and don't choose to show seconds.) The default is `false`.
 * `timeFormatOptions` - This takes an object containing `Intl.DateTimeFormat` options to be used to format the event times. The `locale` setting is automatically used. This option is ignored for browsers that don't support `Intl` (they will see the 24-hour, zero-padded time).
-* `displayPeriodUom` - The period type to show. By default this is `month`, *i.e.*, it shows a calendar in month-sized chunks. Other allowed values are `year` and `week`.
-* `displayPeriodCount` - The *number* of periods to show within the view. For example, if `displayPeriodUom` is `week` and `displayPeriodCount` is 2, the view will show a two-week period.
+* `displayPeriodUom` - The period type to show. By default this is `month`, _i.e._, it shows a calendar in month-sized chunks. Other allowed values are `year` and `week`.
+* `displayPeriodCount` - The _number_ of periods to show within the view. For example, if `displayPeriodUom` is `week` and `displayPeriodCount` is 2, the view will show a two-week period.
 
 ## 1.8.2 (2017.12.30)
-- A `dayList` slot was added.
-- A `day` slot was added.
-- A `header` slot was added (#32)
-- Fixed display issue (#33)
 
+* A `dayList` slot was added.
+* A `day` slot was added.
+* A `header` slot was added (#32)
+* Fixed display issue (#33)
+
 ## Older changes
 
-Date       | Version      | Notes
------------|--------------|--------
-2017.05.11 | 1.0.0        | First version
-2017.05.15 | 1.1.0        | Better demo styling; refactor code; add basic drag/drop capability; fix display issue when events not sorted by start date
-2017.05.20 | 1.2.0        | Redesigned to work around z-index context issue with multi-day events (events now positioned above days, weeks rendered individually). Significant improvements to handling of event slots and clipping when event content exceeds height/width.
-2017.05.21 | 1.3.0        | Fixed IE. Bad IE. Fixed CSS references to emoji. Default style adjustments. Clean up some old code. Add previous/next year buttons.
-2017.05.22 | 1.3.1        | Improved demo, first published to npm.
-2017.05.27 | 1.4.0        | Add new classes, move a few classes up to `calendar` node, rename a few classes to pascalCase for consistency.
-2017.07.16 | 1.5.0        | Clean up code, move date math to a mixin; allow `endDate`, `title`, and `id` to be optional; change so only core CSS (mostly position / metrics) is in the component, a separate CSS file contains the default theme. Reorganized and updated optional US holiday theme CSS file. Tweaked default theme and metrics for consistency and cleaner look. NOTE: the default component name is now `calendar-month`, as is the primary container's CSS class. This was done for possible future expansion to support other views (such as a week view) and to give the CSS a slightly more unique name without resorting to scoped CSS. The name of the npm package, repository, etc. remains vue-simple-calendar.
-2017.10.03 | 1.5.1        | Fix issue where months ending in Saturday did not show their last week. Moved mixin to component folder.
-2017.10.04 | 1.5.2        | Fix webpack issue with mixin import and Vue warning about non-primitive keys.
-2017.11.11 | 1.5.3        | Fix date differences over DST and toBeContinued logic (thanks @houseoftech and @sean-atomized!)
-2017.11.12 | 1.6.0        | Fix future/past classes. Tweaks to CSS to fix border render issue, simplify. Change height from aspect ratio to the height of the container (the reason for the minor version increment).
-2017.11.12 | 1.6.1        | Fix issues when events have a time other than midnight (they should be ignored). Add stylelint and vue lint, clean up package.json, other minor tweaks. Set browser compatibility to a minimum of IE10. Prevent issues from caching "today" value.
-2017.12.12 | 1.7.0        | Add `startingDayOfWeek` property to allow the calendar to optionally start on any desired day of the week
-2017.12.15 | 1.7.1        | Hopefully resolve reported babel preset error
-2017.12.17 | 1.8.0        | Split sample app to another repo, rebuild build/config scripts from scratch
-2017.12.17 | 1.8.1        | Add build for mixin
+| Date       | Version | Notes                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| ---------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| 2017.05.11 | 1.0.0   | First version                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| 2017.05.15 | 1.1.0   | Better demo styling; refactor code; add basic drag/drop capability; fix display issue when events not sorted by start date                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| 2017.05.20 | 1.2.0   | Redesigned to work around z-index context issue with multi-day events (events now positioned above days, weeks rendered individually). Significant improvements to handling of event slots and clipping when event content exceeds height/width.                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| 2017.05.21 | 1.3.0   | Fixed IE. Bad IE. Fixed CSS references to emoji. Default style adjustments. Clean up some old code. Add previous/next year buttons.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| 2017.05.22 | 1.3.1   | Improved demo, first published to npm.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| 2017.05.27 | 1.4.0   | Add new classes, move a few classes up to `calendar` node, rename a few classes to pascalCase for consistency.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| 2017.07.16 | 1.5.0   | Clean up code, move date math to a mixin; allow `endDate`, `title`, and `id` to be optional; change so only core CSS (mostly position / metrics) is in the component, a separate CSS file contains the default theme. Reorganized and updated optional US holiday theme CSS file. Tweaked default theme and metrics for consistency and cleaner look. NOTE: the default component name is now `calendar-month`, as is the primary container's CSS class. This was done for possible future expansion to support other views (such as a week view) and to give the CSS a slightly more unique name without resorting to scoped CSS. The name of the npm package, repository, etc. remains vue-simple-calendar. |
+| 2017.10.03 | 1.5.1   | Fix issue where months ending in Saturday did not show their last week. Moved mixin to component folder.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| 2017.10.04 | 1.5.2   | Fix webpack issue with mixin import and Vue warning about non-primitive keys.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| 2017.11.11 | 1.5.3   | Fix date differences over DST and toBeContinued logic (thanks @houseoftech and @sean-atomized!)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
+| 2017.11.12 | 1.6.0   | Fix future/past classes. Tweaks to CSS to fix border render issue, simplify. Change height from aspect ratio to the height of the container (the reason for the minor version increment).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| 2017.11.12 | 1.6.1   | Fix issues when events have a time other than midnight (they should be ignored). Add stylelint and vue lint, clean up package.json, other minor tweaks. Set browser compatibility to a minimum of IE10. Prevent issues from caching "today" value.                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| 2017.12.12 | 1.7.0   | Add `startingDayOfWeek` property to allow the calendar to optionally start on any desired day of the week                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| 2017.12.15 | 1.7.1   | Hopefully resolve reported babel preset error                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| 2017.12.17 | 1.8.0   | Split sample app to another repo, rebuild build/config scripts from scratch                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| 2017.12.17 | 1.8.1   | Add build for mixin                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |

dist/vue-simple-calendar.js

@@ -1,1 +0,1 @@
-!function(n,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("CalendarView",[],e):"object"==typeof exports?exports.CalendarView=e():n.CalendarView=e()}(window,function(){return function(n){var e={};function t(a){if(e[a])return e[a].exports;var r=e[a]={i:a,l:!1,exports:{}};return n[a].call(r.exports,r,r.exports,t),r.l=!0,r.exports}return t.m=n,t.c=e,t.d=function(n,e,a){t.o(n,e)||Object.defineProperty(n,e,{configurable:!1,enumerable:!0,get:a})},t.r=function(n){Object.defineProperty(n,"__esModule",{value:!0})},t.n=function(n){var e=n&&n.__esModule?function(){return n.default}:function(){return n};return t.d(e,"a",e),e},t.o=function(n,e){return Object.prototype.hasOwnProperty.call(n,e)},t.p="",t(t.s=8)}([function(n,e,t){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var a,r=t(4),i=(a=r)&&a.__esModule?a:{default:a};function o(n){if(Array.isArray(n)){for(var e=0,t=Array(n.length);e<n.length;e++)t[e]=n[e];return t}return Array.from(n)}e.default={name:"CalendarView",mixins:[i.default],props:{showDate:{type:Date,default:function(){}},displayPeriodUom:{type:String,default:function(){return"month"}},displayPeriodCount:{type:Number,default:function(){return 1}},locale:{type:String,default:function(){}},monthNameFormat:{type:String,default:function(){return"long"}},weekdayNameFormat:{type:String,default:function(){return"short"}},showEventTimes:{type:Boolean,default:function(){return!1}},timeFormatOptions:{type:Object,default:function(){return{}}},disablePast:{type:Boolean,default:function(){return!1}},disableFuture:{type:Boolean,default:function(){return!1}},enableDragDrop:{type:Boolean,default:function(){return!1}},startingDayOfWeek:{type:Number,default:function(){return 0}},events:{type:Array,default:function(){return[]}}},data:function(){return{currentDragEvent:null}},computed:{displayLocale:function(){return this.locale||this.getDefaultBrowserLocale()},defaultedShowDate:function(){return this.showDate||this.today()},periodStart:function(){return this.beginningOfPeriod(this.defaultedShowDate,this.displayPeriodUom,this.startingDayOfWeek)},periodEnd:function(){return this.addDays(this.incrementPeriod(this.periodStart,this.displayPeriodUom,this.displayPeriodCount),-1)},displayFirstDate:function(){return this.beginningOfWeek(this.periodStart,this.startingDayOfWeek)},displayLastDate:function(){return this.endOfWeek(this.periodEnd,this.startingDayOfWeek)},weeksOfPeriod:function(){var n=this,e=Math.floor((this.dayDiff(this.displayFirstDate,this.displayLastDate)+1)/7);return Array(e).fill().map(function(e,t){return n.addDays(n.displayFirstDate,7*t)})},monthNames:function(){return this.getFormattedMonthNames(this.displayLocale,this.monthNameFormat)},weekdayNames:function(){return this.getFormattedWeekdayNames(this.displayLocale,this.weekdayNameFormat,this.startingDayOfWeek)},fixedEvents:function(){var n=this;return this.events.map(function(e){var t=[];return e.classes&&(t=Array.isArray(e.classes)?[].concat(o(e.classes)):[e.classes]),{originalEvent:e,startDate:n.toLocalDate(e.startDate),endDate:n.toLocalDate(e.endDate||e.startDate),classes:t,title:e.title||"Untitled",id:e.id||"e"+Math.random().toString(36).substr(2,10)}})}},methods:{onClickDay:function(n){this.disablePast&&this.isInPast(n)||this.disableFuture&&this.isInFuture(n)||this.$emit("click-date",n)},onClickEvent:function(n,e){this.$emit("click-event",n,e)},onClickCurrentPeriod:function(){var n=this.beginningOfPeriod(this.today(),this.displayPeriodUom,this.startingDayOfWeek);this.$emit("show-date-change",n)},getIncrementedPeriod:function(n){var e=this.incrementPeriod(this.periodStart,this.displayPeriodUom,n),t=this.incrementPeriod(e,this.displayPeriodUom,this.displayPeriodCount);return this.disablePast&&t<=this.today()?null:this.disableFuture&&e>this.today()?null:e},isPeriodIncrementAllowed:function(n){return null!==this.getIncrementedPeriod(n)},onIncrementPeriod:function(n){var e=this.getIncrementedPeriod(n);null!=e&&this.$emit("show-date-change",e)},onDragStart:function(n){return!!this.enableDragDrop&&(this.currentDragEvent=n,this.$emit("drag-start",n),!0)},handleEvent:function(n,e){return!!this.enableDragDrop&&(!!this.currentDragEvent&&(this.$emit(n,this.currentDragEvent,e),!0))},onDragOver:function(n){this.handleEvent("drag-over-date",n)},onDragEnter:function(n,e){this.handleEvent("drag-enter-date",n)&&e.target.classList.add("draghover")},onDragLeave:function(n,e){this.handleEvent("drag-leave-date",n)&&e.target.classList.remove("draghover")},onDrop:function(n,e){this.handleEvent("drop-on-date",n)&&e.target.classList.remove("draghover")},findAndSortEventsInWeek:function(n){var e=this;return this.fixedEvents.filter(function(t){return t.startDate<e.addDays(n,7)&&t.endDate>=n},this).sort(function(n,e){return n.startDate<e.startDate?-1:e.startDate<n.startDate?1:n.endDate>e.endDate?-1:e.endDate>n.endDate?1:n.id<e.id?-1:1})},getWeekEvents:function(n){for(var e=this.findAndSortEventsInWeek(n),t=[],a=[[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[]],r=0;r<e.length;r++){var i=Object.assign({},e[r],{classes:[].concat(o(e[r].classes)),eventRow:0}),s=i.startDate<n,l=s?0:this.dayDiff(n,i.startDate),d=Math.min(7-l,this.dayDiff(this.addDays(n,l),i.endDate)+1);s&&i.classes.push("continued"),this.dayDiff(n,i.endDate)>6&&i.classes.push("toBeContinued"),i.originalEvent.url&&i.classes.push("hasUrl");for(var c=0;c<7;c++)if(c===l){for(var u=0;u<20;u++)if(!a[c][u]){i.eventRow=u,a[c][u]=!0;break}}else c<l+d&&(a[c][i.eventRow]=!0);i.classes.push("offset"+l),i.classes.push("span"+d),i.classes.push("eventRow"+(i.eventRow+1)),t.push(i)}return t},getFormattedTimeRange:function(n){var e=this.formattedTime(n.startDate,this.displayLocale,this.timeFormatOptions),t=this.isSameDateTime(n.startDate,n.endDate)?"":this.formattedTime(n.endDate,this.displayLocale,this.timeFormatOptions),a=""!==e,r=""!==t;return(a?'<span class="startTime'+(r?" hasEndTime":"")+'">'+e+"</span>":"")+(r?'<span class="endTime'+(a?" hasStartTime":"")+'">'+t+"</span>":"")},getEventTitle:function(n){return this.showEventTimes?this.getFormattedTimeRange(n)+n.title:n.title},getEventZIndex:function(n){return 2*(n+1)+1}}}},function(n,e,t){"use strict";t.d(e,"a",function(){return a}),t.d(e,"b",function(){return r});var a=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticClass:"calendar-view",class:["locale-"+n.languageCode(n.displayLocale),"locale-"+n.displayLocale,"y"+n.periodStart.getFullYear(),"m"+n.paddedMonth(n.periodStart),"period-"+n.displayPeriodUom,"periodCount-"+n.displayPeriodCount,{past:n.isPastMonth(n.periodStart),future:n.isFutureMonth(n.periodStart),noIntl:!n.supportsIntl}]},[n._t("header",[t("div",{staticClass:"header"},[t("div",{staticClass:"nav"},[t("button",{staticClass:"previousYear",attrs:{disabled:!n.isPeriodIncrementAllowed(-12)},on:{click:function(e){n.onIncrementPeriod(-12)}}}),n._v(" "),t("button",{staticClass:"previousPeriod",attrs:{disabled:!n.isPeriodIncrementAllowed(-n.displayPeriodCount)},on:{click:function(e){n.onIncrementPeriod(-n.displayPeriodCount)}}}),n._v(" "),t("button",{staticClass:"nextPeriod",attrs:{disabled:!n.isPeriodIncrementAllowed(n.displayPeriodCount)},on:{click:function(e){n.onIncrementPeriod(n.displayPeriodCount)}}}),n._v(" "),t("button",{staticClass:"nextYear",attrs:{disabled:!n.isPeriodIncrementAllowed(12)},on:{click:function(e){n.onIncrementPeriod(12)}}}),n._v(" "),t("button",{staticClass:"currentPeriod",on:{click:n.onClickCurrentPeriod}})]),n._v(" "),t("div",{staticClass:"periodLabel",class:{singleYear:n.periodStart.getFullYear()===n.periodEnd.getFullYear(),singleMonth:n.isSameMonth(n.periodStart,n.periodEnd)}},[t("div",{staticClass:"startMonth"},[n._v(n._s(n.monthNames[n.periodStart.getMonth()]))]),n._v(" "),t("div",{staticClass:"startDay"},[n._v(n._s(n.periodStart.getDate()))]),n._v(" "),t("div",{staticClass:"startYear"},[n._v(n._s(n.periodStart.getFullYear()))]),n._v(" "),t("div",{staticClass:"endMonth"},[n._v(n._s(n.monthNames[n.periodEnd.getMonth()]))]),n._v(" "),t("div",{staticClass:"endDay"},[n._v(n._s(n.periodEnd.getDate()))]),n._v(" "),t("div",{staticClass:"endYear"},[n._v(n._s(n.periodEnd.getFullYear()))])])])]),n._v(" "),t("div",{staticClass:"dayList"},[n._l(n.weekdayNames,function(e,a){return[n._t("dayHeader",[t("div",{key:a,staticClass:"day",class:"dow"+a},[n._v(n._s(e))])],{index:a,label:e})]})],2),n._v(" "),t("div",{staticClass:"weeks"},n._l(n.weeksOfPeriod,function(e,a){return t("div",{key:a,staticClass:"week",class:["week"+(a+1),"ws"+n.isoYearMonthDay(e)],style:"z-index:"+2*(a+1)},[n._l(n.daysOfWeek(e),function(e,a){return t("div",{key:a,staticClass:"day",class:["dow"+e.getDay(),"d"+n.isoYearMonthDay(e),"d"+n.isoMonthDay(e),"d"+n.paddedDay(e),"instance"+n.instanceOfMonth(e),{outsideOfMonth:!n.isSameMonth(e,n.defaultedShowDate),today:n.isSameDate(e,n.today()),past:n.isInPast(e),future:n.isInFuture(e),last:n.isLastDayOfMonth(e),lastInstance:n.isLastInstanceOfMonth(e)}],on:{click:function(t){n.onClickDay(e)},drop:function(t){t.preventDefault(),n.onDrop(e,t)},dragover:function(t){t.preventDefault(),n.onDragOver(e)},dragenter:function(t){t.preventDefault(),n.onDragEnter(e,t)},dragleave:function(t){t.preventDefault(),n.onDragLeave(e,t)}}},[t("div",{staticClass:"content"},[n._t("dayContent",[t("div",{staticClass:"date"},[n._v(n._s(e.getDate()))])],{day:e})],2)])}),n._v(" "),n._l(n.getWeekEvents(e),function(r){return[n._t("event",[t("div",{key:r.id,staticClass:"event",class:r.classes,style:"z-index:"+n.getEventZIndex(a),attrs:{draggable:n.enableDragDrop,title:r.title},domProps:{innerHTML:n._s(n.getEventTitle(r))},on:{dragstart:function(e){n.onDragStart(r)},click:function(e){e.stopPropagation(),n.onClickEvent(r)}}})],{event:r,weekStartDate:e,zIndex:n.getEventZIndex(a)})]})],2)}))],2)},r=[];a._withStripped=!0},function(n,e,t){"use strict";function a(n,e,t,a,r,i,o,s){var l=typeof(n=n||{}).default;"object"!==l&&"function"!==l||(n=n.default);var d,c="function"==typeof n?n.options:n;if(e&&(c.render=e,c.staticRenderFns=t,c._compiled=!0),a&&(c.functional=!0),i&&(c._scopeId=i),o?(d=function(n){(n=n||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(n=__VUE_SSR_CONTEXT__),r&&r.call(this,n),n&&n._registeredComponents&&n._registeredComponents.add(o)},c._ssrRegister=d):r&&(d=s?function(){r.call(this,this.$root.$options.shadowRoot)}:r),d)if(c.functional){c._injectStyles=d;var u=c.render;c.render=function(n,e){return d.call(e),u(n,e)}}else{var f=c.beforeCreate;c.beforeCreate=f?[].concat(f,d):[d]}return{exports:n,options:c}}t.d(e,"a",function(){return a})},function(n,e,t){"use strict";function a(n,e){for(var t=[],a={},r=0;r<e.length;r++){var i=e[r],o=i[0],s={id:n+":"+r,css:i[1],media:i[2],sourceMap:i[3]};a[o]?a[o].parts.push(s):t.push(a[o]={id:o,parts:[s]})}return t}t.r(e),t.d(e,"default",function(){return v});var r="undefined"!=typeof document;if("undefined"!=typeof DEBUG&&DEBUG&&!r)throw new Error("vue-style-loader cannot be used in a non-browser environment. Use { target: 'node' } in your Webpack config to indicate a server-rendering environment.");var i={},o=r&&(document.head||document.getElementsByTagName("head")[0]),s=null,l=0,d=!1,c=function(){},u=null,f="data-vue-ssr-id",p="undefined"!=typeof navigator&&/msie [6-9]\b/.test(navigator.userAgent.toLowerCase());function v(n,e,t,r){d=t,u=r||{};var o=a(n,e);return h(o),function(e){for(var t=[],r=0;r<o.length;r++){var s=o[r];(l=i[s.id]).refs--,t.push(l)}e?h(o=a(n,e)):o=[];for(r=0;r<t.length;r++){var l;if(0===(l=t[r]).refs){for(var d=0;d<l.parts.length;d++)l.parts[d]();delete i[l.id]}}}}function h(n){for(var e=0;e<n.length;e++){var t=n[e],a=i[t.id];if(a){a.refs++;for(var r=0;r<a.parts.length;r++)a.parts[r](t.parts[r]);for(;r<t.parts.length;r++)a.parts.push(m(t.parts[r]));a.parts.length>t.parts.length&&(a.parts.length=t.parts.length)}else{var o=[];for(r=0;r<t.parts.length;r++)o.push(m(t.parts[r]));i[t.id]={id:t.id,refs:1,parts:o}}}}function w(){var n=document.createElement("style");return n.type="text/css",o.appendChild(n),n}function m(n){var e,t,a=document.querySelector("style["+f+'~="'+n.id+'"]');if(a){if(d)return c;a.parentNode.removeChild(a)}if(p){var r=l++;a=s||(s=w()),e=b.bind(null,a,r,!1),t=b.bind(null,a,r,!0)}else a=w(),e=function(n,e){var t=e.css,a=e.media,r=e.sourceMap;a&&n.setAttribute("media",a);u.ssrId&&n.setAttribute(f,e.id);r&&(t+="\n/*# sourceURL="+r.sources[0]+" */",t+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(r))))+" */");if(n.styleSheet)n.styleSheet.cssText=t;else{for(;n.firstChild;)n.removeChild(n.firstChild);n.appendChild(document.createTextNode(t))}}.bind(null,a),t=function(){a.parentNode.removeChild(a)};return e(n),function(a){if(a){if(a.css===n.css&&a.media===n.media&&a.sourceMap===n.sourceMap)return;e(n=a)}else t()}}var g,y=(g=[],function(n,e){return g[n]=e,g.filter(Boolean).join("\n")});function b(n,e,t,a){var r=t?"":a.css;if(n.styleSheet)n.styleSheet.cssText=y(e,r);else{var i=document.createTextNode(r),o=n.childNodes;o[e]&&n.removeChild(o[e]),o.length?n.insertBefore(i,o[e]):n.appendChild(i)}}},function(n,e,t){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={methods:{today:function(){return this.dateOnly(new Date)},beginningOfPeriod:function(n,e,t){switch(e){case"year":return new Date(n.getFullYear(),0);case"month":return new Date(n.getFullYear(),n.getMonth());case"week":return this.beginningOfWeek(n,t);default:return null}},daysOfWeek:function(n){var e=this;return Array(7).fill().map(function(t,a){return e.addDays(n,a)})},addDays:function(n,e){return new Date(n.getFullYear(),n.getMonth(),n.getDate()+e,n.getHours(),n.getMinutes(),n.getSeconds())},beginningOfWeek:function(n,e){return this.addDays(n,(e-n.getDay()-7)%-7)},endOfWeek:function(n,e){return this.addDays(this.beginningOfWeek(n,e),7)},beginningOfMonth:function(n){return new Date(n.getFullYear(),n.getMonth())},instanceOfMonth:function(n){return Math.ceil(n.getDate()/7)},incrementPeriod:function(n,e,t){return new Date(n.getFullYear()+("year"==e?t:0),n.getMonth()+("month"==e?t:0),n.getDate()+("week"==e?7*t:0))},paddedMonth:function(n){return("0"+String(n.getMonth()+1)).slice(-2)},paddedDay:function(n){return("0"+String(n.getDate())).slice(-2)},isoYearMonth:function(n){return n.getFullYear()+"-"+this.paddedMonth(n)},isoYearMonthDay:function(n){return this.isoYearMonth(n)+"-"+this.paddedDay(n)},isoMonthDay:function(n){return this.paddedMonth(n)+"-"+this.paddedDay(n)},formattedTime:function(n,e,t){if(0===n.getHours()&&0===n.getMinutes()&&0===n.getSeconds())return"";if(!this.supportsIntl()){var a=6e4*(new Date).getTimezoneOffset();return new Date(n-a).toISOString().slice(11,16)}return n.toLocaleTimeString(e,t)},dayDiff:function(n,e){var t=new Date(e.getFullYear(),e.getMonth(),e.getDate()),a=new Date(n.getFullYear(),n.getMonth(),n.getDate());return t.setUTCHours(0,0,0,0),a.setUTCHours(0,0,0,0),(t-a)/864e5},isSameDate:function(n,e){return 0===this.dayDiff(n,e)},isSameDateTime:function(n,e){return n.getTime()===e.getTime()},isSameMonth:function(n,e){return n.getFullYear()===e.getFullYear()&&n.getMonth()===e.getMonth()},isPastMonth:function(n){return this.beginningOfMonth(n)<this.beginningOfMonth(this.today())},isFutureMonth:function(n){return this.beginningOfMonth(n)>this.beginningOfMonth(this.today())},isInFuture:function(n){return this.dateOnly(n)>this.today()},isInPast:function(n){return this.dateOnly(n)<this.today()},isLastInstanceOfMonth:function(n){return n.getMonth()!==this.addDays(n,7).getMonth()},isLastDayOfMonth:function(n){return n.getMonth()!==this.addDays(n,1).getMonth()},fromIsoStringToLocalDate:function(n){var e=n.split(/\D/).map(function(n){return Number(n)});return e[1]--,new(Function.prototype.bind.apply(Date,[null].concat(function(n){if(Array.isArray(n)){for(var e=0,t=Array(n.length);e<n.length;e++)t[e]=n[e];return t}return Array.from(n)}(e))))},toLocalDate:function(n){return"string"==typeof n?this.fromIsoStringToLocalDate(n):new Date(n)},dateOnly:function(n){var e=new Date(n);return e.setHours(0,0,0,0),e},languageCode:function(n){return n.substring(0,2)},supportsIntl:function(){return"undefined"!=typeof Intl},getFormattedMonthNames:function(n,e){if(!this.supportsIntl())return Array(12).fill("");var t=new Intl.DateTimeFormat(n,{month:e});return Array(12).fill().map(function(n,e){return t.format(new Date(2017,e,1))})},getFormattedWeekdayNames:function(n,e,t){if(!this.supportsIntl())return Array(7).fill("");var a=new Intl.DateTimeFormat(n,{weekday:e});return Array(7).fill().map(function(n,e){return a.format(new Date(2017,0,(e+1+t)%7))})},getDefaultBrowserLocale:function(){return"undefined"==typeof navigator?"unk":(navigator.languages&&navigator.languages.length?navigator.languages[0]:navigator.language||navigator.browserLanguage).toLowerCase()}}}},function(n,e){n.exports=function(n){var e=[];return e.toString=function(){return this.map(function(e){var t=function(n,e){var t=n[1]||"",a=n[3];if(!a)return t;if(e&&"function"==typeof btoa){var r=(o=a,"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(o))))+" */"),i=a.sources.map(function(n){return"/*# sourceURL="+a.sourceRoot+n+" */"});return[t].concat(i).concat([r]).join("\n")}var o;return[t].join("\n")}(e,n);return e[2]?"@media "+e[2]+"{"+t+"}":t}).join("")},e.i=function(n,t){"string"==typeof n&&(n=[[null,n,""]]);for(var a={},r=0;r<this.length;r++){var i=this[r][0];"number"==typeof i&&(a[i]=!0)}for(r=0;r<n.length;r++){var o=n[r];"number"==typeof o[0]&&a[o[0]]||(t&&!o[2]?o[2]=t:t&&(o[2]="("+o[2]+") and ("+t+")"),e.push(o))}},e}},function(n,e,t){(n.exports=t(5)(!1)).push([n.i,'\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n/* Position/Flex */\n\n/* Make the calendar flex vertically */\n.calendar-view {\n\tdisplay: -webkit-box;\n\tdisplay: -ms-flexbox;\n\tdisplay: flex;\n\t-webkit-box-orient: vertical;\n\t-webkit-box-direction: normal;\n\t    -ms-flex-direction: column;\n\t        flex-direction: column;\n}\n.calendar-view .header {\n\tdisplay: -webkit-box;\n\tdisplay: -ms-flexbox;\n\tdisplay: flex;\n\t-webkit-box-flex: 0;\n\t    -ms-flex: 0 1 auto;\n\t        flex: 0 1 auto;\n\t-webkit-box-orient: horizontal;\n\t-webkit-box-direction: normal;\n\t    -ms-flex-flow: row nowrap;\n\t        flex-flow: row nowrap;\n\t-webkit-box-align: center;\n\t    -ms-flex-align: center;\n\t        align-items: center;\n\tmin-height: 2.5em;\n}\n.calendar-view .header .periodLabel {\n\tdisplay: -webkit-box;\n\tdisplay: -ms-flexbox;\n\tdisplay: flex;\n\t-webkit-box-flex: 1;\n\t    -ms-flex: 1 1 auto;\n\t        flex: 1 1 auto;\n\t-webkit-box-orient: horizontal;\n\t-webkit-box-direction: normal;\n\t    -ms-flex-flow: row nowrap;\n\t        flex-flow: row nowrap;\n\tmin-height: 1.2em;\n}\n.calendar-view .dayList {\n\tdisplay: -webkit-box;\n\tdisplay: -ms-flexbox;\n\tdisplay: flex;\n\t-webkit-box-flex: 0;\n\t    -ms-flex: 0 0 auto;\n\t        flex: 0 0 auto;\n\t-webkit-box-orient: horizontal;\n\t-webkit-box-direction: normal;\n\t    -ms-flex-flow: row nowrap;\n\t        flex-flow: row nowrap;\n}\n.calendar-view .dayList .day {\n\tdisplay: -webkit-box;\n\tdisplay: -ms-flexbox;\n\tdisplay: flex;\n\t-webkit-box-flex: 1;\n\t    -ms-flex: 1 1 0px;\n\t        flex: 1 1 0;\n\t-webkit-box-orient: horizontal;\n\t-webkit-box-direction: normal;\n\t    -ms-flex-flow: row nowrap;\n\t        flex-flow: row nowrap;\n\t-webkit-box-align: center;\n\t    -ms-flex-align: center;\n\t        align-items: center;\n\t-webkit-box-pack: center;\n\t    -ms-flex-pack: center;\n\t        justify-content: center;\n\ttext-align: center;\n}\n\n/* The calendar grid should take up the remaining vertical space */\n.calendar-view .weeks {\n\tdisplay: -webkit-box;\n\tdisplay: -ms-flexbox;\n\tdisplay: flex;\n\t-webkit-box-flex: 1;\n\t    -ms-flex: 1 1 auto;\n\t        flex: 1 1 auto;\n\t-webkit-box-orient: vertical;\n\t-webkit-box-direction: normal;\n\t    -ms-flex-flow: column nowrap;\n\t        flex-flow: column nowrap;\n\n\t/* Allow grid to scroll if there are too may weeks to fit in the view */\n\toverflow-y: scroll;\n\t-ms-overflow-style: none;\n}\n\n/* Use flex basis of 0 on week row so all weeks will be same height regardless of content */\n.calendar-view .week {\n\tdisplay: -webkit-box;\n\tdisplay: -ms-flexbox;\n\tdisplay: flex;\n\t-webkit-box-flex: 1;\n\t    -ms-flex: 1 1 0px;\n\t        flex: 1 1 0;\n\t-webkit-box-orient: horizontal;\n\t-webkit-box-direction: normal;\n\t    -ms-flex-flow: row nowrap;\n\t        flex-flow: row nowrap;\n\tmin-height: 3em;\n\n\t/* Allow week events to scroll if they are too tall */\n\tposition: relative;\n\twidth: 100%;\n\toverflow-y: scroll;\n\t-ms-overflow-style: none;\n}\n.calendar-view .weeks::-webkit-scrollbar,\n.calendar-view .week::-webkit-scrollbar {\n\twidth: 0; /* remove scrollbar space */\n\tbackground: transparent; /* optional: just make scrollbar invisible */\n}\n.calendar-view .week .day {\n\tdisplay: -webkit-box;\n\tdisplay: -ms-flexbox;\n\tdisplay: flex;\n\t-webkit-box-flex: 1;\n\t    -ms-flex: 1 1 0px;\n\t        flex: 1 1 0;\n\tposition: -webkit-sticky;\n\tposition: sticky; /* When week\'s events are scrolled, keep the day content fixed */\n\ttop: 0;\n}\n.calendar-view .day .content {\n\tposition: absolute;\n\tleft: 0;\n\ttop: 0;\n\tbottom: 0;\n\tright: 0;\n}\n.calendar-view .day .date {\n\tfloat: right;\n\tclear: both;\n}\n.calendar-view .event {\n\tposition: absolute;\n\twhite-space: nowrap;\n\toverflow: hidden;\n\tbackground-color: #f7f7f7;\n}\n\n/* Header */\n.calendar-view .periodLabel .startDay::before,\n.calendar-view .periodLabel .endDay::before,\n.calendar-view.period-month .periodLabel .startYear::before,\n.calendar-view.period-month .periodLabel .endYear::before,\n.calendar-view.period-year .periodLabel .endYear::before {\n\tcontent: "\\A0";\n}\n.calendar-view .periodLabel .endMonth::before,\n.calendar-view.period-year:not(.periodCount-1) .periodLabel .endYear::before,\n.calendar-view.period-week .periodLabel.singleMonth .endDay::before {\n\tcontent: "\\A0\\2013\\A0";\n}\n.calendar-view.period-week .periodLabel .startYear::before,\n.calendar-view.period-week .periodLabel .endYear::before {\n\tcontent: ",\\A0";\n}\n.calendar-view .periodLabel.singleYear .startYear,\n.calendar-view .periodLabel.singleMonth .endMonth,\n.calendar-view.period-month .periodLabel .startDay,\n.calendar-view.period-month .periodLabel .endDay,\n.calendar-view.period-year .periodLabel .startDay,\n.calendar-view.period-year .periodLabel .endDay,\n.calendar-view.period-year .periodLabel .startMonth,\n.calendar-view.period-year .periodLabel .endMonth,\n.calendar-view.period-month.periodCount-1 .periodLabel .endMonth,\n.calendar-view.period-month.periodCount-1 .periodLabel .startYear,\n.calendar-view.period-year.periodCount-1 .periodLabel .startYear {\n\tdisplay: none;\n}\n\n/* Header navigation buttons */\n.calendar-view .header .nav .previousPeriod::after {\n\tcontent: "<";\n}\n.calendar-view .header .nav .nextPeriod::after {\n\tcontent: ">";\n}\n.calendar-view .header .nav .previousYear::after {\n\tcontent: "<<";\n}\n.calendar-view .header .nav .nextYear::after {\n\tcontent: ">>";\n}\n.calendar-view .header .nav .currentPeriod {\n\tdisplay: none;\n}\n.calendar-view.past .header .nav .currentPeriod,\n.calendar-view.future .header .nav .currentPeriod {\n\tdisplay: inline-block;\n}\n.calendar-view.past .header .nav .currentPeriod::after {\n\tcontent: "\\21BB";\n}\n.calendar-view.future .header .nav .currentPeriod::after {\n\tcontent: "\\21BA";\n}\n\n/* Colors */\n.calendar-view .header,\n.calendar-view button,\n.calendar-view .dayList,\n.calendar-view .weeks,\n.calendar-view .week,\n.calendar-view .day,\n.calendar-view .event {\n\tborder-style: solid;\n\tborder-color: #ddd;\n}\n\n/* Event Times */\n.calendar-view .event .startTime:not(.hasEndTime),\n.calendar-view .event .endTime {\n\tmargin-right: 0.4em;\n}\n.calendar-view .event .endTime::before {\n\tcontent: "-";\n}\n\n/* Internal Metrics */\n.calendar-view,\n.calendar-view div,\n.calendar-view button {\n\t-webkit-box-sizing: border-box;\n\t        box-sizing: border-box;\n\tline-height: 1em;\n\tfont-size: 1em;\n}\n.calendar-view .dayList div,\n.calendar-view .date,\n.calendar-view .event {\n\tpadding: 0.2em;\n}\n.calendar-view .header .nav,\n.calendar-view .header .periodLabel {\n\tmargin: 0.4em 0.6em;\n}\n.calendar-view .header .nav button,\n.calendar-view .header .periodLabel {\n\tpadding: 0.4em 0.6em;\n}\n\n/* Allows emoji icons or labels (such as holidays) to be added more easily to specific dates by having the margin set already. */\n.calendar-view .day .date::before {\n\tmargin-right: 0.5em;\n}\n\n/* Borders */\n.calendar-view .week {\n\tborder-width: 0;\n}\n.calendar-view .weeks {\n\tborder-width: 0 0 1px 1px;\n}\n.calendar-view .header {\n\tborder-width: 1px 1px 0 1px;\n}\n.calendar-view .dayList {\n\tborder-width: 0 0 0 1px;\n}\n.calendar-view .day {\n\tborder-width: 1px 1px 0 0;\n}\n.calendar-view .header button,\n.calendar-view .event {\n\tborder-width: 1px;\n}\n\n/* Positioning for event eventRows */\n.calendar-view .event.eventRow1 {\n\ttop: 1.4em;\n}\n.calendar-view .event.eventRow2 {\n\ttop: calc(2 * 1.4em + 2px);\n}\n.calendar-view .event.eventRow3 {\n\ttop: calc(3 * 1.4em + 4px);\n}\n.calendar-view .event.eventRow4 {\n\ttop: calc(4 * 1.4em + 6px);\n}\n.calendar-view .event.eventRow5 {\n\ttop: calc(5 * 1.4em + 8px);\n}\n.calendar-view .event.eventRow6 {\n\ttop: calc(6 * 1.4em + 10px);\n}\n.calendar-view .event.eventRow7 {\n\ttop: calc(7 * 1.4em + 12px);\n}\n.calendar-view .event.eventRow8 {\n\ttop: calc(8 * 1.4em + 14px);\n}\n.calendar-view .event.eventRow9 {\n\ttop: calc(9 * 1.4em + 16px);\n}\n.calendar-view .event.eventRow10 {\n\ttop: calc(10 * 1.4em + 18px);\n}\n.calendar-view .event.eventRow11 {\n\ttop: calc(11 * 1.4em + 20px);\n}\n.calendar-view .event.eventRow12 {\n\ttop: calc(12 * 1.4em + 22px);\n}\n.calendar-view .event.eventRow13 {\n\ttop: calc(13 * 1.4em + 24px);\n}\n.calendar-view .event.eventRow14 {\n\ttop: calc(14 * 1.4em + 26px);\n}\n.calendar-view .event.eventRow15 {\n\ttop: calc(15 * 1.4em + 28px);\n}\n.calendar-view .event.eventRow16 {\n\ttop: calc(16 * 1.4em + 30px);\n}\n.calendar-view .event.eventRow17 {\n\ttop: calc(17 * 1.4em + 32px);\n}\n.calendar-view .event.eventRow18 {\n\ttop: calc(18 * 1.4em + 34px);\n}\n.calendar-view .event.eventRow19 {\n\ttop: calc(19 * 1.4em + 36px);\n}\n.calendar-view .event.eventRow20 {\n\ttop: calc(20 * 1.4em + 38px);\n}\n.calendar-view .event.eventRow0 {\n\tdisplay: none;\n} /* More than 20 eventRows not currently supported */\n.calendar-view .event.offset0 {\n\tleft: 0;\n}\n.calendar-view .event.offset1 {\n\tleft: calc((100% / 7));\n}\n.calendar-view .event.offset2 {\n\tleft: calc((200% / 7));\n}\n.calendar-view .event.offset3 {\n\tleft: calc((300% / 7));\n}\n.calendar-view .event.offset4 {\n\tleft: calc((400% / 7));\n}\n.calendar-view .event.offset5 {\n\tleft: calc((500% / 7));\n}\n.calendar-view .event.offset6 {\n\tleft: calc((600% / 7));\n}\n\n/* Metrics for events spanning dates */\n.calendar-view .event.span1 {\n\twidth: calc((100% / 7) - 0.05em);\n}\n.calendar-view .event.span2 {\n\twidth: calc((200% / 7) - 0.05em);\n}\n.calendar-view .event.span3 {\n\twidth: calc((300% / 7) - 0.05em);\n\ttext-align: center;\n}\n.calendar-view .event.span4 {\n\twidth: calc((400% / 7) - 0.05em);\n\ttext-align: center;\n}\n.calendar-view .event.span5 {\n\twidth: calc((500% / 7) - 0.05em);\n\ttext-align: center;\n}\n.calendar-view .event.span6 {\n\twidth: calc((600% / 7) - 0.05em);\n\ttext-align: center;\n}\n.calendar-view .event.span7 {\n\twidth: calc((700% / 7) - 0.05em);\n\ttext-align: center;\n}\n',""])},function(n,e,t){var a=t(6);"string"==typeof a&&(a=[[n.i,a,""]]),a.locals&&(n.exports=a.locals);(0,t(3).default)("6a51b68a",a,!1,{})},function(n,e,t){"use strict";t.r(e);var a=t(0),r=t.n(a);for(var i in a)"default"!==i&&function(n){t.d(e,n,function(){return a[n]})}(i);var o=t(1),s=t(2),l=!1;var d=function(n){l||t(7)},c=Object(s.a)(r.a,o.a,o.b,!1,d,null,null);c.options.__file="src/CalendarView.vue",e.default=c.exports}])});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("CalendarView",[],t):"object"==typeof exports?exports.CalendarView=t():e.CalendarView=t()}(window,function(){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var a=t[r]={i:r,l:!1,exports:{}};return e[r].call(a.exports,a,a.exports,n),a.l=!0,a.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:r})},n.r=function(e){Object.defineProperty(e,"__esModule",{value:!0})},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=17)}([function(e,t,n){var r=n(11);"string"==typeof r&&(r=[[e.i,r,""]]),r.locals&&(e.exports=r.locals);(0,n(9).default)("1a1e81be",r,!1,{})},function(e,t,n){var r=n(13);"string"==typeof r&&(r=[[e.i,r,""]]),r.locals&&(e.exports=r.locals);(0,n(9).default)("ab36f444",r,!1,{})},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default={name:"CalendarViewHeader",props:{headerProps:{type:Object,required:!0}},methods:{onInput:function(e){this.$emit("input",e)}}}},function(e,t,n){"use strict";n.r(t);var r=n(2),a=n.n(r);for(var i in r)"default"!==i&&function(e){n.d(t,e,function(){return r[e]})}(i);t.default=a.a},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=i(n(16)),a=i(n(15));function i(e){return e&&e.__esModule?e:{default:e}}function o(e){if(Array.isArray(e)){for(var t=0,n=Array(e.length);t<e.length;t++)n[t]=e[t];return n}return Array.from(e)}t.default={name:"CalendarView",components:{CalendarViewHeader:a.default},mixins:[r.default],props:{showDate:{type:Date,default:function(){}},displayPeriodUom:{type:String,default:function(){return"month"}},displayPeriodCount:{type:Number,default:function(){return 1}},locale:{type:String,default:function(){}},monthNameFormat:{type:String,default:function(){return"long"}},weekdayNameFormat:{type:String,default:function(){return"short"}},showEventTimes:{type:Boolean,default:function(){return!1}},timeFormatOptions:{type:Object,default:function(){}},disablePast:{type:Boolean,default:function(){return!1}},disableFuture:{type:Boolean,default:function(){return!1}},enableDragDrop:{type:Boolean,default:function(){return!1}},startingDayOfWeek:{type:Number,default:function(){return 0}},events:{type:Array,default:function(){return[]}},dateClasses:{type:Object,default:function(){}}},data:function(){return{currentDragEvent:null}},computed:{displayLocale:function(){return this.locale||this.getDefaultBrowserLocale()},defaultedShowDate:function(){return this.showDate||this.today()},periodStart:function(){return this.beginningOfPeriod(this.defaultedShowDate,this.displayPeriodUom,this.startingDayOfWeek)},periodEnd:function(){return this.addDays(this.incrementPeriod(this.periodStart,this.displayPeriodUom,this.displayPeriodCount),-1)},displayFirstDate:function(){return this.beginningOfWeek(this.periodStart,this.startingDayOfWeek)},displayLastDate:function(){return this.endOfWeek(this.periodEnd,this.startingDayOfWeek)},weeksOfPeriod:function(){var e=this,t=Math.floor((this.dayDiff(this.displayFirstDate,this.displayLastDate)+1)/7);return Array(t).fill().map(function(t,n){return e.addDays(e.displayFirstDate,7*n)})},monthNames:function(){return this.getFormattedMonthNames(this.displayLocale,this.monthNameFormat)},weekdayNames:function(){return this.getFormattedWeekdayNames(this.displayLocale,this.weekdayNameFormat,this.startingDayOfWeek)},fixedEvents:function(){return this.events.map(this.normalizeEvent)},periodLabel:function(){return this.formattedPeriod(this.periodStart,this.periodEnd,this.displayPeriodUom,this.monthNames)},headerProps:function(){return{previousYear:this.getIncrementedPeriod(-12),previousPeriod:this.getIncrementedPeriod(-1),nextPeriod:this.getIncrementedPeriod(1),nextYear:this.getIncrementedPeriod(12),currentPeriod:this.beginningOfPeriod(this.today(),this.displayPeriodUom,this.startingDayOfWeek),periodStart:this.periodStart,periodEnd:this.periodEnd,displayLocale:this.displayLocale,displayFirstDate:this.displayFirstDate,displayLastDate:this.displayLastDate,monthNames:this.monthNames,fixedEvents:this.fixedEvents}}},methods:{onClickDay:function(e){this.disablePast&&this.isInPast(e)||this.disableFuture&&this.isInFuture(e)||this.$emit("click-date",e)},onClickEvent:function(e,t){this.$emit("click-event",e,t)},onChangeDate:function(e){this.$emit("show-date-change",e)},getIncrementedPeriod:function(e){var t=this.incrementPeriod(this.periodStart,this.displayPeriodUom,e),n=this.incrementPeriod(t,this.displayPeriodUom,this.displayPeriodCount);return this.disablePast&&n<=this.today()?null:this.disableFuture&&t>this.today()?null:t},onDragStart:function(e,t){return!!this.enableDragDrop&&(this.currentDragEvent=e,t.dataTransfer.setData("text","foo"),this.$emit("drag-start",e),!0)},handleDragEvent:function(e,t){return!!this.enableDragDrop&&(!(!this.currentDragEvent&&!this.$scopedSlots.event)&&(this.$emit(e,this.currentDragEvent,t),!0))},onDragOver:function(e){this.handleDragEvent("drag-over-date",e)},onDragEnter:function(e,t){this.handleDragEvent("drag-enter-date",e)&&t.target.classList.add("draghover")},onDragLeave:function(e,t){this.handleDragEvent("drag-leave-date",e)&&t.target.classList.remove("draghover")},onDrop:function(e,t){this.handleDragEvent("drop-on-date",e)&&t.target.classList.remove("draghover")},findAndSortEventsInWeek:function(e){var t=this;return this.fixedEvents.filter(function(n){return n.startDate<t.addDays(e,7)&&n.endDate>=e},this).sort(function(e,t){return e.startDate<t.startDate?-1:t.startDate<e.startDate?1:e.endDate>t.endDate?-1:t.endDate>e.endDate?1:e.id<t.id?-1:1})},getWeekEvents:function(e){for(var t=this.findAndSortEventsInWeek(e),n=[],r=[[],[],[],[],[],[],[]],a=0;a<t.length;a++){var i=Object.assign({},t[a],{classes:[].concat(o(t[a].classes)),eventRow:0}),s=i.startDate<e,d=s?0:this.dayDiff(e,i.startDate),u=Math.min(7-d,this.dayDiff(this.addDays(e,d),i.endDate)+1);s&&i.classes.push("continued"),this.dayDiff(e,i.endDate)>6&&i.classes.push("toBeContinued"),i.originalEvent.url&&i.classes.push("hasUrl");for(var l=0;l<7;l++)if(l===d){for(var c=0;r[l][c];)c++;i.eventRow=c,r[l][c]=!0}else l<d+u&&(r[l][i.eventRow]=!0);i.classes.push("offset"+d),i.classes.push("span"+u),n.push(i)}return n},getFormattedTimeRange:function(e){var t=this.formattedTime(e.startDate,this.displayLocale,this.timeFormatOptions),n="";return this.isSameDateTime(e.startDate,e.endDate)||(n=this.formattedTime(e.endDate,this.displayLocale,this.timeFormatOptions)),(""!==t?'<span class="startTime">'+t+"</span>":"")+(""!==n?'<span class="endTime">'+n+"</span>":"")},getEventTitle:function(e){return this.showEventTimes?this.getFormattedTimeRange(e)+" "+e.title:e.title},getEventTop:function(e){var t=e.eventRow;return"calc("+(t+1)+" * 1.4em + "+2*t+"px)"}}}},function(e,t,n){"use strict";n.r(t);var r=n(4),a=n.n(r);for(var i in r)"default"!==i&&function(e){n.d(t,e,function(){return r[e]})}(i);t.default=a.a},function(e,t,n){"use strict";function r(e,t,n,r,a,i,o,s){var d,u="function"==typeof e?e.options:e;if(t&&(u.render=t,u.staticRenderFns=n,u._compiled=!0),r&&(u.functional=!0),i&&(u._scopeId="data-v-"+i),o?(d=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),a&&a.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(o)},u._ssrRegister=d):a&&(d=s?function(){a.call(this,this.$root.$options.shadowRoot)}:a),d)if(u.functional){u._injectStyles=d;var l=u.render;u.render=function(e,t){return d.call(t),l(e,t)}}else{var c=u.beforeCreate;u.beforeCreate=c?[].concat(c,d):[d]}return{exports:e,options:u}}n.d(t,"a",function(){return r})},function(e,t,n){"use strict";var r=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"cv-header"},[n("div",{staticClass:"cv-header-nav"},[n("button",{staticClass:"previousYear",attrs:{disabled:!e.headerProps.previousYear},on:{click:function(t){e.onInput(e.headerProps.previousYear)}}},[e._v("<<")]),e._v(" "),n("button",{staticClass:"previousPeriod",attrs:{disabled:!e.headerProps.previousPeriod},on:{click:function(t){e.onInput(e.headerProps.previousPeriod)}}},[e._v("<")]),e._v(" "),n("button",{staticClass:"nextPeriod",attrs:{disabled:!e.headerProps.nextPeriod},on:{click:function(t){e.onInput(e.headerProps.nextPeriod)}}},[e._v(">")]),e._v(" "),n("button",{staticClass:"nextYear",attrs:{disabled:!e.headerProps.nextYear},on:{click:function(t){e.onInput(e.headerProps.nextYear)}}},[e._v(">>")]),e._v(" "),n("button",{staticClass:"currentPeriod",on:{click:function(t){e.onInput(e.headerProps.currentPeriod)}}},[e._v("Today")])]),e._v(" "),n("div",{staticClass:"periodLabel"},[e._t("label")],2)])},a=[];r._withStripped=!0,n.d(t,"a",function(){return r}),n.d(t,"b",function(){return a})},function(e,t,n){"use strict";var r=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{class:["cv-wrapper","locale-"+e.languageCode(e.displayLocale),"locale-"+e.displayLocale,"y"+e.periodStart.getFullYear(),"m"+e.paddedMonth(e.periodStart),"period-"+e.displayPeriodUom,"periodCount-"+e.displayPeriodCount,{past:e.isPastMonth(e.periodStart),future:e.isFutureMonth(e.periodStart),noIntl:!e.supportsIntl}]},[e._t("header",[n("calendar-view-header",{attrs:{"header-props":e.headerProps},on:{input:e.onChangeDate}},[n("template",{slot:"label"},[e._v(e._s(e.periodLabel))])],2)],{headerProps:e.headerProps}),e._v(" "),n("div",{staticClass:"cv-header-days"},[e._l(e.weekdayNames,function(t,r){return[e._t("dayHeader",[n("div",{key:r,staticClass:"cv-header-day",class:"dow"+r},[e._v(e._s(t))])],{index:r,label:t})]})],2),e._v(" "),n("div",{staticClass:"cv-weeks"},e._l(e.weeksOfPeriod,function(t,r){return n("div",{key:r,class:["cv-week","week"+(r+1),"ws"+e.isoYearMonthDay(t)]},[e._l(e.daysOfWeek(t),function(t,r){return n("div",{key:r,class:["cv-day","dow"+t.getDay(),"d"+e.isoYearMonthDay(t),"d"+e.isoMonthDay(t),"d"+e.paddedDay(t),"instance"+e.instanceOfMonth(t),{outsideOfMonth:!e.isSameMonth(t,e.defaultedShowDate),today:e.isSameDate(t,e.today()),past:e.isInPast(t),future:e.isInFuture(t),last:e.isLastDayOfMonth(t),lastInstance:e.isLastInstanceOfMonth(t)}].concat(e.dateClasses&&e.dateClasses[e.isoYearMonthDay(t)]||null),on:{click:function(n){e.onClickDay(t)},drop:function(n){n.preventDefault(),e.onDrop(t,n)},dragover:function(n){n.preventDefault(),e.onDragOver(t)},dragenter:function(n){n.preventDefault(),e.onDragEnter(t,n)},dragleave:function(n){n.preventDefault(),e.onDragLeave(t,n)}}},[n("div",{staticClass:"cv-day-number"},[e._v(e._s(t.getDate()))]),e._v(" "),e._t("dayContent",null,{day:t})],2)}),e._v(" "),e._l(e.getWeekEvents(t),function(r){return[e._t("event",[n("div",{key:r.id,staticClass:"cv-event",class:r.classes,style:"top:"+e.getEventTop(r),attrs:{draggable:e.enableDragDrop,title:r.title},domProps:{innerHTML:e._s(e.getEventTitle(r))},on:{dragstart:function(t){e.onDragStart(r,t)},click:function(t){t.stopPropagation(),e.onClickEvent(r)}}})],{event:r,weekStartDate:t})]})],2)}))],2)},a=[];r._withStripped=!0,n.d(t,"a",function(){return r}),n.d(t,"b",function(){return a})},function(e,t,n){"use strict";function r(e,t){for(var n=[],r={},a=0;a<t.length;a++){var i=t[a],o=i[0],s={id:e+":"+a,css:i[1],media:i[2],sourceMap:i[3]};r[o]?r[o].parts.push(s):n.push(r[o]={id:o,parts:[s]})}return n}n.r(t),n.d(t,"default",function(){return p});var a="undefined"!=typeof document;if("undefined"!=typeof DEBUG&&DEBUG&&!a)throw new Error("vue-style-loader cannot be used in a non-browser environment. Use { target: 'node' } in your Webpack config to indicate a server-rendering environment.");var i={},o=a&&(document.head||document.getElementsByTagName("head")[0]),s=null,d=0,u=!1,l=function(){},c=null,f="data-vue-ssr-id",h="undefined"!=typeof navigator&&/msie [6-9]\b/.test(navigator.userAgent.toLowerCase());function p(e,t,n,a){u=n,c=a||{};var o=r(e,t);return v(o),function(t){for(var n=[],a=0;a<o.length;a++){var s=o[a];(d=i[s.id]).refs--,n.push(d)}t?v(o=r(e,t)):o=[];for(a=0;a<n.length;a++){var d;if(0===(d=n[a]).refs){for(var u=0;u<d.parts.length;u++)d.parts[u]();delete i[d.id]}}}}function v(e){for(var t=0;t<e.length;t++){var n=e[t],r=i[n.id];if(r){r.refs++;for(var a=0;a<r.parts.length;a++)r.parts[a](n.parts[a]);for(;a<n.parts.length;a++)r.parts.push(y(n.parts[a]));r.parts.length>n.parts.length&&(r.parts.length=n.parts.length)}else{var o=[];for(a=0;a<n.parts.length;a++)o.push(y(n.parts[a]));i[n.id]={id:n.id,refs:1,parts:o}}}}function g(){var e=document.createElement("style");return e.type="text/css",o.appendChild(e),e}function y(e){var t,n,r=document.querySelector("style["+f+'~="'+e.id+'"]');if(r){if(u)return l;r.parentNode.removeChild(r)}if(h){var a=d++;r=s||(s=g()),t=b.bind(null,r,a,!1),n=b.bind(null,r,a,!0)}else r=g(),t=function(e,t){var n=t.css,r=t.media,a=t.sourceMap;r&&e.setAttribute("media",r);c.ssrId&&e.setAttribute(f,t.id);a&&(n+="\n/*# sourceURL="+a.sources[0]+" */",n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(a))))+" */");if(e.styleSheet)e.styleSheet.cssText=n;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(n))}}.bind(null,r),n=function(){r.parentNode.removeChild(r)};return t(e),function(r){if(r){if(r.css===e.css&&r.media===e.media&&r.sourceMap===e.sourceMap)return;t(e=r)}else n()}}var m,D=(m=[],function(e,t){return m[e]=t,m.filter(Boolean).join("\n")});function b(e,t,n,r){var a=n?"":r.css;if(e.styleSheet)e.styleSheet.cssText=D(t,a);else{var i=document.createTextNode(a),o=e.childNodes;o[t]&&e.removeChild(o[t]),o.length?e.insertBefore(i,o[t]):e.appendChild(i)}}},function(e,t){e.exports=function(e){var t=[];return t.toString=function(){return this.map(function(t){var n=function(e,t){var n=e[1]||"",r=e[3];if(!r)return n;if(t&&"function"==typeof btoa){var a=(o=r,"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(o))))+" */"),i=r.sources.map(function(e){return"/*# sourceURL="+r.sourceRoot+e+" */"});return[n].concat(i).concat([a]).join("\n")}var o;return[n].join("\n")}(t,e);return t[2]?"@media "+t[2]+"{"+n+"}":n}).join("")},t.i=function(e,n){"string"==typeof e&&(e=[[null,e,""]]);for(var r={},a=0;a<this.length;a++){var i=this[a][0];"number"==typeof i&&(r[i]=!0)}for(a=0;a<e.length;a++){var o=e[a];"number"==typeof o[0]&&r[o[0]]||(n&&!o[2]?o[2]=n:n&&(o[2]="("+o[2]+") and ("+n+")"),t.push(o))}},t}},function(e,t,n){(e.exports=n(10)(!1)).push([e.i,'\n.cv-wrapper{display:flex;flex-direction:column;height:100%;min-height:100%;max-height:100%\n}\n.cv-wrapper,.cv-wrapper div{box-sizing:border-box;line-height:1em;font-size:1em\n}\n.cv-header-days{flex-grow:0;flex-basis:auto;border-width:0 0 0 1px\n}\n.cv-header-day,.cv-header-days{display:flex;flex-shrink:0;flex-flow:row nowrap\n}\n.cv-header-day{flex-grow:1;flex-basis:0;align-items:center;justify-content:center;text-align:center;border-width:1px 1px 0 0\n}\n.cv-weeks{flex-shrink:1;flex-basis:auto;flex-flow:column nowrap;border-width:0 0 1px 1px\n}\n.cv-week,.cv-weeks{display:flex;flex-grow:1;overflow-y:auto;-ms-overflow-style:none\n}\n.cv-week{flex-flow:row nowrap;min-height:3em;border-width:0;position:relative;width:100%\n}\n.cv-day,.cv-week{flex-shrink:0;flex-basis:0\n}\n.cv-day{display:flex;flex-grow:1;position:relative;position:-webkit-sticky;position:sticky;top:0;border-width:1px 1px 0 0\n}\n.cv-day-number{position:absolute;right:0\n}\n.cv-event{position:absolute;white-space:nowrap;overflow:hidden;background-color:#f7f7f7;border-width:1px\n}\n.cv-day,.cv-event,.cv-header-day,.cv-header-days,.cv-week,.cv-weeks{border-style:solid;border-color:#ddd\n}\n.cv-event .endTime:before{content:"-"\n}\n.cv-day-number,.cv-event,.cv-header-day{padding:.2em\n}\n.cv-day-number:before{margin-right:.5em\n}\n.cv-event.offset0{left:0\n}\n.cv-event.offset1{left:14.28571%\n}\n.cv-event.offset2{left:28.57143%\n}\n.cv-event.offset3{left:42.85714%\n}\n.cv-event.offset4{left:57.14286%\n}\n.cv-event.offset5{left:71.42857%\n}\n.cv-event.offset6{left:85.71429%\n}\n.cv-event.span1{width:calc(14.28571% - .05em)\n}\n.cv-event.span2{width:calc(28.57143% - .05em)\n}\n.cv-event.span3{width:calc(42.85714% - .05em);text-align:center\n}\n.cv-event.span4{width:calc(57.14286% - .05em);text-align:center\n}\n.cv-event.span5{width:calc(71.42857% - .05em);text-align:center\n}\n.cv-event.span6{width:calc(85.71429% - .05em);text-align:center\n}\n.cv-event.span7{width:calc(100% - .05em);text-align:center\n}\n.cv-week::-webkit-scrollbar,.cv-weeks::-webkit-scrollbar{width:0;background:transparent\n}',""])},function(e,t,n){"use strict";var r=n(0);n.n(r).a},function(e,t,n){(e.exports=n(10)(!1)).push([e.i,"\n.cv-header{display:flex;flex:0 1 auto;flex-flow:row nowrap;align-items:center;min-height:2.5em;border-width:1px 1px 0\n}\n.cv-header .periodLabel{display:flex;flex:1 1 auto;flex-flow:row nowrap;min-height:1.5em;line-height:1;font-size:1.5em\n}\n.cv-header,.cv-header button{border-style:solid;border-color:#ddd\n}\n.cv-header-nav,.cv-header .periodLabel{margin:.1em .6em\n}\n.cv-header-nav button,.cv-header .periodLabel{padding:.4em .6em\n}\n.cv-header button{box-sizing:border-box;line-height:1em;font-size:1em;border-width:1px\n}",""])},function(e,t,n){"use strict";var r=n(1);n.n(r).a},function(e,t,n){"use strict";n.r(t);var r=n(7),a=n(3);for(var i in a)"default"!==i&&function(e){n.d(t,e,function(){return a[e]})}(i);n(14);var o=n(6),s=Object(o.a)(a.default,r.a,r.b,!1,null,null,null);s.options.__file="src/CalendarViewHeader.vue",t.default=s.exports},function(e,t,n){"use strict";function r(e){if(Array.isArray(e)){for(var t=0,n=Array(e.length);t<e.length;t++)n[t]=e[t];return n}return Array.from(e)}Object.defineProperty(t,"__esModule",{value:!0}),t.default={methods:{today:function(){return this.dateOnly(new Date)},beginningOfPeriod:function(e,t,n){switch(t){case"year":return new Date(e.getFullYear(),0);case"month":return new Date(e.getFullYear(),e.getMonth());case"week":return this.beginningOfWeek(e,n);default:return null}},daysOfWeek:function(e){var t=this;return Array(7).fill().map(function(n,r){return t.addDays(e,r)})},addDays:function(e,t){return new Date(e.getFullYear(),e.getMonth(),e.getDate()+t,e.getHours(),e.getMinutes(),e.getSeconds())},beginningOfWeek:function(e,t){return this.addDays(e,(t-e.getDay()-7)%-7)},endOfWeek:function(e,t){return this.addDays(this.beginningOfWeek(e,t),7)},beginningOfMonth:function(e){return new Date(e.getFullYear(),e.getMonth())},instanceOfMonth:function(e){return Math.ceil(e.getDate()/7)},incrementPeriod:function(e,t,n){return new Date(e.getFullYear()+("year"==t?n:0),e.getMonth()+("month"==t?n:0),e.getDate()+("week"==t?7*n:0))},paddedMonth:function(e){return("0"+String(e.getMonth()+1)).slice(-2)},paddedDay:function(e){return("0"+String(e.getDate())).slice(-2)},isoYearMonth:function(e){return e.getFullYear()+"-"+this.paddedMonth(e)},isoYearMonthDay:function(e){return this.isoYearMonth(e)+"-"+this.paddedDay(e)},isoMonthDay:function(e){return this.paddedMonth(e)+"-"+this.paddedDay(e)},formattedTime:function(e,t,n){if(0===e.getHours()&&0===e.getMinutes()&&0===e.getSeconds())return"";if(!this.supportsIntl()){var r=6e4*(new Date).getTimezoneOffset();return new Date(e-r).toISOString().slice(11,16)}return e.toLocaleTimeString(t,n)},formattedPeriod:function(e,t,n,r){var a=e.getFullYear()===t.getFullYear(),i=this.isSameMonth(e,t),o=!("year"===n)&&!("month"===n),s=[];return s.push(r[e.getMonth()]),o&&(s.push(" "),s.push(e.getDate())),a||(s.push(o?", ":" "),s.push(e.getFullYear())),i&&a?o&&s.push(" – "):(s.push(" – "),i||s.push(r[t.getMonth()]),o&&s.push(" ")),o?(s.push(t.getDate()),s.push(", ")):s.push(" "),s.push(t.getFullYear()),s.join("")},dayDiff:function(e,t){var n=new Date(t.getFullYear(),t.getMonth(),t.getDate()),r=new Date(e.getFullYear(),e.getMonth(),e.getDate());return n.setUTCHours(0,0,0,0),r.setUTCHours(0,0,0,0),(n-r)/864e5},isSameDate:function(e,t){return 0===this.dayDiff(e,t)},isSameDateTime:function(e,t){return e.getTime()===t.getTime()},isSameMonth:function(e,t){return e.getFullYear()===t.getFullYear()&&e.getMonth()===t.getMonth()},isPastMonth:function(e){return this.beginningOfMonth(e)<this.beginningOfMonth(this.today())},isFutureMonth:function(e){return this.beginningOfMonth(e)>this.beginningOfMonth(this.today())},isInFuture:function(e){return this.dateOnly(e)>this.today()},isInPast:function(e){return this.dateOnly(e)<this.today()},isLastInstanceOfMonth:function(e){return e.getMonth()!==this.addDays(e,7).getMonth()},isLastDayOfMonth:function(e){return e.getMonth()!==this.addDays(e,1).getMonth()},isSelectedDay:function(e){var t=this,n=Object.keys(this.dateClasses).find(function(n){return t.isSameDate(t.fromIsoStringToLocalDate(n),e)});return n?this.dateClasses[n]:void 0},fromIsoStringToLocalDate:function(e){var t=e.split(/\D/).map(function(e){return Number(e)});return t[1]--,new(Function.prototype.bind.apply(Date,[null].concat(r(t))))},toLocalDate:function(e){return"string"==typeof e?this.fromIsoStringToLocalDate(e):new Date(e)},dateOnly:function(e){var t=new Date(e);return t.setHours(0,0,0,0),t},languageCode:function(e){return e.substring(0,2)},supportsIntl:function(){return"undefined"!=typeof Intl},getFormattedMonthNames:function(e,t){if(!this.supportsIntl())return Array(12).fill("");var n=new Intl.DateTimeFormat(e,{month:t});return Array(12).fill().map(function(e,t){return n.format(new Date(2017,t,1))})},getFormattedWeekdayNames:function(e,t,n){if(!this.supportsIntl())return Array(7).fill("");var r=new Intl.DateTimeFormat(e,{weekday:t});return Array(7).fill().map(function(e,t){return r.format(new Date(2017,0,(t+1+n)%7))})},getDefaultBrowserLocale:function(){return"undefined"==typeof navigator?"unk":(navigator.languages&&navigator.languages.length?navigator.languages[0]:navigator.language||navigator.browserLanguage).toLowerCase()},normalizeEvent:function(e){return{originalEvent:e,startDate:this.toLocalDate(e.startDate),endDate:this.toLocalDate(e.endDate||e.startDate),classes:e.classes?Array.isArray(e.classes)?[].concat(r(e.classes)):[e.classes]:[],title:e.title||"Untitled",id:e.id||"e"+Math.random().toString(36).substr(2,10)}}}}},function(e,t,n){"use strict";n.r(t);var r=n(8),a=n(5);for(var i in a)"default"!==i&&function(e){n.d(t,e,function(){return a[e]})}(i);n(12);var o=n(6),s=Object(o.a)(a.default,r.a,r.b,!1,null,null,null);s.options.__file="src/CalendarView.vue",t.default=s.exports}])});

package.json

 {
 	"name": "vue-simple-calendar",
-	"version": "2.2.0",
+	"version": "3.0.0",
 	"description": "Simple calendar event control",
@@ -13,9 +13,7 @@ "author": "richardtallent <[e-mail]>",
 	},
-	"dependencies": {
-		"babel-polyfill": "^6.26.0"
-	},
+	"dependencies": {},
 	"devDependencies": {
-		"autoprefixer": "^8.1.0",
-		"babel-core": "^6.26.0",
-		"babel-eslint": "^8.2.2",
+		"autoprefixer": "^8.4.1",
+		"babel-core": "^6.26.3",
+		"babel-eslint": "^8.2.3",
 		"babel-loader": "^7.1.4",
@@ -27,24 +25,25 @@ "babel-plugin-transform-runtime": "^6.23.0",
 		"css-loader": "^0.28.11",
-		"eslint": "^4.19.0",
-		"eslint-friendly-formatter": "^3.0.0",
-		"eslint-import-resolver-webpack": "^0.8.4",
+		"eslint": "^4.19.1",
+		"eslint-friendly-formatter": "^4.0.1",
+		"eslint-import-resolver-webpack": "^0.9.0",
 		"eslint-loader": "^2.0.0",
-		"eslint-plugin-html": "^4.0.2",
-		"eslint-plugin-import": "^2.9.0",
-		"eslint-plugin-vue": "^4.3.0",
-		"extract-text-webpack-plugin": "^4.0.0-beta.0",
+		"eslint-plugin-html": "^4.0.3",
+		"eslint-plugin-import": "^2.11.0",
+		"eslint-plugin-vue": "^4.5.0",
 		"file-loader": "^1.1.11",
-		"friendly-errors-webpack-plugin": "^1.6.1",
-		"html-webpack-plugin": "^3.0.6",
-		"optimize-css-assets-webpack-plugin": "^4.0.0",
+		"friendly-errors-webpack-plugin": "^1.7.0",
+		"html-webpack-plugin": "^3.2.0",
+		"mini-css-extract-plugin": "^0.4.0",
+		"optimize-css-assets-webpack-plugin": "^4.0.1",
+		"postcss-loader": "^2.1.5",
 		"rimraf": "^2.6.2",
-		"stylelint": "^9.1.3",
+		"stylelint": "^9.2.0",
 		"stylelint-config-standard": "^18.2.0",
 		"url-loader": "^1.0.1",
 		"vue": "^2.5.16",
-		"vue-loader": "^14.2.1",
-		"vue-style-loader": "^4.0.2",
+		"vue-loader": "^15.0.9",
+		"vue-style-loader": "^4.1.0",
 		"vue-template-compiler": "^2.5.16",
-		"webpack": "^4.1.1",
-		"webpack-cli": "^2.0.12",
+		"webpack": "^4.7.0",
+		"webpack-cli": "^2.1.2",
 		"webpack-merge": "^4.1.2"
@@ -58,4 +57,3 @@ },
 		"> 1%",
-		"last 2 versions",
-		"not ie < 11"
+		"ie >= 11"
 	],
@@ -100,5 +98,6 @@ "prettier": {
 		"plugins": {
-			"autoprefixer": {}
+			"autoprefixer": {},
+			"cssnano": {}
 		}
 	}
 }

README.md

@@ -26,4 +26,6 @@ - [Introduction](#introduction)
 
-**vue-simple-calendar** is a flexible, themeable, lightweight *event calendar* component for Vue. The current version is **2.2.0**.
+**vue-simple-calendar** is a flexible, themeable, lightweight *event calendar* component for Vue. The current version is **3.0.0**.
 
+_(For the migration guide from 2.x, please see the CHANGELOG file.)_
+
 There are other great calendar components out there, but most are either intended to be used as date pickers, or had way too many features for me. I wanted something that would simply show a month as a grid, and show events (including multi-day events) on that grid. While the component goes beyond that simple use case, that is still the core focus.
@@ -52,3 +54,3 @@
 What this component *doesn't* try to do:
-* There is no "agenda" view (time-of-day grid). This would require adding too much complexity.
+* There will be no "agenda" view (time-of-day grid). Adding this view would require too much additional complexity.
 * There is no interface for managing events. This is far too use-specific.
@@ -63,6 +65,5 @@ * There is no built-in AJAX mechanism. This is also far too use-specific.
 
-### IE11 Support
-IE11 is not currently working in 2.2.0. Something is "off" with my babel configuration, and despite my best efforts, I can't seem to find an incantation that actually transpiles to IE11-compatible code. I'm looking for someone with more webpack/babel experience to take a look.
+The ES6 language features used in this component are converted to ES5 by Babel during compilation. However, if you're targeting IE11 or another ancient browser, you'll need to import `babel-polyfill` in your webpack entry file so it sets up the additional functions not supported by your browser. These polyfills can't be included in a project more than once, which is why they are not used in the compilation step for this component prior to being published on npm. If you aren't using webpack, you'll need to include the polyfill using a `<script>` tag. The details of using these polyfills is outside the scope of this documentation.
 
-I will be losing my ability to test in IE11 very soon, so I'll be relying on the community of users who need to support this browser to continue to test and provide feedback.
+Drag and drop only works on desktop browsers -- the drag events on touch devices are very different, I haven't had time to dig into them yet.
 
@@ -73,3 +74,3 @@ ### Browsers and Localization
 ```CSS
-.calendar.nointl.locale-en.m01 .monthName::after { content: 'January' }
+.calendar.nointl.locale-en.m01 .monthName::after { content: 'January'; }
 ```
@@ -105,3 +106,3 @@
 			@show-date-change="setShowDate"
-			class="holiday-us-traditional holiday-us-official"
+			class="theme-default holiday-us-traditional holiday-us-official"
 		/>
@@ -112,2 +113,5 @@ </div>
 	import CalendarView from "vue-simple-calendar"
+	// The next two lines are processed by webpack. If you're using the component without webpack compilation,
+	// you should just create <link> elements for these as you would normally for CSS files. Both of these
+	// CSS files are optional, you can create your own theme if you prefer.
 	require("vue-simple-calendar/dist/static/css/default.css")
@@ -160,2 +164,3 @@ require("vue-simple-calendar/dist/static/css/holidays-us.css")
 * `displayPeriodCount` - The *number* of periods to show within the view. For example, if `displayPeriodUom` is `week` and `displayPeriodCount` is 2, the view will show a two-week period.
+* `dateClasses` - Optional object, where the key is a date in ISO form (e.g., "2018-04-15") and the value is a string or array of additional CSS classes that should be applied to the main element for that date. This could be useful for dynamically highlighting selected dates, holidays, blocked-off dates, etc.
 
@@ -169,3 +174,3 @@ ## Calendar Event Properties
 * `id` - A unique identifier for the event. Defaults to a randomly-generated string.
-* `url` - The URL associated with the event. If provided, clicking the event opens the URL. If not provided, the event is unlinked.
+* `url` - The URL associated with the event. The component has no built-in action associated with this, but it does add a "hasUrl" class to the event. To "follow" the URL, you'll need to listen for the `click-event` event and take the appropriate action.
 * `classes` - A String with any additional CSS classes you wish to use for the event.
@@ -190,3 +195,3 @@
 ### header
-This optional named slot **replaces** the default `div.header` (which contains the navigation buttons and calendar's current period). For example, this would effectively result in an empty span in place of the header (you could also just use `.calendar-view .header {display: none}` in your CSS to hide the default header):
+This optional named slot **replaces** the default `div.cv-header` (which contains the navigation buttons and calendar's current period). For example, this would effectively result in an empty span in place of the header (you could also just use `.cv-header {display: none}` in your CSS to hide the default header):
 
@@ -199,4 +204,34 @@ ```HTML
 
+In Vue, a child component MUST only receive props and emit events. This presents an issue for developing calendar headers -- the CalendarView component contains the calendar's state and complex date and render logic, while the desire is to allow developers to swap out the header completely without having to do a bunch of date math or additional logic.
+
+Using scoped slots, the header can receive some data from the CalendarView, but it cannot *change* the CalendarView's directly -- the developer must wire this part up. Thus, it's important for the header to receive data in a way that makes it trivial for the developer to do the wiring.
+
+The end result is that CalendarView passes an object with pre-calculated dates to the header, where the dates correspond to the five buttons on a standard calendar:
+- previousYear
+- previousPeriod (period is flexible, but usually 1 week or 1 month)
+- nextPeriod
+- nextYear
+- currentPeriod
+
+Since the CalendarView has some logic around whether the user should be able to navigate to the past or the future, the dates above will be null if the corresponding action is disabled.
+
+Two additional dates are passed: `periodStart` and `periodEnd`, for the current shown period.
+
+The developer implementing her own header simply needs to create a header component that:
+- Receives these dates and displays them with appropriate UI elements
+- Emits an event to change the date (suggested event name: input)
+
+The calling application simply wires the @event of the header slot to modify the data element that it feeds to CalendarView's `showDate` prop. No need for date math in the caller.
+
+The following are also passed, as they may be useful to a custom header and are computed internally by the CaledarView:
+- displayLocale
+- displayFirstDate
+- displayLastDate
+- monthNames
+- fixedEvents
+
+The default header is actually also implemented as a child component, `CalendarViewHeader`. This gives clean separation of concerns, and ensures that custom headers can *at least* do anything the default header can do.
+
 ### dayHeader
-This optional named slot **replaces** the default `div.day` elements that appear in the column headers for each day of the week. If all you need to do is change how the names are shown, it's probably better to override the `locale` and/or `weekdayNameFormat` property. This slot is intended for situations where you need to override the markup within each header cell. For example, if you want each day of the week to be clickable. 
+This optional named slot **replaces** the default `div.day` elements that appear in the column headers for each day of the week. If all you need to do is change how the names are shown, it's probably better to override the `locale` and/or `weekdayNameFormat` property. This slot is intended for situations where you need to override the markup within each header cell. For example, if you want each day of the week to be clickable.
 
@@ -206,3 +241,3 @@ This slot passes two scoped variables: `index`, 0-7, and `label`, the text it would have used in the header based on the current `locale` and `weekdayNameFormat`.
 ### dayContent
-This optional named slot **replaces** the *contents* of the `div.content` within each day's cell. By default, this just contains a `div.date` containing the day of the month, but you can use this to override the cell and show anything you like. Events are drawn *on top* of the cells, no within them, so this content appears underneath the events if there are any on that day. 
+This optional named slot allows you to provide your own contents within the date cell. The day of the month is rendered in a separate (sibling) element with the class `cv-day-number`, so you should use CSS to hide this class if you want your slot to be the only content in the cell. Note that events are rendered *above* the individual date cells, so your slot content will appear below any events on that day.
 
@@ -215,3 +250,3 @@ This slot passes one scoped variable: `day`, the date associated with the cell.
 - `weekStartDate`: the date of the first day of the week being rendered
-- `zIndex`: the `z-index` that you should apply to the style of your event markup so it properly overlaps its own week but not the next
+- `top`: the CSS `top` value that you should apply to the style of your event element so it appears in the proper place. Assumes standard metrics for events, so if you have your own metrics, you'll need to compute and apply the top position yourself using the `eventRow` value passed in the event.
 
@@ -226,6 +261,6 @@ Note that `event` is a version of the calendar event *normalized* to be shown on that week's row, it's not the bare event pulled from the `events` prop. This customized version parses and defaults the `startDate` and `endDate`, defaults missing `id` to a random number, defaults a blank title to "Untitled", and adds a number of `classes` values based on the position and role of the event as shown for that week (whether it continues from the previous week, etc.). The original event is passed back as `event.originalEvent`.
 ```
-div calendar-view locale-X yYYYY mMM (past|future) period-X periodCount-X
+div cv-wrapper locale-X yYYYY mMM (past|future) period-X periodCount-X
 	HEADER
-		div header
-			div nav
+		div cv-header
+			div cv-header-nav
 				button previousYear
@@ -243,12 +278,11 @@ button previousPeriod
 				div endYear
-	div dayList
-		div day dowX [x7]
-	div weeks
-		div week weekX wsYYYY-MM-DD [x # weeks in visible period]
-			div day dowX dYYYY-MM-DD dMM-DD dDD wmX (past|today|future|last|outsideOfMonth|lastInstance) [x 7]
-				DAY
-					div content
-						div date
+	div cv-header-days
+		div cv-header-day dowX [x7]
+	div cv-weeks
+		div cv-week weekX wsYYYY-MM-DD [x # weeks in visible period]
+			div cv-day dowX dYYYY-MM-DD dMM-DD dDD wmX (past|today|future|last|outsideOfMonth|lastInstance) [x 7]
+				div cv-day-number
+				DAYCONTENT
 			EVENT
-				div event offsetX spanX eventRowX (continued|toBeContinued|hasUrl) [x # of events]
+				div cv-event offsetX spanX (continued|toBeContinued|hasUrl) [x # of events]
 					span startTime (hasEndTime)
@@ -335,5 +369,2 @@ span endTime (hasStartTime)
 
-#### eventRow<i>X</i>
-This class on an event represents the "row" where the event is drawn that week, starting at `1`. Up to 20 rows are available for display, content is scrollable if thre are too many to see within the week's row. *Prior to 2.0, this was called `slotX`.*
-
 #### continued
@@ -367,3 +398,3 @@ This is added to an event when it is continuing from a previous week. By default, this turns off the rounded corners on the left side of the event box and adds a grey right-arrow before the title.
 * [ ] I'm not 100% happy with the Intl time format options, especially to show time ranges compactly. Considering a custom formatter or the ability to pass a formatter function as a property.
-* [ ] Rename the primary CSS classes (calendar-view, day, week, etc.) to depend far less on cascades, making it easier to customize the theme (breaking change for themes, targeted for 3.0.0).
+* [x] Rename the primary CSS classes (calendar-view, day, week, etc.) to depend far less on cascades, making it easier to customize the theme (breaking change for themes, targeted for 3.0.0).
 
@@ -388,5 +419,5 @@ PRs and issues are welcome! For pull requests, please use the same code style -- there are linter configs included for styles, plain JavaScript, and Vue components. Use of Prettier is recommended.
 #### Why is the style so "plain"?
-The **baseline** style (what you get with no external CSS files imported) is intended to be as bare as possible while still providing full functionality and legibility. The hope here is to minimize the effort of overriding my styles if you decide to create your own theme. (Changes are coming in 3.0 to make this even easier.)
+The **baseline** style (what you get with no external CSS files imported) is intended to be as bare as possible while still providing full functionality and legibility. The idea here is to minimize the effort of creating your own theme.
 
-The **default** stylesheet builds on this to provide a restrained, clean, and simple set of default styles for the calendar, and is useful if you don't intend to create your own theme. You can include it from `static/css/default.css`. The sample app uses this stylesheet.
+The **default theme** stylesheet builds on this baseline to provide a restrained, clean, simple theme for the calendar, and is useful if you don't intend to create your own theme. You can include it from `static/css/default.css`. The sample app uses this stylesheet.
 
@@ -404,7 +435,4 @@ A third stylesheet, `static/css/holidays-us.css`, shows how simple it is to use CSS to style specific days using CSS selectors (it adds emoji characters beside various holidays).
 
-# serve with hot reload at localhost:8080
-npm run dev
-
 # build for production with minification
 npm run build
 ```

src/CalendarMathMixin.js

@@ -113,2 +113,45 @@ /*
 
+		// Formats a date period in long English style. Examples supported:
+		// May 2018
+		// May – June 2018
+		// December 2018 – January 2019
+		// May 6 – 26, 2018
+		// May 13 – June 2, 2018
+		// December 16, 2018 – January 5, 2019
+		formattedPeriod(startDate, endDate, periodUom, monthNames) {
+			const singleYear = startDate.getFullYear() === endDate.getFullYear()
+			const singleMonth = this.isSameMonth(startDate, endDate)
+			const isYear = periodUom === "year"
+			const isMonth = periodUom === "month"
+			const isWeek = !isYear && !isMonth
+
+			let s = []
+			s.push(monthNames[startDate.getMonth()])
+			if (isWeek) {
+				s.push(" ")
+				s.push(startDate.getDate())
+			}
+			if (!singleYear) {
+				s.push(isWeek ? ", " : " ")
+				s.push(startDate.getFullYear())
+			}
+			if (!singleMonth || !singleYear) {
+				s.push(" \u2013 ")
+				if (!singleMonth) {
+					s.push(monthNames[endDate.getMonth()])
+				}
+				if (isWeek) s.push(" ")
+			} else if (isWeek) {
+				s.push(" \u2013 ")
+			}
+			if (isWeek) {
+				s.push(endDate.getDate())
+				s.push(", ")
+			} else {
+				s.push(" ")
+			}
+			s.push(endDate.getFullYear())
+			return s.join("")
+		},
+
 		// ******************************
@@ -161,3 +204,9 @@ // Date comparisons
 		},
+		isSelectedDay(d) {
+			var day = Object.keys(this.dateClasses).find(day => this.isSameDate(
+				this.fromIsoStringToLocalDate(day), d
+			));
 
+			return day ? this.dateClasses[day] : undefined;
+		},
 		// Courtesy https://stackoverflow.com/questions/33908299/javascript-parse-a-string-to-date-as-local-time-zone/42626876#42626876
@@ -226,3 +275,26 @@ fromIsoStringToLocalDate(s) {
 		},
+
+		// ******************************
+		// Events
+		// ******************************
+		normalizeEvent(event) {
+			return {
+				originalEvent: event,
+				startDate: this.toLocalDate(event.startDate),
+				// For an event without an end date, the end date is the start date
+				endDate: this.toLocalDate(event.endDate || event.startDate),
+				// Classes may be a string, an array, or null. Normalize to an array
+				classes: event.classes
+					? Array.isArray(event.classes)
+						? [...event.classes]
+						: [event.classes]
+					: [],
+				// Events without a title are untitled
+				title: event.title || "Untitled",
+				// Events without an id receive an auto-generated ID
+				id: event.id || "e" + Math.random().toString(36).substr(2, 10),
+			}
+		},
+
 	},
 }

webpack.config.js

 const path = require("path")
 const merge = require("webpack-merge")
 const CopyWebpackPlugin = require("copy-webpack-plugin")
+const { VueLoaderPlugin } = require('vue-loader')
 
@@ -10,20 +11,18 @@ var commonConfig = {
 			{
+				test: /\.vue$/,
+				loader: 'vue-loader',
+			},
+			{
 				test: /\.js$/,
+				loader: 'babel-loader',
 				exclude: /node_modules/,
-				use: {
-					loader: "babel-loader",
-				},
 			},
 			{
-				test: /\.vue$/,
-				use: {
-					loader: "vue-loader",
-				},
+				test: /\.css$/,
+				use: ["vue-style-loader", "css-loader", "postcss-loader"],
 			},
 		],
 	},
-	externals: {
-		vue: "vue",
-	},
 	plugins: [
+		new VueLoaderPlugin(),
 		// copy custom static assets
@@ -36,3 +35,3 @@ new CopyWebpackPlugin([
 			},
-		]),
+		])
 	],
@@ -44,5 +43,3 @@ }
 	merge(commonConfig, {
-		entry: {
-			app: ["babel-polyfill", path.resolve(__dirname + "/src/plugin.js")],
-		},
+		entry: path.resolve(__dirname + "/src/plugin.js"),
 		output: {
@@ -68,8 +65,3 @@ filename: "calendar-month.min.js",
 	merge(commonConfig, {
-		entry: {
-			app: [
-				"babel-polyfill",
-				path.resolve(__dirname + "/src/CalendarMathMixin.js"),
-			],
-		},
+		entry: path.resolve(__dirname + "/src/CalendarMathMixin.js"),
 		output: {
@@ -76,0 +68,0 @@ filename: "calendar-math-mixin.js",

No alert changes

Improved metrics

Dependency count

0

decreased by-100%

Number of package files

17

increased by6.25%

Lines of code

685

increased by8.9%

Number of lines in readme file

421

increased by7.12%

Worsened metrics

Total package byte prevSize

141754

decreased by-55.67%

Dev dependency count

33

increased by3.13%

Dependency changes

• - Removedbabel-polyfill@^6.26.0

• - Removedbabel-polyfill@6.26.0(transitive)

• - Removedbabel-runtime@6.26.0(transitive)

• - Removedcore-js@2.6.12(transitive)

• - Removedregenerator-runtime@0.10.50.11.1(transitive)