vue使⽤quasar_使⽤Quasar框架的vue.js⽇历，可实现每⽉视
图和议程视图
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框架的事件显⽰⽇历。 这仍然是⼀个进⾏中的项⽬，但我们会不断添加功能并消除错误。
建⽴ (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 (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:
事件数据格式应作为的⼦集( ⽬前仍在进⾏中 )。 事件应作为对象数组传递。 每个对象可以具有以下⽰例中的元素：
[
{
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
vuejs流程图插件},
end: {
dateTime: '2018-02-16T16:30:00',
timeZone: 'American/New_York'
},
color: 'positive',
attendees: [
{
id: 5,
email: '',
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 format. A value in the optional timeZone field will override the timezone.
每个对象都需要具有唯⼀的ID。 ⽇期时间应为格式。 可选的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 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 . 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 . This is better explained .
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或任何有效的 。 这有更好的解释。event-ref串为⽇历组件指定⼀个⾃定义名称，以便可以监视在全局事件总线上触发的事件。
prevent-event-detail布尔型防⽌在⽇历中单击事件时显⽰默认事件详细信息弹出窗⼝。
allow-editing布尔型允许编辑单个事件。 参见编辑部分。
Vue属性类型描述
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)

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。