同步操作将从 dda/fullcalendar-demo 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
<template>
<FullCalendar ref="fullCalendar" :options="calendarOptions"></FullCalendar>
</template>
<script>
import FullCalendar from '@fullcalendar/vue';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import interactionPlugin from '@fullcalendar/interaction';
import listPlugin from '@fullcalendar/list';
export default {
components: {FullCalendar},
data () {
return {
calendarOptions: {
plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin, listPlugin],
initialView: 'dayGridMonth',
};
}
};
</script>
locale:'zh' 国际化,中文
initialView:'dayGridMonth' 默认显示视图,月视图
minTime:'00:00:00' 时间网格中时间的最小值,0点
maxTime:'23:00:00' 时间网格中时间的最大值,23点
slotDuration:'00:15:00' 时间网格中时间间隔,15分钟
defaultTimedEventDuration:'00:30' 日程事件在时间网格中占用的高度,30分钟的高度
eventLimit:true 是否限制日程事件的数量,限制
fixedWeekCount:false 是否固定月视图显示的周数,不固定
showNonCurrentDates:false 是否显示非本月日期,不显示
allDaySlot:false 是否显示全天,不显示;设置显示后会在时间网格头部显示
weekends:true 是否显示周末,显示
slotLabelFormat:slotLabelFormat 时间网格时间格式
eventTimeFormat:eventTimeFormat 日程事件时间格式
firstDay:1 星期的第一列显示,周一(0周日 1周一 2周二...)
headerToolbar:header 头部工具条
buttonText:buttonText 按钮文本
plugins:plugins 绑定的控件
events:events 日程事件
validRange:validRange 全局日期范围;超出范围按钮会禁用
datesSet:datesSet 日期渲染;修改日期范围后触发
eventClick:handleEventClick 点击日程事件,显示详情
dateClick:handleDateClick 点击日期,显示新增
<template>
<FullCalendar defaultView="dayGridMonth" :plugins="plugins" />
</template>
<script>
import FullCalendar from '@fullcalendar/vue';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import interactionPlugin from '@fullcalendar/interaction';
import listPlugin from '@fullcalendar/list';
export default {
components: {
FullCalendar
},
data() {
return {
plugins: [
dayGridPlugin,
timeGridPlugin,
interactionPlugin,
listPlugin
]
}
}
}
</script>
<style scoped>
@import '~@fullcalendar/core/main.css';
@import '~@fullcalendar/daygrid/main.css';
@import '~@fullcalendar/timegrid/main.css';
@import '~@fullcalendar/list/main.css';
</style>
locale="zh" 国际化,中文
defaultView="dayGridMonth" 默认显示视图,月视图
minTime="00:00:00" 时间网格中时间的最小值,0点
maxTime="23:00:00" 时间网格中时间的最大值,23点
slotDuration="00:15:00" 时间网格中时间间隔,15分钟
defaultTimedEventDuration="00:30" 日程事件在时间网格中占用的高度,30分钟的高度
:eventLimit="true" 是否限制日程事件的数量,限制
eventLimitText="查看所有" 日程事件超出限制数量后显示的文本
:fixedWeekCount="false" 是否固定月视图显示的周数,不固定
:showNonCurrentDates="false" 是否显示非本月日期,不显示
:allDaySlot="false" 是否显示全天,不显示;设置显示后会在时间网格头部显示
:weekends="true" 是否显示周末,显示
:slotLabelFormat="slotLabelFormat" 时间网格时间格式
:eventTimeFormat="eventTimeFormat" 日程事件时间格式
:firstDay="1" 星期的第一列显示,周一(0周日 1周一 2周二...)
:header="header" 头部工具条
:buttonText="buttonText" 按钮文本
:plugins="plugins" 绑定的控件
:events="events" 日程事件
:validRange="validRange" 全局日期范围;超出范围按钮会禁用
:viewSkeletonRender="viewSkeletonRender" 视图渲染;修改视图类型后触发
:datesRender="datesRender" 日期渲染;修改日期范围后触发
@eventClick="handleEventClick" 点击日程事件,显示详情
@dateClick="handleDateClick" 点击日期,显示新增
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。