我已经开始用Vue做完整的日历了。我试过了,但无法采用完整日历上的一些功能。比如:
如何在完整日历中添加默认日期.
代码:模板:<full-calendar class="calendar" :options="calendarOptions"/>
脚本: data() {
return {
calendarOptions: {
plugins: [dayGridPlugin, interactionPlugin, listPlugin, timeGridPlugin],
initialView: 'dayGridMonth',
headerToolbar: {
left: 'today prev,next',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},
events: this.eventDates,
eventDisplay: 'block',
displayEventTime: false,
allDaySlot: false
}
CodeSandBox Link:https://codesandbox.io/s/vue-fullcalendar-scheduler-example-forked-0vgy6?file=/components/Calendar.vue
请帮我解决这个问题。你的回答将不胜感激。谢谢
发布于 2021-11-14 10:16:37
基于这里的文档,https://fullcalendar.io/docs/dayHeaderFormat
// like 'Mon', for month view
{ weekday: 'short' }
// like 'Mon 9/7', for week views
{ weekday: 'short', month: 'numeric', day: 'numeric', omitCommas: true }
// like 'Monday', for day views
{ weekday: 'long' }
var calendar = new Calendar(calendarEl, {
views: {
dayGrid: {
weekday: 'long'
}
}
});
应用于您的代码
return {
calendarOptions: {
views: {
dayGrid: {
weekday: 'long'
}
},
plugins: [dayGridPlugin, interactionPlugin, listPlugin, timeGridPlugin],
initialView: 'dayGridMonth',
headerToolbar: {
left: 'today prev,next',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},
events: this.eventDates,
eventDisplay: 'block',
displayEventTime: false,
allDaySlot: false
}
发布于 2021-11-15 13:42:37
对于默认加载,事件限制和日期格式:
'2021-11-01'
合并代码:
> data() {
> return {
> calendarOptions: {
> plugins: [dayGridPlugin, interactionPlugin, listPlugin, timeGridPlugin],
> initialView: 'dayGridMonth',
> headerToolbar: {
> left: 'today prev,next',
> center: 'title',
> right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
> },
> events: this.eventDates,
> eventDisplay: 'block',
> displayEventTime: false,
> allDaySlot: false,
> initialDate: this.startingDate,
> dayMaxEvents: 2,
> dayHeaderFormat: {
> weekday: 'long', month: 'numeric', day: 'numeric', omitCommas: true
> },
> expandRows: true,
> slotEventOverlap: false,
> buttonText: {
> today: 'Today',
> month: 'Month',
> week: 'Week',
> day: 'Day'
> }
> }
> };
}
https://stackoverflow.com/questions/69951643
复制相似问题