vue 使用quasar_使用Quasar框架的vue.js日历，可实现每月视图和议程视图

程正阳

2023-12-01

vue 使用quasar

类星历 (Quasar Calendar)

An event display calendar for the Quasar framework. This is still a work in progress project but we're putting in functionality and squashing bugs on a consistent basis.

Quasar框架的事件显示日历。这仍然是一个进行中的项目，但我们会不断添加功能并消除错误。

View demo 查看演示 Download Source 下载源

建立 (Setup)

npm install quasar-calendar

Add Calendar to you .vue page similar to a a Quasar component

将日历添加到您的.vue页面，类似于Quasar组件

import { Calendar } from 'quasar-calendar'

or import individual components

或导入单个组件

import {
  CalendarMonth,
  CalendarAgenda,
  CalendarMultiDay
} from 'quasar-calendar'

In your template, you can just put in a calendar viewer using the current date as the start date

在模板中，您可以使用当前日期作为开始日期来放入日历查看器

<calendar />

Or you can pass in parameters to customize

或者您可以传递参数以自定义

<calendar-month
  :start-date="Date('2019-01-01')"
  :events="someEventObject"
  :sunday-first-day-of-week="true"
  calendar-locale="fr"
  calendar-timezone="Europe/Paris"
  :allow-editing="false"
/>

事件数据格式 (Event data format)

The event data format is meant to be a subset of the Google Calendar v3 API (this is still a work in progress). Events should be passed in as an array of objects. Each object can have elements like in this example:

事件数据格式应作为Google Calendar v3 API的子集( 目前仍在进行中 )。事件应作为对象数组传递。每个对象可以具有以下示例中的元素：

[
  {
    id: 1,
    summary: 'Test event',
    description: 'Some extra info goes here',
    location: 'Office of the Divine Randomness, 1232 Main St., Denver, CO',
    start: {
      dateTime: '2018-02-16T14:00:00', // ISO 8601 formatted
      timeZone: 'America/New_York' // Timezone listed as a separate IANA code
    },
    end: {
      dateTime: '2018-02-16T16:30:00',
      timeZone: 'American/New_York'
    },
    color: 'positive',
    attendees: [
      {
        id: 5,
        email: '[email protected]',
        displayName: 'John Q. Public',
        organizer: false,
        self: false,
        resource: false
      }
    ]
  },
  {
    id: 2,
    summary: 'Test all-day event',
    description: 'Some extra info goes here',
    start: {
      date: '2018-02-16' // A date variable indicates an all-day event
    },
    end: {
      date: '2018-02-19'
    }
  },
    {
      id: 3,
      summary: 'Some other test event',
      description: 'Some extra info goes here',
      start: {
        dateTime: '2018-02-17T10:00:00+0500', // timezone embedded in dateTime
      },
      end: {
        dateTime: '2018-02-17T12:30:00+0500',
      },
    },
]

Each object needs to have a unique ID. The date time should be in ISO 8601 format. A value in the optional timeZone field will override the timezone.

每个对象都需要具有唯一的ID。日期时间应为ISO 8601格式。可选的timeZone字段中的值将覆盖时区。

日历事件引用 (Calendar event referencing)

Each calendar is given a random reference string so that we can distinguish between multiple calendars on a page. You can override this and pass in a string so that you can listen for events from that calendar. In this case, if we pass in the string MYCALENDAR, the Vue.js event click-event-MYCALENDAR would fire on the global event bus when a calendar event is clicked on.

每个日历都有一个随机的参考字符串，以便我们可以区分页面上的多个日历。您可以覆盖它并传递一个字符串，以便可以侦听该日历中的事件。在这种情况下，如果我们传递字符串MYCALENDAR ，则在click-event-MYCALENDAR日历事件时，Vue.js事件click-event-MYCALENDAR将在全局事件总线上触发。

自定义事件详细信息处理 (Custom event detail handling)

By default we use our own event detail popup when an event is clicked. You can override this and use your own by doing a few things:

默认情况下，单击事件时，我们将使用自己的事件详细信息弹出窗口。您可以通过做一些事情来覆盖并使用自己的方法：

Pass in an event reference string
传递事件参考字符串
Prevent the default event detail from showing up
阻止显示默认事件详细信息
Listen for a click event to trigger your own detail content
监听点击事件以触发您自己的详细内容

So to implement, be sure to have prevent-event-detail and event-ref set when you embed a calendar component:

因此，要实施，请确保在嵌入日历组件时设置了prevent-event-detail和event-ref ：

<calendar
  event-ref="MYCALENDAR"
  :prevent-event-detail="true"
  :events="someEventObject"
/>

And then somewhere be sure to be listening for a click event on that calendar:

然后确保在某个地方正在监听该日历上的click事件：

this.$root.$on(
  'click-event-MYCALENDAR',
  function (eventDetailObject) {
    // do something here
  }
)

活动编辑 (Event editing)

Starting with v0.3 we are setting up the framework to allow for editing individual events. By default this functionality is turned off, but you can pass a value of true into the allow-editing parameter on one of the main calendar components. The functionality if very limited to start but we expect to be adding more features in the near future.

从v0.3开始，我们正在设置框架以允许编辑单个事件。默认情况下，此功能是关闭的，但是您可以将true值传递给主要日历组件之一上的allow-editing参数。该功能虽然非常有限，但我们希望在不久的将来添加更多功能。

When an event is edited, a global event bus message in the format of update-event-MYCALENDAR is sent with the updated event information as the payload. You can listen for this to trigger a call to whatever API you are using for calendar communication. Right now when an an update is detected the passed in events array is updated and the array is parsed again.

编辑update-event-MYCALENDAR格式发送全局事件总线消息，并将更新后的事件信息作为有效内容。您可以侦听此事件以触发对用于日历通信的任何API的调用。现在，当检测到更新时，将更新传入的events数组，并再次解析该数组。

Only a subset of fields are currently editable:

当前只有一部分字段可编辑：

Start / end time and date
开始/结束时间和日期
Is an all-day event
是全天活动
Summary / title
摘要/标题
Description
描述

各个Vue组件 (Individual Vue components)

The usable components of Calendar, CalendarMonth, CalendarMultiDay and CalendarAgenda share the following properties:

Calendar ， CalendarMonth ， CalendarMultiDay和CalendarAgenda的可用组件共享以下属性：

Vue Property	Type	Description
`start-date`	JavaScript Date or Luxon DateTime	A JavaScript Date or Luxon DateTime object that passes in a starting display date for the calendar to display.
`sunday-first-day-of-week`	Boolean	If true this will force month and week calendars to start on a Sunday instead of the standard Monday.
`calendar-locale`	String	A string setting the locale. We use the Luxon package for this and they describe how to set this here. This will default to the user's system setting.
`calendar-timezone`	String	Manually set the timezone for the calendar. Many strings can be passed in including `UTC` or any valid IANA zone. This is better explained here.
`event-ref`	String	Give the calendar component a custom name so that events triggered on the global event bus can be watched.
`prevent-event-detail`	Boolean	Prevent the default event detail popup from appearing when an event is clicked in a calendar.
`allow-editing`	Boolean	Allows for individual events to be edited. See the editing section.

Vue属性	类型	描述
`start-date`	JavaScript日期或Luxon DateTime	传递日历的开始显示日期JavaScript Date或Luxon DateTime对象。
`sunday-first-day-of-week`	布尔型	如果为true，则将强制月和周日历从星期日开始，而不是标准星期一。
`calendar-locale`	串	设置语言环境的字符串。我们为此使用Luxon软件包，他们在此处介绍了如何设置它。这将默认为用户的系统设置。
`calendar-timezone`	串	手动设置日历的时区。可以传入许多字符串，包括`UTC`或任何有效的IANA区域。这在这里有更好的解释。
`event-ref`	串	为日历组件指定一个自定义名称，以便可以监视在全局事件总线上触发的事件。
`prevent-event-detail`	布尔型	防止在日历中单击事件时显示默认事件详细信息弹出窗口。
`allow-editing`	布尔型	允许编辑单个事件。参见编辑部分。

In addition, each individual components have the following properties:

此外，每个单独的组件都具有以下属性：

日历 (Calendar)

Vue Property	Type	Description
`tab-labels`	Object	Passing in an object with strings that will override the labels for the different calendar components. Set variables for `month`, `week`, `threeDay`, `day` and `agenda`. Eventually we will replace this with language files and will use the `calendar-locale` setting.

Vue属性	类型	描述
`tab-labels`	目的	用字符串传递对象，该字符串将覆盖不同日历组件的标签。为`month` ， `week` ， `threeDay`日， `day`和`agenda`设置变量。最终，我们将其替换为语言文件，并使用`calendar-locale`设置。

CalendarMultiDay (CalendarMultiDay)

Vue Property	Type	Description
`num-days`	Number	The number of days the multi-day calendar. A value of `1` will change the header to be more appropriate for a single day.
`nav-days`	Number	This is how many days the previous / next navigation buttons will jump.
`force-start-of-week`	Boolean	Default is `false`. This is appropriate if you have a week display (7 days) that you want to always start on the first day of the week.

Vue属性	类型	描述
`num-days`	数	多天日历的天数。值为`1`会将标题更改为更适合一天。
`nav-days`	数	这是上一个/下一个导航按钮将跳多少天。
`force-start-of-week`	布尔型	默认值为`false` 。如果您希望始终在一周的第一天开始显示一周(7天)，这是合适的。

日历议程 (CalendarAgenda)

Vue Property	Type	Description
`num-days`	Number	The number of days to initially display and also the number of additional days to load up when the user scrolls to the bottom of the agenda.
`agenda-style`	String	Defaults to "dot". You can also set this as "block" to use an infinite scroll design that is meant for mobile use.
`scroll-height`	String	Defaults to `200px`, this is meant to define the size of the "block" style.

Vue属性	类型	描述
`num-days`	数	用户滚动到议程底部时，最初显示的天数，以及要加载的其他天数。
`agenda-style`	串	默认为“点”。您也可以将其设置为“ block”，以使用旨在用于移动设备的无限滚动设计。
`scroll-height`	串	默认值为`200px` ，这意味着定义“块”样式的大小。

路线图 (Roadmap)

Our near-term roadmap is as follows:

我们的近期路线图如下：

Version	Description
v0.3.x	Have some basic editing abilities such as changing the data for an event and drag and drop editing.

版	描述
v0.3.x	具有一些基本的编辑功能，例如更改事件的数据以及拖放编辑。

翻译自: https://vuejsexamples.com/a-vue-js-calendar-using-the-quasar-framework-that-implements-monthly-and-agenda-views/