代码拉取完成，页面将自动刷新
I originally intended for this to be part of v5.0, but it was holding things up, so I've deferred the full implementation for the future. There is a CSS file and some options in App.vue of this repo to serve as a starting point. Here's a short to-do list for creating a reasonable facsimile:
span-1 events with start time should have a color dot and should not have a background-color
displayPeriod boundary should have a pointed edgeCalendarMath in calendar view component led to IDE warnings in template (#132)CalendarMathMixin is now CalendarMath, a normal classAny reference to a "thing that is scheduled on the calendar" is now called an "item" rather than an "event" due to the confusion possible with DOM and Vue-emitted events. (#129)
click-event event is now called click-item
events property is now called items.event slot is now the item slot, and the calendar item is passed as value
cv-event CSS class is now cv-item
normalizeEvent function is now normalizeItem
originalEvent is now originalItem
showEventTimes is now `showTimeseventTop, eventContentHeight, and eventBorderHeight are now item*
eventRow is now itemRow
fixedEvents is now fixedItems
wrap-event-title-on-hover CSS class is now wrap-item-title-on-hover
cv-weekdays DIV now between cw-week and cv-day. This could impact some custom CSS theming (for example, if you used something like .cv-weekdays > .cv-day as a selector).hasItems class. (#143, thanks @SwithFr!)click-date event now passes the list of calendar items falling on that date as the second argument (windowEvent is pushed to argument 3) #143dragStart event for an item now passes the item's id (stringified) into the dataTransfer data. This should make it easier to create custom drag/drop functionality where someone could drag a calendar item outside this component.enable-date-selection prop.displayWeekNumbers property. This has a named slot to allow full control.$event (the native click event) to the onClickDay handler (#142, thanks @GiboMac)click-date and click-event events are emitted with the DOM click event as the second argumentdoEmitItemMouseEvents option to emit item-mouseover and item-mouseout events when the mouse hovers over a calendar item (#136)cli-plugin-eslint isn't caught up yet.id, was causing update issues (#108)headerProps.currentPeriodLabel property (set by the parent calendar) (#101)order property)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).currentPeriodLabelIcons property for advanced swapping of said iconsisHovered) to all event elements in the view whose id matches the event being hovered (#95)onPeriodChange to periodChangedCallback to resolve issue for JSX users (#94) BREAKING CHANGE
periodChangedCallback was not firing for all users, or was firing duplicates (could not reproduce, #94, #98)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!)
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:
<calendar-view :show-date="dt">
<calendar-view-header
#header="{ headerProps }"
:header-props="headerProps"
@input="setShowDate" />
</calendar-view>
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 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.
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.
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.
style property to events to allow pass-through of arbitrary CSS attributes (thanks @apalethorpe!)previousFullPeriod/nextFullPeriod to headerProps to provide more flexibility to how the previous/next buttons operats. #79 (thanks @lochstar!)label to headerProps, as part of the move to get rid of the default header and require a header slot.top scoped property to the event slot (#66, thanks @lochstar!)flex-direction: column (#71)id values (#65)eventTop, eventContentHeight, and eventBorderHeight props to allow better theming (#66)dateClasses prop to allow easy dynamic styling of specific dates (#55, thanks @LTroya!)zIndex no longer passed in event slot)dayContent slot now does not contain the cv-date-number div. This makes it easier to provide your own content without having to duplicate the day number.content element within each day has been removed, as it is no longer needed. The default theme now uses box-shadow instead of border to highlight the date when dragging an event.periodLabel from CSS logic into a reusable functionbabel-polyfill in your app's entry point, webpack config, or via a script tag, if you aren't already doing so.dayContent slot, you no longer need to render the day number, it's outside the slot now.<calendar-view> element will need the theme-default class (in addition to importing the CSS file, of course).zIndex prop to event scoped slot properties.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 originalItem 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.click-date events for future dates when disableFuture is true (feature parity with disablePast). Fixes #40.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:
clickDayclickEventsetShowDatedragEventStartdragEventEnterDatedragEventLeaveDatedragEventOverDatedropEventOnDateoutsideOfMonth logic bug, #38Version 2.0 includes some major upgrades! Here are the new features:
event
This means there are some breaking changes:
vue-simple-calendar.)yyyy-mm-dd hh:mm:ss). The time portion is optional, and within time, the minutes and seconds are also optional.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.dayList slot has been replaced with dayHeader, and slot day has been renamed as dayContent.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.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.dayList slot was added.day slot was added.header slot was added (#32)| 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 |
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手
