首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >我正在使用Vue.js编写完整日历:尝试在其上添加功能,但不起作用

我正在使用Vue.js编写完整日历:尝试在其上添加功能,但不起作用
EN

Stack Overflow用户
提问于 2021-11-13 05:11:58
回答 2查看 1.5K关注 0票数 1

我已经开始用Vue做完整的日历了。我试过了,但无法采用完整日历上的一些功能。比如:

  1. 如何添加columnHeaderFormat喜欢-为月份-星期一,星期二,周-星期一- 08/11

  1. 如何在周日历上只显示预定的时间。如果事件从下午2点到下午4点,那么周/日日历只应显示这2小时。

如何在完整日历中添加默认日期.

  1. .

  1. 如何在FC中添加事件限制。

代码:模板:<full-calendar class="calendar" :options="calendarOptions"/>

脚本: data() {

代码语言:javascript
运行
复制
    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 Linkhttps://codesandbox.io/s/vue-fullcalendar-scheduler-example-forked-0vgy6?file=/components/Calendar.vue

请帮我解决这个问题。你的回答将不胜感激。谢谢

EN

回答 2

Stack Overflow用户

发布于 2021-11-14 10:16:37

基于这里的文档,https://fullcalendar.io/docs/dayHeaderFormat

代码语言:javascript
运行
复制
// 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' }
代码语言:javascript
运行
复制
var calendar = new Calendar(calendarEl, {
  views: {
    dayGrid: {
      weekday: 'long'
    }
  }
});

应用于您的代码

代码语言:javascript
运行
复制
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
}
票数 1
EN

Stack Overflow用户

发布于 2021-11-15 13:42:37

对于默认加载,事件限制和日期格式:

'2021-11-01'

  • dayMaxEvents:

  • initialDate: 2,
  • dayHeaderFormat:{工作日:‘长’,月份:‘数字’,天:‘数字’,omitCommas:真}

合并代码:

代码语言:javascript
运行
复制
>  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'
>         }
>       }
>     };   
}
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/69951643

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档