vue 网格组件_简单的Vue组件可显示带有事件的月网格日历-CSDN博客

vue-simple-calendar是一个轻量级的Vue事件日历组件，可展示传统月网格日历，支持多天事件，有拖放事件功能，并可自定义样式。它没有依赖，提供多种插槽用于自定义，适用于桌面Web应用。目前存在IE11兼容性问题，但可本地化，并有未来改进计划。

摘要由CSDN通过智能技术生成

vue 网格组件

简洁日历 (vue-simple-calendar)

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

vue-simple-calendar是Vue的灵活，主题化，轻量级事件日历组件。当前版本是2.2.0。

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.

还有其他很棒的日历组件，但是大多数要么用作日期选择器，要么对我来说功能太多。我想要的东西只是将一个月显示为一个网格，并在该网格上显示事件(包括多天事件)。尽管组件超出了简单的用例，但这仍然是核心重点。

View demo 查看演示 Download Source 下载源

特征 (Features)

Shows a traditional month-grid calendar--or week, or year, or multiples of those.
显示传统的月度网格日历-或周或年，或这些的倍数。
Can show "events," including multi-day events, with optional times.
可以显示“事件”，包括多天事件以及可选时间。
If there are too many events to see in a week, you can scroll to see the others.
如果一周内要看的事件太多，则可以滚动查看其他事件。
If there are too many weeks to see in the calendar component, you can scroll to see the others.
如果在日历组件中要查看的星期太多，则可以滚动查看其他星期。
Optional support for dragging and dropping events between dates.
可选支持在日期之间拖放事件。
Localized automatically (overridable).
自动本地化(可覆盖)。
Lightweight!
轻巧！
Flexbox layout (look ma, no tables!).
Flexbox布局(看起来不错，没有桌子！)。
No external dependencies (Moment, JQuery, etc.).
没有外部依赖项(Moment，JQuery等)。
User events (clicks, drags, etc.) are emitted to the parent component.
用户事件(单击，拖动等)被发送到父组件。
Weeks can start on any day of the week (defaults to Sunday).
几周可以在一周的任何一天开始(默认为星期日)。
Easy to theme (using CSS) to integrate with your own site
易于主题化(使用CSS)以与您自己的网站集成
Slot support for more complex customization
插槽支持更复杂的自定义

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 is no interface for managing events. This is far too use-specific.
没有用于管理事件的界面。这也是特定于用途的。
There is no built-in AJAX mechanism. This is also far too use-specific.
没有内置的AJAX机制。这也是针对特定用途的。
Only the Gregorian calendar is supported.
仅支持公历。
It is not yet possible to drag events in a way that would add or remove days. This may be added in the future.
尚无法以增加或删除日期的方式拖动事件。将来可能会添加。
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.
无法拖动并选择一组日期(只有单日点击会作为事件发出)。将来可能会添加。

浏览器兼容性 (Browser compatibility)

The intent is to maintain compatibility with Chrome, Firefox, IE11, Edge, OS X Safari, iOS Safari, and the Android Silk browser. Note that this component is designed first for desktop web applications, not mobile, so while the component may operate on a mobile device, the limited resolution may not allow for much in the way of useful functionality.

目的是保持与Chrome，Firefox，IE11，Edge，OS X Safari，iOS Safari和Android Silk浏览器的兼容性。请注意，此组件的设计首先考虑为桌面Web应用程序，不移动，因此，尽管该组件可以在移动设备上运行，有限的分辨率可能不允许在很多有用的功能的方式。

IE11支持 (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.

IE11当前不在2.2.0中工作。我的babel配置出现了一些问题，尽管做出了最大的努力，但我似乎找不到真正可以转换为IE11兼容代码的咒语。我正在寻找具有更多webpack / babel经验的人来看看。

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.

我将很快失去在IE11中进行测试的能力，因此我将依靠需要支持该浏览器的用户社区继续进行测试并提供反馈。

浏览器和本地化 (Browsers and Localization)

Note that Intl is not supported for Safari 9.1, iOS 9.3, and Opera Mini. For these browsers, the month names and weekday names will be blank and the calendar will have a nointl class. Use CSS content to provide the appropriate month and weekday names for the languages you support. For example:

请注意，Safari 9.1，iOS 9.3和Opera Mini不支持Intl 。对于这些浏览器，月份名称和工作日名称将为空白，日历将具有nointl类。使用CSS内容为您支持的语言提供适当的月份和工作日名称。例如：

.calendar.nointl.locale-en.m01 .monthName::after { content: 'January' }

安装及使用 (Installation and Usage)

(This assumes you already have a web application set up for using Vue. If you're starting a new project, look up the documentation for the Vue CLI, which will allow you to initialize a new project with webpack, etc.)

(这假定您已经为使用Vue设置了Web应用程序。如果要启动新项目，请查找Vue CLI的文档，该文档将允许您使用webpack等初始化新项目。)

Install the component using npm:

使用npm安装组件：

npm i --save vue-simple-calendar

In your application, you'll need to:

在您的应用程序中，您需要：

import the component
导入组件
import the default theme or any other theme you want to use (CSS)
导入默认主题或您要使用的任何其他主题(CSS)
create the calendar-view custom element
创建calendar-view自定义元素
wire up the element's properties and events
连接元素的属性和事件

Tips:

提示：

The component will fill its parent's height and width, so be sure the parent has a minimum height that looks good.
该组件将填充其父级的高度和宽度，因此请确保父级的最小高度看起来不错。
This is a pure component, it doesn't change its own state, so clicking the previous/next buttons don't do anything unless you provide a show-date attribute and update that attribute when the component fires the show-date-changed event.
这是一个纯组件，它不会更改其自身的状态，因此，除非您提供show-date属性并在组件触发show-date-changed事件时更新该属性，否则单击上一个/下一个按钮不会做任何事情。。

Here's a minimal application example for a calendar with no events, but styled with the default theme and the US holidays theme:

这是一个没有事件但使用默认主题和美国假期主题设置样式的日历的最小应用程序示例：

<template>
	<div id="app">
		<h1>My Calendar</h1>
		<calendar-view
			:show-date="showDate"
			@show-date-change="setShowDate"
			class="holiday-us-traditional holiday-us-official"
		/>
	</div>
</template>
<script>
	import CalendarView from "vue-simple-calendar"
	require("vue-simple-calendar/dist/static/css/default.css")
	require("vue-simple-calendar/dist/static/css/holidays-us.css")

	export default {
		name: 'app',
		data: function() {