vue-simple-calendar - npm Package Versions

4.3.2 (2019-11-24)

• Fix calendar layout for RTL languages (#138)

4.3.1 (2019-11-24)

• Method rename bug

4.3.0 (2019-11-24)

• The click-date and click-event events are emitted with the DOM click event as the second argument
• Added the doEmitItemMouseEvents option to emit item-mouseover and item-mouseout events when the mouse hovers over a calendar item (#136)
• Began renaming calendar "events" to calendar "items" in documentation and code where possible without breaking compatibility. Using the term "event" is confusing when the component also deals with a number of DOM events. In version 5.0, there will be some breaking changes around this, but it'll just be renaming some props, slots, etc.
• Updated to Vue CLI 4, updated all dependencies. Still stuck on ESLint 5 since cli-plugin-eslint isn't caught up yet.

4.2.2 (2019-05-01)

• Fix CSS precedence for "today" class over "outsideOfMonth" (#126)
• Update various dependencies

4.2.1 (2019-01-25)

• Fix issue with button click event propagation in default header (#117)
• Update dependencies
• Update minimal test app to use the default header
• Changes due to the hell that is Vetur's available HTML template auto-formatters

4.2.0 (2018-12-18)

• Updated dependencies
• Removed auto-defaulting of event id, was causing update issues (#108)
• Removed auto-registration of the Vue components in the webpack bundle, it was causing issues for people with multiple Vue instances (#106)
• Replaced "Today" button in the default header with a headerProps.currentPeriodLabel property (set by the parent calendar) (#101)
• Moved said button between the arrow pairs (if you need to move it back, you can use the CSS flexbox order property)
• Added corresponding optional currentPeriodLabel property to the calendar component. If undefined, uses the localized date range. If "icons", uses an icon pair (⇤ or ⇥). Otherwise uses the literal value (e.g., use "Today" to mimic the old functionality).
• Added a currentPeriodLabelIcons property for advanced swapping of said icons
• Auto-formatting of HTML in template source code created some diff noise in the repo
• Added sample CSS to disable sticky positioning in Edge (disabled by default) (#109)

4.1.0 (2018-10-05)

• Fix where dowX class improperly assigned when startingDayOfWeek != 0 (#93)
• Add pseudo-hover class (isHovered) to all event elements in the view whose id matches the event being hovered (#95)
• Renamed prop onPeriodChange to periodChangedCallback to resolve issue for JSX users (#94) BREAKING CHANGE
• Hopefully fix where the initial call of periodChangedCallback was not firing for all users, or was firing duplicates (could not reproduce, #94, #98)

4.0.1, 4.0.2 (2018-08-25)

• Fix the "main" setting
• Fix exports

4.0.1, 4.0.2 (2018-08-25)

• Fix the "main" setting
• Fix exports

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:

<CalendarView :show-date="dt">
	<template #header="{ headerProps }">
		<CalendarViewHeader :header-props @input="setShowDate" />
	</template>
</CalendarView>

import { CalendarView, CalendarViewHeader } from "vue-simple-calendar"

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

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 (NOTE: renamed in 4.1 to periodChangedCallback)

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 (and also when the component is initialized). 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. While watch with immediate can be used to see when the period changes, a watch handler will not emit an event during initialization (this.$emit does nothing). I also tried using mounted or updated as well, but they have the same problem--you can't emit events during component initialization. Function props are 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: these date ranges are also passed to the header slot as part of headerProps, so you don't need to wire them to your header.

No default export

The vue-simple-calendar main bundle now includes CalendarView, CalendarViewHeader, and CalendarViewMixin. This makes more sense, particularly since the header will need to be imported in any apps that want to use it, but it also means your import statements need to specify which module you're importing (there is no default export). In most cases, your import should look like this:

import { CalendarView, CalendarViewHeader } from "vue-simple-calendar"

In short, the curly braces are important.

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 show the entire event title (wrapped) 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 the default header and require a header slot.