		@@ -5,5 +5,62 @@ ## Future?
		* Handles to drag events to make them longer or shorter
		* Add month name to the 1st of the month when viewing multiple months
		* Provide better information to parent about visible date range (#69)
		* Add month name to the 1st of the month when viewing multiple months (probably using classes to hide/show)

		## 4.0.0 (2018-08-25)

		### Breaking changes

		#### Upgraded to vue-cli 3
		This involved some changes to the source folder structure, as well as to the compiled files in the "dist" folder. Webpack-based imports of the components should be unaffected, same with CSS files. However, if you reference files directly in the dist folder (such as working in a non-webpack environment), the filenames have changed. Also, CalendarMathMixin is now part of the exported module, so if you're using webpack, you shouldn't need to reference the distribution file directly anymore. (And due to other changes, you may not need it anyway!)

		#### A header component is REQUIRED if you want a header
		This is the biggest change. Many users want to heavily customize the header using slots, and to ensure feature parity and minimize edge cases, I decided to make the default header component opt-in. This library still includes the same default header component (CalendarViewHeader), but to see it, you should put it in the `header` named slot. Then, if you decide to create your own header, you can swap it out with ease.

		Here's a minimal example:

		```HTML
		<calendar-view :show-date="dt">
		<calendar-view-header slot="header" slot-scope="{ headerProps }" :header-props="headerProps" @input="setShowDate" />
		</calendar-view>
		```

		```JavaScript
		import CalendarView from "vue-simple-calendar"
		import CalendarViewHeader from "vue-simple-calendar"

		export default {
		name: "App",
		data: () ({ dt: new Date() })
		components: {
		CalendarView,
		CalendarViewHeader,
		},
		methods: {
		setShowDate(newValue) {
		this.dt = newValue
		}
		}
		[...]
		}
		```

		The example above uses ES6 concepts and webpack's `import` statement, so some adjustments are needed if you're instantiating this component in a file that isn't compiled via webpack and babel.

		#### The show-date-change event no longer exists
		The `show-date-change` event was emitted by `CalendarView` on behalf of the default header. Since `CalendarView` is now decoupled from the default header, the purpose of this event is now moot. If you're using the default header component, put an `@input` listener on it instead. If you are using your own header component, you can decide how it should communicate with your app if the header includes UI components the user can interact with.

		#### New property: onPeriodChange
		This property sounds like an event, and it is, sort of. It's an optional `prop` that takes a function as its argument. The function is invoked whenever the date range being shown by the calendar has changed. It passes a single argument to the function, an object with the keys `periodStart` and `periodEnd` (the dates that fall within the range of the months being shown) and `displayFirstDate` / `displayLastDate` (the dates shown on the calendar, including those that fall outside the period). The intent of this property is to let the parent know what is being shown on the calendar, which the parent can then use to, for example, query a back-end database to update the event list, or update another component with information about the same period.

		This was the solution I landed on in response to the question I had on issue #69. I tried just emitting an event, but the initial calculation of a computed property doesn't fire `watch` (even with the "immediate" flag). I tried to use `mounted` or `updated` as well, but they initially fire before events can fire properly. Functional properties is an oft-ignored feature of Vue, but in this case I believe it was the right call. It is fired once after the component updates the first time, and anytime thereafter that a change to any of the other props results in a change in the calendar's current date range.

		Note that these properties are also passed to the header slot as part of `headerProps`, so you don't need to wire them to your header.

		### Bug fixes and non-breaking changes

		* Added `style` property to events to allow pass-through of arbitrary CSS attributes (thanks @apalethorpe!)
		* Added optional behavior to wrap to show entire event title on hover (thanks @jiujiuwen!)
		* Fixed where if the passed showDate value has a time component, events on the first of the week on a one-week calendar are not shown. #80 (thanks @MrSnoozles!)
		* Added `previousFullPeriod`/`nextFullPeriod` to `headerProps` to provide more flexibility to how the previous/next buttons operats. #79 (thanks @lochstar!)
		* Added `label` to `headerProps`, as part of the move to get rid of th default header and require use of the header slot.

		## 3.0.2 (2018-05-16)
		@@ -10,0 +67,0 @@

110

package.json

		{
		"name": "vue-simple-calendar",
		"version": "3.0.2",
		"version": "4.0.0",
		"description": "Simple calendar event control",
		"author": "richardtallent <richard@tallent.us>",
		"license": "MIT",
		"main": "dist/vue-simple-calendar.js",
		"main": "dist/calendar-view.umd.js",
		"repository": "https://github.com/richardtallent/vue-simple-calendar",
		"private": false,
		"scripts": {
		"build": "rimraf ./dist && webpack --config ./webpack.config.js --mode production"
		"serve": "vue-cli-service serve",
		"build": "vue-cli-service build",
		"bundle": "vue-cli-service build --target lib --name CalendarView ./src/components/bundle.js",
		"lint": "vue-cli-service lint"
		},
		"dependencies": {},
		"dependencies": {
		"vue": "^2.5.17"
		},
		"devDependencies": {
		"autoprefixer": "^8.5.0",
		"babel-core": "^6.26.3",
		"babel-eslint": "^8.2.3",
		"babel-loader": "^7.1.4",
		"babel-plugin-transform-runtime": "^6.23.0",
		"babel-preset-env": "^1.7.0",
		"babel-register": "^6.26.0",
		"copy-webpack-plugin": "^4.5.1",
		"css-loader": "^0.28.11",
		"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.3",
		"eslint-plugin-import": "^2.11.0",
		"eslint-plugin-vue": "^4.5.0",
		"file-loader": "^1.1.11",
		"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.2.1",
		"stylelint-config-standard": "^18.2.0",
		"url-loader": "^1.0.1",
		"vue": "^2.5.16",
		"vue-loader": "^15.0.11",
		"vue-style-loader": "^4.1.0",
		"vue-template-compiler": "^2.5.16",
		"webpack": "^4.8.3",
		"webpack-cli": "^2.1.3",
		"webpack-merge": "^4.1.2"
		"@vue/cli-plugin-babel": "^3.0.1",
		"@vue/cli-plugin-eslint": "^3.0.1",
		"@vue/cli-service": "^3.0.1",
		"@vue/eslint-config-prettier": "^3.0.1",
		"node-sass": "^4.9.3",
		"sass-loader": "^7.1.0",
		"vue-template-compiler": "^2.5.17"
		},
		"engines": {
		"node": ">= 6.0.0",
		"npm": ">= 5.0.0"
		"eslintConfig": {
		"root": true,
		"env": {
		"node": true
		},
		"extends": [
		"plugin:vue/recommended",
		"@vue/prettier"
		],
		"rules": {
		"vue/html-indent": [
		"warn",
		"tab"
		],
		"no-console": "warn",
		"vue/max-attributes-per-line": "off"
		},
		"parserOptions": {
		"parser": "babel-eslint"
		}
		},
		"postcss": {
		"plugins": {
		"autoprefixer": {}
		}
		},
		"browserslist": [
		@@ -69,32 +70,3 @@ "> 1%",
		}
		},
		"eslintConfig": {
		"env": {
		"browser": true,
		"es6": true,
		"amd": true,
		"node": true
		},
		"globals": {
		"Vue": true
		},
		"extends": [
		"eslint:recommended",
		"plugin:vue/recommended"
		],
		"rules": {
		"vue/html-indent": "tab",
		"vue/max-attributes-per-line": 3,
		"no-console": "warn"
		}
		},
		"eslintIgnore": [
		"node_modules/."
		],
		"postcss": {
		"plugins": {
		"autoprefixer": {},
		"cssnano": {}
		}
		}
		}

127

README.md

		- [Introduction](#introduction)
		- [Demo](#demo)
		- [Features](#features)
		- [Browser Compatibility](#browser-compatibility)
		- [Installation and Usage](#installation-and-usage)
		- [Props](#props)
		- [Calendar Event Properties](#calendar-event-properties)
		- [Component Events](#component-events)
		- [Slots](#slots)
		- [header](#header)
		- [dayHeader](#dayHeader)
		- [dayContent](#dayContent)
		- [event](#event)
		- [Customizing the Look and Feel](#customizing-the-look-and-feel)
		- [Demo](#demo)
		- [Features](#features)
		- [Browser Compatibility](#browser-compatibility)
		- [Installation and Usage](#installation-and-usage)
		- [Props](#props)
		- [Calendar Event Properties](#calendar-event-properties)
		- [Component Events](#component-events)
		- [Slots](#slots)
		- [header](#header)
		- [dayHeader](#dayHeader)
		- [dayContent](#dayContent)
		- [event](#event)
		- [Customizing the Look and Feel](#customizing-the-look-and-feel)
		- [Calendar classes](#calendar-classes)
		@@ -19,12 +19,12 @@ - [Week classes](#week-classes)
		- [Classes for Events](#classes-for-events)
		- [Future plans](#future-plans)
		- [Day classes](#day-classes)
		- [FAQ](#faq)
		- [Build Setup](#build-setup)
		- [Future plans](#future-plans)
		- [Day classes](#day-classes)
		- [FAQ](#faq)
		- [Build Setup](#build-setup)

		## Introduction

		vue-simple-calendar is a flexible, themeable, lightweight event calendar component for Vue. The current version is 3.0.1.
		vue-simple-calendar is a flexible, themeable, lightweight event calendar component for Vue. The current version is 4.0.0.

		_(For the migration guide from 2.x, please see the CHANGELOG file.)_
		_(For the migration guide from 3.x, please see the CHANGELOG.)_

		@@ -44,3 +44,3 @@ 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.
		* Optional support for dragging and dropping events between dates.
		* Localized automatically (overridable).
		* Automatic localization / internationalization (can be overridden).
		* Lightweight!
		@@ -52,3 +52,3 @@ * Flexbox layout (look ma, no tables!).
		* Easy to theme (using CSS) to integrate with your own site
		* Slot support for more complex customization
		* Easy to customize using Vue slots

		@@ -59,3 +59,3 @@ What this component doesn't try to do:
		* There is no built-in AJAX mechanism. This is also far too use-specific.
		* Only the Gregorian calendar is supported.
		* Only the Gregorian calendar is supported (7-day weeks, etc.).
		* It is not yet possible to drag events in a way that would add or remove days. This may be added in the future.
		@@ -67,3 +67,3 @@ * There is no ability to drag and select a set of days (only single-day clicks are emitted as events). This may be added in the future.

		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.
		The ES6 language features used in this component are converted to ES5 by Babel using webpack. 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.

		@@ -84,3 +84,3 @@ 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.

		```
		```JavaScript
		npm i --save vue-simple-calendar
		@@ -92,8 +92,8 @@ ```
		* import the default theme or any other theme you want to use (CSS)
		* create the `calendar-view` custom element
		* wire up the element's properties and events
		* create the `calendar-view` and `calendar-view-header` components
		* wire up the properties and events

		Tips:
		* The component will fill its parent's height and width, so be sure the parent has a minimum height that is appropriate for the number of weeks and average events per week being shown.
		* The calendar component's default header does not change the calendar's state, but it will listen for the header's `input` event and emit a `show-date-changed` event. The parent component/page should bind a listener to this event and use it to update the `show-date` prop (the new date is passed as the event's argument).
		* The default calendar header emits an `input` event when a user clicks a button in the header to move the calendar backward or forward through time. The event's argument is the new date to be shown. You have to handle this event and pass the date back to the calendar to change the view.
		* To minimize impact of ancestor element layout on the calendar's functionality, it is recommended that the parent of the `<calendar-view>` component only contain the component, and that the parent have the following styles (#71):
		@@ -114,5 +114,9 @@ ```CSS
		:show-date="showDate"
		@show-date-change="setShowDate"
		class="theme-default holiday-us-traditional holiday-us-official"
		/>
		class="theme-default holiday-us-traditional holiday-us-official">
		<calendar-view-header
		slot="header"
		slot-scope="t"
		:header-props="t.headerProps"
		@input="setShowDate" />
		</calendar-view>
		</div>
		@@ -158,3 +162,3 @@ </template>

		* `showDate` - The period to show by default. Defaults to today's date (user local time).
		* `showDate` - The period to show by default. Defaults to today's date (user local time). Any time component is ignored.
		* `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`.
		@@ -177,2 +181,3 @@ * `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.
		* `eventBorderHeight` - Optional CSS string of the sum of your events' top and bottom borders. The default is `2px`. You would only set this if you're overriding the event top and/or bottom border width. This doesn't actually change the borders, it is only used to position the events below one another.
		* NEW IN 4.0 `onPeriodChange` - Optional function to be called calendar updates initially and any time thereafter where the date range shown on the calendar changes. This is intended to allow your application to, say, query a back-end server to update the `events` property based on the date range visible in the calendar. When your function is called, it is passed an object as the argument, with four keys: `periodStart` / `periodEnd` (the dates that fall within the range of the months being shown) and `displayFirstDate` / `displayLastDate` (the dates shown on the calendar, including those that fall outside the period). See CHANGELOG for details on why I'm using a functional property rather than emitting an event.

		@@ -187,3 +192,4 @@ ## Calendar Event Properties
		* `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.
		* `classes` - A String with any additional CSS classes you wish to assign to the event.
		* NEW IN 4.0 `style` - A String with any additional CSS styles you wish to apply to the event.

		@@ -195,3 +201,2 @@ ## Component Events
		* `click-event(event)`: fired when user clicks on an event
		* `show-date-change(date)`: fired when user goes to a different period. The date passed is the first of the period in view (days before and after the period may also be visible).
		* `drag-start(event)`: fires when user starts dragging an event
		@@ -208,40 +213,35 @@ * `drag-enter-date(event, date)`: fires when an event is dragged over a date
		### 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):
		This named slot contains the component you want to use as the calendar's header. Generally, this would show the current date range, and allow the user to navigate back and forth through time. If you don't provide a component for this slot, there will be no header, just the calendar grid. This component comes with a nice default header component, `CalendarViewHeader`, which you can either use directly, or use as a template for creating your own. (Prior to 4.0, if you didn't provide a component, a default header would be shown. That is no longer the case for reasons explained in the CHANGELOG.)

		```HTML
		<calendar-view>
		<span slot="header"/>
		<calendar-view :show-date="myShowDate">
		<calendar-view-header slot="header" slot-scope="{ headerProps }" :header-props="headerProps" @input="setMyShowDate" />
		</calendar-view>
		```

		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.
		The parent `calendar-view` passes a property called `headerProps` to the header component. This property includes all of these values (basically, anything you would normally need to render a calendar header):

		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.
		- periodStart: the first date of the `displayPeriodUom` containing `showDate`
		- periodEnd: the last date of the `displayPeriodUom` containing `showDate` (the `displayPeriodCount` setting impacts this)
		- previousYear: one year before `periodStart`
		- previousPeriod: one `displayPeriodUom` before `periodStart` (regardless of the `displayPeriodCount` setting)
		- nextPeriod: one `displayPeriodUom` after `periodStart` (regardless of the `displayPeriodCount` setting)
		- NEW IN 4.0 previousFullPeriod: one `displayPeriodUom` before `periodStart` (takes the `displayPeriodCount` setting into consideration)
		- NEW IN 4.0 nextFullPeriod: one `displayPeriodUom` after `periodStart` (takes the `displayPeriodCount` setting into consideration)
		- nextYear: one year after `periodStart`
		- currentPeriod: the date at the beginning of the `displayPeriodUom` containing today's date (user local time)
		- displayLocale: the user's locale setting
		- displayFirstDate: the first date shown in the calendar (may differ from `periodStart`--e.g., if periodStart is June 1, 2018, displayFirstDate will be May 27, 2018)
		- displayLastDate: the last date shown in the calendar (ditto)
		- monthNames: an array of the formatted names of the months to use based on the locale and month format settings
		- fixedEvents: an copy of the `events` property, normalized to all have start/end dates, "Untitled" if there is no title, etc.

		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 `CalendarView` has some logic around whether the user should be able to navigate to the past or the future, some of these dates will be null if the corresponding action is disabled.

		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.
		The developer implementing her own header simply needs to create a header component that, like the default header component:
		- Receives this information and displays it with appropriate UI elements (suggested property name: `headerProps`)
		- Emits an event when the user wants to change the calendar period (suggested event name: `input`)

		Two additional dates are passed: `periodStart` and `periodEnd`, for the current shown period.
		NEW IN 4.0 Note above that both `previousPeriod` and `previousFullPeriod` are provided, as well as `nextPeriod` and `nextFullPeriod`. The reason for this distinction is to allow the developer to decide how the calendar's Previous and Next buttons should move through time if `displayPeriodCount` is greater than 1. My personal preference is to move forward and backward by one week / month, allowing the user to pinpoint the exact date window they wish to see. But in some applications (a "quarterly" calednar, for example, or a calendar with set two-week periods), it may be better for the buttons to jump backward and forward based on the `displayPeriodCount` setting. This gives the developer both options -- just choose which interaction you want to use, and use those dates to set the new `showDate`.

		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
		@@ -271,3 +271,3 @@ 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.
		```
		div cv-wrapper locale-X yYYYY mMM (past\|future) period-X periodCount-X
		div cv-wrapper locale-X yYYYY mMM (past\|future) period-X periodCount-X wrap-event-title-on-hover
		HEADER
		@@ -335,2 +335,5 @@ div cv-header

		#### wrap-event-title-on-hover
		If an even title is truncated, this enables an optional behavior that will wrap the event to show the entire title when the user hovers over it.

		### Day classes
		@@ -337,0 +340,0 @@

.babelrc

dist/calendar-math-mixin.js

dist/calendar-month.min.js

dist/static/css/default.css

dist/static/css/holidays-us.css

dist/vue-simple-calendar.js

src/CalendarMathMixin.js

src/CalendarView.vue

src/CalendarViewHeader.vue

src/plugin.js

webpack.config.js

vue-simple-calendar - npm Package Compare versions

New alerts

Improved metrics

Worsened metrics

Dependency changes