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() {return { showDate: new Date() }},components: {CalendarView},methods: {setShowDate(d) {this.showDate = d;},}}
</script>
<style>#app {font-family: 'Avenir', Helvetica, Arial, sans-serif;color: #2c3e50;height: 67vh;width: 90vw;margin-left: auto;margin-right: auto;}
</style>

道具 (Props)

The following properties are supported. Remember to use kebab-case when specifying these properties using attributes on the calendar-view element (e.g., <calendar-view month-name-format="long">:

支持以下属性。 在使用calendar-view元素上的属性指定这些属性时，请记住使用kebab-case ( 例如 ， <calendar-view month-name-format="long"> ：

• events – An array of events to show on the calendar. See Calendar Event Properties below for more details.

  events要在日历上显示的事件数组。 有关更多详细信息，请参见下面的日历事件属性 。

• disablePast – If true, prevents the user from navigating to previous periods. Default is false. (Note: since this is a Boolean value, you should use v-bind on the attribute.)

  disablePast如果为true，则阻止用户导航到上一个时段。 默认值为false 。 (注意：由于这是布尔值，因此应在属性上使用v-bind 。)

• disableFuture – If true, prevents the user from navigating to future periods. Default is false. (Note: since this is a Boolean value, you should use v-bind on the attribute.)

  disableFuture如果为true，则阻止用户导航到以后的期间。 默认值为false 。 (注意：由于这是布尔值，因此应在属性上使用v-bind 。)

• enableDragDrop – If true, events are draggable, and dragging and dropping them emits events you can catch and respond to. Default is false. (Note: since this is a Boolean value, you should use v-bind on the attribute.)

  enableDragDrop如果为true，则事件是可拖动的，将其拖放会发出可捕获并响应的事件。 默认值为false 。 (注意：由于这是布尔值，因此应在属性上使用v-bind 。)

• locale – The BCP 47 language tag used to determine the month and day names. Defaults to the user's browser language setting.

  locale -BCP 47语言标记，用于确定月份和日期名称。 默认为用户的浏览器语言设置。

• showDate – The period to show by default. Defaults to today's date (user local time).

  showDate默认显示的时间段。 默认为今天的日期(用户本地时间)。

• startingDayOfWeek – The day of the week that starts each week. Defaults to 0 (Sunday), valid range is 0-6. Common non-default values would be

  startingDayOfWeek每个星期开始的星期几。 默认值是0 (星期日)，有效范围是0-6。 常见的非默认值为

  1 (Monday) for Europe or 6 (Saturday) for much of the Middle East.

  欧洲(中东)为1 (星期一)，中东大部分地区为6 (星期六)。

• monthNameFormat – The format to use for the month names. Possible values are numeric, 2-digit, narrow, short, or long, and the default is long.

  monthNameFormat用于月份名称的格式。 可能的值为numeric ， 2-digit ， narrow ， short或long ，默认值为long 。

• weekdayNameFormat – The format to use for the names of the days of the week. Possible values are narrow, short, or long, and the default is short.

  weekdayNameFormat用于星期几名称的格式。 可能的值是narrow ， short或long ，默认值是short 。

• 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.

  showEventTimes如果为true，则在事件标题旁边显示事件的开始和/或结束时间。 未显示午夜，假定午夜时间表示全天或不确定时间。 (如果要显示午夜，请使用00:00:01而不选择显示秒。)默认值为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).

  timeFormatOptions这需要一个包含Intl.DateTimeFormat选项的对象来格式化事件时间。 locale设置将自动使用。 对于不支持Intl浏览器，此选项将被忽略(它们将看到24小时零填充时间)。

• 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.

  displayPeriodUom要显示的期间类型。 默认情况下，这是month ， 即 ，它以月大小的块显示日历。 其他允许的值是year和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.

  displayPeriodCount视图中要显示的时间段数 。 例如，如果displayPeriodUom是week而displayPeriodCount是2，则该视图将显示一个两周的时间段。

日历事件属性 (Calendar Event Properties)

Each event shown on the calendar can have the following properties. startDate is required, and title and id are strongly recommended.

日历上显示的每个事件可以具有以下属性。 startDate ，强烈建议title和id 。

• startDate – The date the event starts on the calendar. This must be either passed as a JavaScript date object, or as a string following an ISO-like form of "yyyy-mm-dd HH:MM:SS" (time is optional, and within time, minutes and seconds are both optional).

  startDate事件在日历上开始的日期。 必须以JavaScript日期对象的形式传递，或者以类似于ISO的格式“ yyyy-mm-dd HH：MM：SS”的形式传递(时间是可选的，在时间范围内，分钟和秒都是可选的) 。

• endDate – The date the event ends on the calendar. Defaults to the same date as startDate. This must be either passed as a JavaScript date object, or as a string following an ISO-like form of "yyyy-mm-dd HH:MM:SS" (time is optional, and within time, minutes and seconds are both optional).

  endDate事件在日历上结束的日期。 默认为与startDate相同的日期。 必须以JavaScript日期对象的形式传递，或者以类似于ISO的格式“ yyyy-mm-dd HH：MM：SS”的形式传递(时间是可选的，在时间范围内，分钟和秒都是可选的) 。

• title – The name of the event shown on the calendar. Defaults to "Untitled".

  title日历上显示的事件的名称。 默认为“无标题”。

• id – A unique identifier for the event. Defaults to a randomly-generated string.

  id事件的唯一标识符。 默认为随机生成的字符串。

• url – The URL associated with the event. If provided, clicking the event opens the URL. If not provided, the event is unlinked.

  url与事件关联的URL。 如果提供的话，单击事件将打开URL。 如果未提供，则事件未链接。

• classes – A String with any additional CSS classes you wish to use for the event.

  classes一个包含您希望用于事件的其他CSS类的String。

组件事件 (Component Events)

The following Vue events are raised by the component, which you can catch in your calling application to respond to user actions:

组件引发以下Vue事件，您可以在调用应用程序中捕获该事件以响应用户操作：

• click-date(date): fired when user clicks a date

  click-date(date) ：用户单击日期时触发

• click-event(event): fired when user clicks on an event

  click-event(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).

  show-date-change(date) ：当用户进入不同时间段时触发。 传递的日期是该时段的第一个日期(该时段前后的天数也可能可见)。

• drag-start(event): fires when user starts dragging an event

  drag-start(event) ：当用户开始拖动事件时触发

• drag-enter-date(event, date): fires when an event is dragged over a date

  drag-enter-date(event, date) ：将事件拖到某个日期时触发

• drag-leave-date(event, date): fires when an event is dragged out of a date without dropping it there

  drag-leave-date(event, date) ：事件从日期中拖出而不放到那里时触发

• drag-over-date(event, date): fires multiple times as an event is hovered over a date

  drag-over-date(event, date) ：将事件悬停在日期上时会触发多次

• drop-on-date(event, date): fired when an event is dropped on a date

  drop-on-date(event, date) ：在某个日期删除事件时触发

*Note in the above, event refers to the normalized version of the calendar "event" involved in the activity. For more information, see the "event" slot below.

*在上面注意， event是指活动中涉及的日历“事件”的规范化版本。 有关更多信息，请参见下面的“事件”插槽。

插槽 (Slots)

标头 (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):

这个可选的命名插槽替换了默认的div.header (它包含导航按钮和日历的当前时间)。 例如，这将有效地导致标头位置为空跨度(您也可以在CSS中使用.calendar-view .header {display: none}来隐藏默认标头)：

<calendar-view><span slot="header"/>
</calendar-view>

dayHeader (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.

此可选的命名插槽替换了每周中每一天出现在列标题中的默认div.day元素。 如果您只需要更改名称的显示方式，则最好覆盖locale和/或weekdayNameFormat属性。 该插槽用于需要覆盖每个标题单元中的标记的情况。 例如，如果您希望一周中的每一天都是可点击的。

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.

该插槽传递两个范围变量： index ，0-7和label ，它会基于当前locale和weekdayNameFormat在标题中使用的文本。

dayContent (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.

这个可选的命名插槽替换了每天单元格中div.content的内容 。 默认情况下，它仅包含一个包含日期的div.date ，但是您可以使用它覆盖单元格并显示您喜欢的任何内容。 事件被绘制在单元格的顶部 ，而不是在单元格内，因此，如果当天有事件，此内容将显示在事件下方。

This slot passes one scoped variable: day, the date associated with the cell.

该广告位传递一个范围变量： day ，与单元格关联的日期。

事件 (event)

This optional named slot replaces the div.event for each event (not just the contents of the event element, the entire element). Use this if you want to override entirely how events are rendered. For example, on a small mobile device, you may want to show just a thin stripe, dots, or icons to indicate events, without titles or times. This slot passes three scoped variables:

这个可选的命名插槽可替换每个事件的div.event (而不仅仅是event元素的内容，整个元素)。 如果要完全覆盖事件的呈现方式，请使用此选项。 例如，在小型移动设备上，您可能只想显示细条，点或图标来表示事件，而没有标题或时间。 该插槽传递三个范围变量：

• event: the normalized calendar event

  event ： 标准化日历事件

• weekStartDate: the date of the first day of the week being rendered

  weekStartDate ：呈现一周中第一天的日期

• 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

  zIndex ：您应将其应用于事件标记样式的z-index ，以使其正确地重叠其自己的一周而不是下一周

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.

请注意， event是经过规范化以显示在该周行中的日历事件的版本，而不是从events属性中拉出的裸事件。 此自定义版本解析并默认设置startDate和endDate ，默认将缺少的id设置为随机数，默认将空白标题设置为“ Untitled”，并根据该事件的位置和角色添加多个classes值，如该周所示(是否从上周开始继续下去，等等)。 原始事件作为event.originalEvent 。

自定义外观 (Customizing the Look and Feel)

In addition to slots, this component is designed to allow for significant customization of the look and feel solely through CSS. Here's the structure of the markup generated by the component. Each line represents a Vue SLOT (all caps) or an HTML element (first word on the line). Indentation represents the hierarchy. Each word after the first word is a class applied to the element. Classes in (parenthesis) are conditional. Loops (i.e., v-for) are shown in [brackets].

除插槽外，此组件还旨在仅通过CSS就可以对外观进行重大自定义。 这是组件生成的标记的结构。 每行代表一个Vue SLOT(全部大写)或HTML元素(该行的第一个单词)。 缩进表示层次结构。 第一个单词之后的每个单词都是应用于元素的类。 (括号)中的类是有条件的。 循环( 即 v-for )显示在[括号]中。

Note that the events are not child nodes of the days, they are children of the week and positioned above the days. This allows events to span multiple days.

请注意，事件不是当天的子节点，它们是一周的子节点，并且位于当天的上方。 这使事件可以跨越多天。

div calendar-view locale-X yYYYY mMM (past|future) period-X periodCount-XHEADERdiv headerdiv navbutton previousYearbutton previousPeriodbutton nextPeriodbutton nextYearbutton currentPerioddiv periodLabeldiv startMonthdiv startDaydiv startYeardiv endMonthdiv endDaydiv endYeardiv dayListdiv day dowX [x7]div weeksdiv 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]DAYdiv contentdiv dateEVENTdiv event offsetX spanX eventRowX (continued|toBeContinued|hasUrl) [x # of events]span startTime (hasEndTime)span endTime (hasStartTime)

where:

哪里：

日历类 (Calendar classes)

区域设置-X (locale-X)

Two locale classes are added–one for the user's full locale, the other for just the first two letters (the language), both in lowercase. You could use this information to hide or show specific holidays, or to localize text using CSS content. Example:

添加了两个语言环境类-一个用于用户的完整语言环境，另一个仅用于前两个字母(语言)，均小写。 您可以使用此信息隐藏或显示特定的假期，或使用CSS content本地化文本。 例：

locale-en locale-en-us

我们的语言环境

y YYYY (yYYYY)

The full year of the starting period of the current view.

当前视图起始期间的整年。

毫米 (mMM)

The month (01-12) of the starting period of the current view.

当前视图开始期间的月份(01-12)。

(未来|过去) ((future|past))

When the period shown does not include today's date (local time), one of these classes is added. By default, this shows and hides and determines the label for the button that returns the view to the current period.

如果显示的期间不包括今天的日期(当地时间)，则添加这些类别之一。 默认情况下，这将显示，隐藏并确定将视图返回到当前期间的按钮的标签。

X期 (period-X)

The current displayPeriodUom value (year, month, or week).

当前的displayPeriodUom值( year ， month或week )。

periodCount-X (periodCount-X)

The current displayPeriodCount value (a number, usually 1).

当前的displayPeriodCount值(一个数字，通常为1 )。

周课 (Week classes)

第X周 (weekX)

Each week is numbered, starting with the first week of the visible period.

从可见期间的第一周开始，对每个星期进行编号。

YYYY-MM-DD (wsYYYY-MM-DD)

Each week also has a class representing the date of the Sunday starting that week. This could be used to style entire weeks that have some special importance.

每个星期还有一个类，表示从该周开始的星期日的日期。 这可用于为具有特殊重要性的整个星期设置样式。

一日班 (Day classes)

道指X (dowX)

This class is for the day of the week, ranging from 0 to 6. This allows you to easily style certain days of the week (say, weekend days) differently from other days. The same class is also added to the weekday headers.

此类用于一周中的一天，范围从0到6。这使您可以轻松地将一周中的某些天(例如，周末)设置为与其他天不同的样式。 同样的类也被添加到工作日标题中。

d YYYY-MM-DD / d MM-DD / d DD (dYYYY-MM-DD / dMM-DD / dDD)

Each day in the grid is given three special classes — one for the month and day (01/01-12/31), one for the day (01-31), and one for the entire ISO 8601 date. This allows easy styling of holidays and other special days using CSS alone (rather than using events).

网格中的每一天都被赋予三种特殊的类-一种用于月和日(01 / 01-12 / 31)，一种用于日(01-31)，一种用于整个ISO 8601日期。 这样就可以单独使用CSS(而不是使用事件)轻松设置假期和其他特殊日子的样式。

The demo calendar has some examples of using these to add holiday emoji beside the day numbers. Example:

演示日历中有一些示例，可以使用这些示例在日期编号旁边添加假日表情符号。 例：

d2017-05-23 d05-23 d23

d2017-05-23 d05-23 d23

实例X (instanceX)

The instance of the weekday within the day's month. For example, the class instance1 is added to the first Sunday, Monday, etc. of the month. Note that since this is relative to the day, not the "main" month being shown, days visible from the previous or next month will also have these classes, relative to their own month.

当天月份中的工作日实例。 例如，将类instance1添加到该月的第一个星期日，星期一等。 请注意，由于这是相对于日期而不是显示的“主要”月份，因此从上个月或下个月可见的日期也将具有相对于其自己月份的这些类别。

This makes it easy to style, say, the first and third Friday of each month. The demo app has some custom styles using this feature to add emoji to Labor Day and Thanksgiving.

例如，这样可以轻松设置每个月的第一个和第三个星期五的样式。 该演示应用程序具有一些自定义样式，可以使用此功能将表情符号添加到劳动节和感恩节。

lastInstance (lastInstance)

Added to the last instance of a particular day of the week within its month (as above, relative to the day in question, which means the last day of the month previous, if in view, will also have this class. The example application uses this to show an emoji for Memorial Day (the last Monday of May in the US).

在本月的某个特定日期的最后一个实例中添加(如上，相对于所讨论的日期)，这意味着如果考虑到该月的前一个月的最后一天，也将具有此类。以此显示纪念日(美国5月的最后一个星期一)的表情符号。

outsideOfMonth (outsideOfMonth)

This class is added to each day falling outside of the month being shown. By default, these days are greyed out.

此类将添加到显示月份以外的每一天。 默认情况下，这些天为灰色。

过去 (past)

This class is added to days before the current date (local time).

此类被添加到当前日期(本地时间)之前的几天。

今天 (today)

This class is added to the current date (local time), if visible on the current view.

如果该类在当前视图上可见，则添加到当前日期(本地时间)。

未来 (future)

This class is added to days after the current date (local time).

将此类添加到当前日期(本地时间)之后的几天。

持续 (last)

This class is added to the last day of the its month.

此类将添加到该月的最后一天。

活动班 (Classes for Events)

偏移量X (offsetX)

This class on an event represents the day of the week when the event starts on this week. If an event spans more than one week, the offset for the second week, etc. would be offset0 (Sunday).

事件上的此类代表事件在本周开始的星期几 。 如果一个事件跨越一个多星期，则第二个星期的偏移量等将为offset0 (星期日)。

跨度X (spanX)

This class on an event represents the width of the event display that week, in days. For example, if an event spans from a Thursday to the next Wednesday, it would have span3 on the first week and span4 on the second week.

事件上的此类表示该周 (天)中事件显示的宽度。 例如，如果一个事件从一个星期四到下一个星期三，则该事件在第一周具有span3 ，在第二周具有span4 。

eventRow X (eventRowX)

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.

事件上的此类表示该周从1开始绘制事件的“行”。 最多可显示20行，如果一周之内看不到太多内容，则内容可滚动。 在2.0之前的版本中，它称为slotX 。

继续 (continued)

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.

从上周开始，此事件将添加到事件中。 默认情况下，这会关闭事件框左侧的圆角，并在标题之前添加灰色右箭头。

未完待续 (toBeContinued)

This is added to an event when it is spills over into the following week. By default, this turns off the rounded corners on the right side of the event box and adds a grey right-arrow after the title.

当事件蔓延到下周时，会将其添加到事件中。 默认情况下，这会关闭事件框右侧的圆角，并在标题后添加灰色右箭头。

hasUrl (hasUrl)

This is added to an event when it has a url attribute (i.e., it is a hyperlink). By default, this is used to add a hovering underscore to event titles that are hyperlinked.

当它具有url属性(即，超链接)时，将其添加到事件中。 默认情况下，此选项用于向超链接的事件标题添加悬停的下划线。

I'm open to other suggestions, provided they are easily calculated and there's some reasonable use case for having them.

我愿意接受其他建议，只要可以轻松计算出它们，并且有一些合理的用例即可。

startTime / endTime (startTime / endTime)

These classes are applied to the start and end time of an event, respectively.

这些类分别应用于事件的开始时间和结束时间。

未来的计划 (Future plans)

• [x] Keep it simple, not a kitchen-sink control.

  [x]保持简单，而不是厨房水槽控件。

• [x] Better docs.

  [x]更好的文档。

• [x] Add optional external stylesheets (keep scoped styling to the basics).

  [x]添加可选的外部样式表(保留基本的作用域样式)。

• [x] Add a "starts-on-Monday" mode.

  [x]添加“星期一开始”模式。

• [x] Add support for showing event times (New in 2.0!)

  [x]添加了对显示事件时间的支持(2.0中的新增功能！)

• [x] Possibly add a "week" view (no time of day scaling, just 7 taller boxes).

  [x]可能添加“周”视图(无时间缩放，仅7个高框)。

• [x] Possibly add modes for a set number of weeks, multiple months, or even a full year.

  [x]可能会添加设置数周，数月甚至全年的模式。

• [x] Extract date manipulation methods to a separate plugin.

  [x]将日期处理方法提取到单独的插件。

• [ ] Material theme (would love help with this)

  []素材主题(对此会有帮助)

• [ ] Apple Calendar theme (would love help with this)

  [] Apple Calendar主题(希望对此有所帮助)

• [ ] Outlook Calendar theme (would love help with this)

  [] Outlook日历主题(希望对此有所帮助)

• [ ] 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.

  []我对Intl时间格式选项不满意，尤其是为了紧凑地显示时间范围。 考虑自定义格式器或将格式器功能作为属性传递的能力。

• [ ] 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).

  []重命名主要CSS类(日历视图，日期，星期等)，以减少对层叠的依赖，从而更容易自定义主题(主题的重大更改，针对3.0.0)。

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.

欢迎PR和问题！ 对于请求请求，请使用相同的代码样式-包括样式，纯JavaScript和Vue组件的linter配置。 建议使用更漂亮的。

灵感 (Inspiration)

This project was inspired by Monthly.js, a JQuery-based control I've contributed to. Unfortunately, I wasn't able to port the code and still do things the Vue / Vanilla JS way, but I did borrow some of the concepts from that component.

该项目的灵感来自Monthly.js，这是我贡献的基于JQuery的控件。 不幸的是，我无法移植代码，仍然无法以Vue / Vanilla JS的方式进行操作，但是我确实从该组件中借鉴了一些概念。

常问问题 (FAQ)

(Ok, not really frequently-asked, but just random stuff.)

(好的，不是经常问的，而是随机的东西。)

为什么选择Vue？ (Why Vue?)

Because Vue is awesome. I've been using it a few months in production, and I've slowly migrated my applications from ExtJS, JQuery, and Riot to Vue components. If you prefer React or Angular, it should be reasonably easy to port it. If you do, please let me know, maybe we can coordinate on feature upgrades!

因为Vue很棒。 我已经在生产中使用了几个月，并且已经将我的应用程序从ExtJS，JQuery和Riot迁移到Vue组件。 如果您更喜欢React或Angular，则应该相当容易移植它。 如果您这样做，请告诉我，也许我们可以协调功能升级！

您可以添加“ X”功能吗？ (Can you add "X" feature?)

Maybe. Depends if it fits the core functionality of viewing a calendar grid. I don't want to create something that replicates all possible calendar views, and definitely don't want to add functionality for creating or editing events (that should be handled by the application/component hosting the view).

也许。 取决于它是否适合查看日历网格的核心功能。 我不想创建某些东西来复制所有可能的日历视图，并且绝对不想添加用于创建或编辑事件的功能(应由承载该视图的应用程序/组件来处理)。

为什么不使用moment.js？ (Why not use moment.js?)

Moment.js is great, but I would only need a tiny fraction of its capabilities, and for simplicity, I wanted to not have any dependencies (other than Vue of course).

Moment.js很棒，但是我只需要其功能的一小部分，为了简单起见，我不想有任何依赖关系(当然不是Vue)。

为什么风格如此“朴素”？ (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.)

基线样式(在不导入任何外部CSS文件的情况下得到的东西)旨在尽可能裸露，同时仍提供完整的功能和易读性。 如果您决定创建自己的主题，这里的希望是最大程度地减少覆盖我的样式的工作。 (将在3.0中进行一些更改以使其变得更加容易。)

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.

默认样式表以此为基础，为日历提供了一套简洁，简洁的默认样式，如果您不想创建自己的主题，该样式表将非常有用。 您可以从static/css/default.css包含它。 示例应用程序使用此样式表。

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).

第三个样式表static/css/holidays-us.css展示了使用CSS通过CSS选择器设置特定日子的样式的简单性(它在各种假期之外添加了表情符号字符)。

我不能覆盖哪些样式？ (What styles can I not override?)

• If you change the event's font-size (defaults to 1em), padding, or border-width, you'll have to change the slotX classes as well to position the events vertically in the right place. (You can change the overall font size, the entire calendar uses the same 1em font size and will scale everything accordingly.)

  如果更改事件的font-size (默认为1em )， padding或border-width ，则还必须更改slotX类以将事件垂直放置在正确的位置。 (您可以更改整体字体大小，整个日历使用相同的1em字体大小，并将相应缩放所有内容。)

• The z-index of the weeks and events are managed using style declarations, they ensure that events for one week don't overlap the next week.

  周和事件的z-index使用style声明进行管理，它们确保一个星期的事件不会在下一周重叠。

构建设置 (Build Setup)

# install dependencies
npm install# build for production with minification
npm run build

翻译自: https://vuejsexamples.com/simple-vue-component-to-show-a-month-grid-calendar-with-events/

vue 网格组件