v-calendar 日历组件使用&自定义提示内容

原创 已于 2023-11-09 16:32:26 修改 · 9.5k 阅读 · 9 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端 #javascript

于 2023-11-09 16:10:26 首次发布

目录

0.介绍

1.安装v-calendar

2.页面使用

3.使用插槽实现待办数量的标记

0.介绍

最近项目中用到了日历插件，需要统计每天的任务数量，类似elementui的badge组件，待办任务数量

大概最后的效果如下图所示，右上角把代办任务数量展示出来

vue的日历相关组件挺多的，选了v-calendar，后期翻API有点难受，中文版不太好找，简单记录下。

1.安装v-calendar

npm i --save v-calendar

我的是vue2，最后下载的的版本是

直接全局引入

import VCalendar from 'v-calendar'; // 引入日历插件

Vue.use(VCalendar, {
  componentPrefix: 'vc'
}); // 组件前缀，以防后期跟其他冲突

2.页面使用

ps：“vc-”就是在引入时候的追加的前缀

<vc-calendar :attributes="attrs" class="calendar"/>

数据结构如下 

attrs: [
        {
          key: 'v0Day',
          dates: new Date(),
          highlight: true,
          dot: true,
          popover: {
            label: '美好的一天！要开心呦！'
          }
        },
        {
          key: 'V1Day',
          customData: '10',
          dot: {
            style: {
              backgroundColor: 'red'
            }
          },
          dates: new Date(2023, 10, 18),
          popover: {
            label: '美好的一天！要开心呦！'
          }
        },
        {
          key: 'V2Day',
          customData: '9',
          dates: new Date(2023, 10, 6)
        }
      ],

官网关于attributes数据结构介绍如下图

运行效果图如下所示，标记过的日期(设置过dot)的都有一个小圆点。

3.使用插槽实现待办数量的标记

但是跟目标：日期又上角有对应的代办数量有点差距，看了下API，关于#day-content插槽介绍

结合attributes数据中customData属性，可以利用插槽实现最后待办标记的效果

贴代码，根据实际情况自定义customData，可以是字符串、数组或者对象，实际应用中有且止有一个数量，所以我就直接拿设置了字符串，页面获取也是直接写死了。

<vc-calendar :attributes="attrs" class="calendar">
   <template #day-content="{ day }">
        <span tabindex="-1" :aria-label="day.ariaLabel" :aria-disabled="day.isDisabled"
               role="button"
               class="vc-day-content vc-focusable"
               >{{ day.day }}</span>
                  <span class="v-custom-dot"
                        v-if="day.attributes?.length>0&&day.attributes[0]?.customData"
                  >{{ day.attributes[0].customData }}</span>
  </template>
</vc-calendar>

关于插槽中{day}的数据结构，截取了标注过的2023-11-18的这天，内容如下，在day.attributes属性中，我们可以拿到之前设置的customData值，所以就可以灵活配置了~

{
  "id": "2023-11-18",
  "label": "18",
  "ariaLabel": "2023年11月18日星期六",
  "day": 18,
  "dayFromEnd": 13,
  "weekday": 7,
  "weekdayPosition": 6,
  "weekdayPositionFromEnd": 1,
  "weekdayOrdinal": 3,
  "weekdayOrdinalFromEnd": 2,
  "week": 3,
  "weekFromEnd": 3,
  "weeknumber": 47,
  "isoWeeknumber": 46,
  "month": 11,
  "year": 2023,
  "date": "2023-11-17T16:00:00.000Z",
  "range": {
    "start": "2023-11-17T16:00:00.000Z",
    "end": "2023-11-18T15:59:59.999Z"
  },
  "isToday": false,
  "isFirstDay": false,
  "isLastDay": false,
  "inMonth": true,
  "inPrevMonth": false,
  "inNextMonth": false,
  "onTop": false,
  "onBottom": false,
  "onLeft": false,
  "onRight": false,
  "classes": [
    "id-2023-11-18",
    "day-18",
    "day-from-end-13",
    "weekday-7",
    "weekday-position-6",
    "weekday-ordinal-3",
    "weekday-ordinal-from-end-2",
    "week-3",
    "week-from-end-3",
    {
      "is-today": false,
      "is-first-day": false,
      "is-last-day": false,
      "in-month": true,
      "in-prev-month": false,
      "in-next-month": false,
      "on-top": false,
      "on-bottom": false,
      "on-left": false,
      "on-right": false
    }
  ],
  "isDisabled": false,
  "isFocusable": false,
  "refresh": false,
  "attributesMap": {
    "V1Day": {
      "key": "V1Day",
      "hashcode": 83582020,
      "customData": "10",
      "order": 0,
      "dateOpts": {
        "order": 0,
        "locale": {
          "id": "zh-CN",
          "daysInWeek": 7,
          "firstDayOfWeek": 2,
          "masks": {
            "L": "YYYY/MM/DD",
            "title": "MMMM YYYY",
            "weekdays": "W",
            "navMonths": "MMM",
            "input": [
              "L",
              "YYYY-MM-DD",
              "YYYY/MM/DD"
            ],
            "inputDateTime": [
              "L h:mm A",
              "YYYY-MM-DD h:mm A",
              "YYYY/MM/DD h:mm A"
            ],
            "inputDateTime24hr": [
              "L HH:mm",
              "YYYY-MM-DD HH:mm",
              "YYYY/MM/DD HH:mm"
            ],
            "inputTime": [
              "h:mm A"
            ],
            "inputTime24hr": [
              "HH:mm"
            ],
            "dayPopover": "WWW, MMM D, YYYY",
            "data": [
              "L",
              "YYYY-MM-DD",
              "YYYY/MM/DD"
            ],
            "iso": "YYYY-MM-DDTHH:mm:ss.SSSZ"
          },
          "dayNames": [
            "星期日",
            "星期一",
            "星期二",
            "星期三",
            "星期四",
            "星期五",
            "星期六"
          ],
          "dayNamesShort": [
            "周日",
            "周一",
            "周二",
            "周三",
            "周四",
            "周五",
            "周六"
          ],
          "dayNamesShorter": [
            "周日",
            "周一",
            "周二",
            "周三",
            "周四",
            "周五",
            "周六"
          ],
          "dayNamesNarrow": [
            "日",
            "一",
            "二",
            "三",
            "四",
            "五",
            "六"
          ],
          "monthNames": [
            "一月",
            "二月",
            "三月",
            "四月",
            "五月",
            "六月",
            "七月",
            "八月",
            "九月",
            "十月",
            "十一月",
            "十二月"
          ],
          "monthNamesShort": [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月"
          ],
          "amPm": [
            "am",
            "pm"
          ],
          "monthData": {
            "11-2023": {
              "firstDayOfWeek": 2,
              "inLeapYear": false,
              "firstWeekday": 4,
              "days": 30,
              "weeks": 5,
              "month": 11,
              "year": 2023,
              "weeknumbers": [
                45,
                46,
                47,
                48,
                49
              ],
              "isoWeeknumbers": [
                44,
                45,
                46,
                47,
                48
              ]
            },
            "10-2023": {
              "firstDayOfWeek": 2,
              "inLeapYear": false,
              "firstWeekday": 1,
              "days": 31,
              "weeks": 6,
              "month": 10,
              "year": 2023,
              "weeknumbers": [
                40,
                41,
                42,
                43,
                44,
                45
              ],
              "isoWeeknumbers": [
                39,
                40,
                41,
                42,
                43,
                44
              ]
            },
            "12-2023": {
              "firstDayOfWeek": 2,
              "inLeapYear": false,
              "firstWeekday": 6,
              "days": 31,
              "weeks": 5,
              "month": 12,
              "year": 2023,
              "weeknumbers": [
                49,
                50,
                51,
                52,
                53
              ],
              "isoWeeknumbers": [
                48,
                49,
                50,
                51,
                52
              ]
            },
            "1-2020": {
              "firstDayOfWeek": 2,
              "inLeapYear": true,
              "firstWeekday": 4,
              "days": 31,
              "weeks": 5,
              "month": 1,
              "year": 2020,
              "weeknumbers": [
                1,
                2,
                3,
                4,
                5
              ],
              "isoWeeknumbers": [
                1,
                2,
                3,
                4,
                5
              ]
            }
          }
        }
      },
      "popover": {
        "label": "美好的一天！要开心呦！"
      },
      "dates": [
        {
          "isDateInfo": true,
          "order": 0,
          "locale": {
            "id": "zh-CN",
            "daysInWeek": 7,
            "firstDayOfWeek": 2,
            "masks": {
              "L": "YYYY/MM/DD",
              "title": "MMMM YYYY",
              "weekdays": "W",
              "navMonths": "MMM",
              "input": [
                "L",
                "YYYY-MM-DD",
                "YYYY/MM/DD"
              ],
              "inputDateTime": [
                "L h:mm A",
                "YYYY-MM-DD h:mm A",
                "YYYY/MM/DD h:mm A"
              ],
              "inputDateTime24hr": [
                "L HH:mm",
                "YYYY-MM-DD HH:mm",
                "YYYY/MM/DD HH:mm"
              ],
              "inputTime": [
                "h:mm A"
              ],
              "inputTime24hr": [
                "HH:mm"
              ],
              "dayPopover": "WWW, MMM D, YYYY",
              "data": [
                "L",
                "YYYY-MM-DD",
                "YYYY/MM/DD"
              ],
              "iso": "YYYY-MM-DDTHH:mm:ss.SSSZ"
            },
            "dayNames": [
              "星期日",
              "星期一",
              "星期二",
              "星期三",
              "星期四",
              "星期五",
              "星期六"
            ],
            "dayNamesShort": [
              "周日",
              "周一",
              "周二",
              "周三",
              "周四",
              "周五",
              "周六"
            ],
            "dayNamesShorter": [
              "周日",
              "周一",
              "周二",
              "周三",
              "周四",
              "周五",
              "周六"
            ],
            "dayNamesNarrow": [
              "日",
              "一",
              "二",
              "三",
              "四",
              "五",
              "六"
            ],
            "monthNames": [
              "一月",
              "二月",
              "三月",
              "四月",
              "五月",
              "六月",
              "七月",
              "八月",
              "九月",
              "十月",
              "十一月",
              "十二月"
            ],
            "monthNamesShort": [
              "1月",
              "2月",
              "3月",
              "4月",
              "5月",
              "6月",
              "7月",
              "8月",
              "9月",
              "10月",
              "11月",
              "12月"
            ],
            "amPm": [
              "am",
              "pm"
            ],
            "monthData": {
              "11-2023": {
                "firstDayOfWeek": 2,
                "inLeapYear": false,
                "firstWeekday": 4,
                "days": 30,
                "weeks": 5,
                "month": 11,
                "year": 2023,
                "weeknumbers": [
                  45,
                  46,
                  47,
                  48,
                  49
                ],
                "isoWeeknumbers": [
                  44,
                  45,
                  46,
                  47,
                  48
                ]
              },
              "10-2023": {
                "firstDayOfWeek": 2,
                "inLeapYear": false,
                "firstWeekday": 1,
                "days": 31,
                "weeks": 6,
                "month": 10,
                "year": 2023,
                "weeknumbers": [
                  40,
                  41,
                  42,
                  43,
                  44,
                  45
                ],
                "isoWeeknumbers": [
                  39,
                  40,
                  41,
                  42,
                  43,
                  44
                ]
              },
              "12-2023": {
                "firstDayOfWeek": 2,
                "inLeapYear": false,
                "firstWeekday": 6,
                "days": 31,
                "weeks": 5,
                "month": 12,
                "year": 2023,
                "weeknumbers": [
                  49,
                  50,
                  51,
                  52,
                  53
                ],
                "isoWeeknumbers": [
                  48,
                  49,
                  50,
                  51,
                  52
                ]
              },
              "1-2020": {
                "firstDayOfWeek": 2,
                "inLeapYear": true,
                "firstWeekday": 4,
                "days": 31,
                "weeks": 5,
                "month": 1,
                "year": 2020,
                "weeknumbers": [
                  1,
                  2,
                  3,
                  4,
                  5
                ],
                "isoWeeknumbers": [
                  1,
                  2,
                  3,
                  4,
                  5
                ]
              }
            }
          },
          "firstDayOfWeek": 2,
          "start": "2023-11-17T16:00:00.000Z",
          "startTime": 1700236800000,
          "end": "2023-11-17T16:00:00.000Z",
          "endTime": 1700236800000,
          "isDate": true,
          "isRange": false,
          "isComplex": false
        }
      ],
      "hasDates": true,
      "excludeDates": [],
      "hasExcludeDates": false,
      "excludeMode": "intersects",
      "isComplex": false,
      "targetDate": {
        "isDateInfo": true,
        "order": 0,
        "locale": {
          "id": "zh-CN",
          "daysInWeek": 7,
          "firstDayOfWeek": 2,
          "masks": {
            "L": "YYYY/MM/DD",
            "title": "MMMM YYYY",
            "weekdays": "W",
            "navMonths": "MMM",
            "input": [
              "L",
              "YYYY-MM-DD",
              "YYYY/MM/DD"
            ],
            "inputDateTime": [
              "L h:mm A",
              "YYYY-MM-DD h:mm A",
              "YYYY/MM/DD h:mm A"
            ],
            "inputDateTime24hr": [
              "L HH:mm",
              "YYYY-MM-DD HH:mm",
              "YYYY/MM/DD HH:mm"
            ],
            "inputTime": [
              "h:mm A"
            ],
            "inputTime24hr": [
              "HH:mm"
            ],
            "dayPopover": "WWW, MMM D, YYYY",
            "data": [
              "L",
              "YYYY-MM-DD",
              "YYYY/MM/DD"
            ],
            "iso": "YYYY-MM-DDTHH:mm:ss.SSSZ"
          },
          "dayNames": [
            "星期日",
            "星期一",
            "星期二",
            "星期三",
            "星期四",
            "星期五",
            "星期六"
          ],
          "dayNamesShort": [
            "周日",
            "周一",
            "周二",
            "周三",
            "周四",
            "周五",
            "周六"
          ],
          "dayNamesShorter": [
            "周日",
            "周一",
            "周二",
            "周三",
            "周四",
            "周五",
            "周六"
          ],
          "dayNamesNarrow": [
            "日",
            "一",
            "二",
            "三",
            "四",
            "五",
            "六"
          ],
          "monthNames": [
            "一月",
            "二月",
            "三月",
            "四月",
            "五月",
            "六月",
            "七月",
            "八月",
            "九月",
            "十月",
            "十一月",
            "十二月"
          ],
          "monthNamesShort": [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月"
          ],
          "amPm": [
            "am",
            "pm"
          ],
          "monthData": {
            "11-2023": {
              "firstDayOfWeek": 2,
              "inLeapYear": false,
              "firstWeekday": 4,
              "days": 30,
              "weeks": 5,
              "month": 11,
              "year": 2023,
              "weeknumbers": [
                45,
                46,
                47,
                48,
                49
              ],
              "isoWeeknumbers": [
                44,
                45,
                46,
                47,
                48
              ]
            },
            "10-2023": {
              "firstDayOfWeek": 2,
              "inLeapYear": false,
              "firstWeekday": 1,
              "days": 31,
              "weeks": 6,
              "month": 10,
              "year": 2023,
              "weeknumbers": [
                40,
                41,
                42,
                43,
                44,
                45
              ],
              "isoWeeknumbers": [
                39,
                40,
                41,
                42,
                43,
                44
              ]
            },
            "12-2023": {
              "firstDayOfWeek": 2,
              "inLeapYear": false,
              "firstWeekday": 6,
              "days": 31,
              "weeks": 5,
              "month": 12,
              "year": 2023,
              "weeknumbers": [
                49,
                50,
                51,
                52,
                53
              ],
              "isoWeeknumbers": [
                48,
                49,
                50,
                51,
                52
              ]
            },
            "1-2020": {
              "firstDayOfWeek": 2,
              "inLeapYear": true,
              "firstWeekday": 4,
              "days": 31,
              "weeks": 5,
              "month": 1,
              "year": 2020,
              "weeknumbers": [
                1,
                2,
                3,
                4,
                5
              ],
              "isoWeeknumbers": [
                1,
                2,
                3,
                4,
                5
              ]
            }
          }
        },
        "firstDayOfWeek": 2,
        "start": "2023-11-17T16:00:00.000Z",
        "startTime": 1700236800000,
        "end": "2023-11-17T16:00:00.000Z",
        "endTime": 1700236800000,
        "isDate": true,
        "isRange": false,
        "isComplex": false
      }
    }
  },
  "attributes": [
    {
      "key": "V1Day",
      "hashcode": 83582020,
      "customData": "10",
      "order": 0,
      "dateOpts": {
        "order": 0,
        "locale": {
          "id": "zh-CN",
          "daysInWeek": 7,
          "firstDayOfWeek": 2,
          "masks": {
            "L": "YYYY/MM/DD",
            "title": "MMMM YYYY",
            "weekdays": "W",
            "navMonths": "MMM",
            "input": [
              "L",
              "YYYY-MM-DD",
              "YYYY/MM/DD"
            ],
            "inputDateTime": [
              "L h:mm A",
              "YYYY-MM-DD h:mm A",
              "YYYY/MM/DD h:mm A"
            ],
            "inputDateTime24hr": [
              "L HH:mm",
              "YYYY-MM-DD HH:mm",
              "YYYY/MM/DD HH:mm"
            ],
            "inputTime": [
              "h:mm A"
            ],
            "inputTime24hr": [
              "HH:mm"
            ],
            "dayPopover": "WWW, MMM D, YYYY",
            "data": [
              "L",
              "YYYY-MM-DD",
              "YYYY/MM/DD"
            ],
            "iso": "YYYY-MM-DDTHH:mm:ss.SSSZ"
          },
          "dayNames": [
            "星期日",
            "星期一",
            "星期二",
            "星期三",
            "星期四",
            "星期五",
            "星期六"
          ],
          "dayNamesShort": [
            "周日",
            "周一",
            "周二",
            "周三",
            "周四",
            "周五",
            "周六"
          ],
          "dayNamesShorter": [
            "周日",
            "周一",
            "周二",
            "周三",
            "周四",
            "周五",
            "周六"
          ],
          "dayNamesNarrow": [
            "日",
            "一",
            "二",
            "三",
            "四",
            "五",
            "六"
          ],
          "monthNames": [
            "一月",
            "二月",
            "三月",
            "四月",
            "五月",
            "六月",
            "七月",
            "八月",
            "九月",
            "十月",
            "十一月",
            "十二月"
          ],
          "monthNamesShort": [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月"
          ],
          "amPm": [
            "am",
            "pm"
          ],
          "monthData": {
            "11-2023": {
              "firstDayOfWeek": 2,
              "inLeapYear": false,
              "firstWeekday": 4,
              "days": 30,
              "weeks": 5,
              "month": 11,
              "year": 2023,
              "weeknumbers": [
                45,
                46,
                47,
                48,
                49
              ],
              "isoWeeknumbers": [
                44,
                45,
                46,
                47,
                48
              ]
            },
            "10-2023": {
              "firstDayOfWeek": 2,
              "inLeapYear": false,
              "firstWeekday": 1,
              "days": 31,
              "weeks": 6,
              "month": 10,
              "year": 2023,
              "weeknumbers": [
                40,
                41,
                42,
                43,
                44,
                45
              ],
              "isoWeeknumbers": [
                39,
                40,
                41,
                42,
                43,
                44
              ]
            },
            "12-2023": {
              "firstDayOfWeek": 2,
              "inLeapYear": false,
              "firstWeekday": 6,
              "days": 31,
              "weeks": 5,
              "month": 12,
              "year": 2023,
              "weeknumbers": [
                49,
                50,
                51,
                52,
                53
              ],
              "isoWeeknumbers": [
                48,
                49,
                50,
                51,
                52
              ]
            },
            "1-2020": {
              "firstDayOfWeek": 2,
              "inLeapYear": true,
              "firstWeekday": 4,
              "days": 31,
              "weeks": 5,
              "month": 1,
              "year": 2020,
              "weeknumbers": [
                1,
                2,
                3,
                4,
                5
              ],
              "isoWeeknumbers": [
                1,
                2,
                3,
                4,
                5
              ]
            }
          }
        }
      },
      "popover": {
        "label": "美好的一天！要开心呦！"
      },
      "dates": [
        {
          "isDateInfo": true,
          "order": 0,
          "locale": {
            "id": "zh-CN",
            "daysInWeek": 7,
            "firstDayOfWeek": 2,
            "masks": {
              "L": "YYYY/MM/DD",
              "title": "MMMM YYYY",
              "weekdays": "W",
              "navMonths": "MMM",
              "input": [
                "L",
                "YYYY-MM-DD",
                "YYYY/MM/DD"
              ],
              "inputDateTime": [
                "L h:mm A",
                "YYYY-MM-DD h:mm A",
                "YYYY/MM/DD h:mm A"
              ],
              "inputDateTime24hr": [
                "L HH:mm",
                "YYYY-MM-DD HH:mm",
                "YYYY/MM/DD HH:mm"
              ],
              "inputTime": [
                "h:mm A"
              ],
              "inputTime24hr": [
                "HH:mm"
              ],
              "dayPopover": "WWW, MMM D, YYYY",
              "data": [
                "L",
                "YYYY-MM-DD",
                "YYYY/MM/DD"
              ],
              "iso": "YYYY-MM-DDTHH:mm:ss.SSSZ"
            },
            "dayNames": [
              "星期日",
              "星期一",
              "星期二",
              "星期三",
              "星期四",
              "星期五",
              "星期六"
            ],
            "dayNamesShort": [
              "周日",
              "周一",
              "周二",
              "周三",
              "周四",
              "周五",
              "周六"
            ],
            "dayNamesShorter": [
              "周日",
              "周一",
              "周二",
              "周三",
              "周四",
              "周五",
              "周六"
            ],
            "dayNamesNarrow": [
              "日",
              "一",
              "二",
              "三",
              "四",
              "五",
              "六"
            ],
            "monthNames": [
              "一月",
              "二月",
              "三月",
              "四月",
              "五月",
              "六月",
              "七月",
              "八月",
              "九月",
              "十月",
              "十一月",
              "十二月"
            ],
            "monthNamesShort": [
              "1月",
              "2月",
              "3月",
              "4月",
              "5月",
              "6月",
              "7月",
              "8月",
              "9月",
              "10月",
              "11月",
              "12月"
            ],
            "amPm": [
              "am",
              "pm"
            ],
            "monthData": {
              "11-2023": {
                "firstDayOfWeek": 2,
                "inLeapYear": false,
                "firstWeekday": 4,
                "days": 30,
                "weeks": 5,
                "month": 11,
                "year": 2023,
                "weeknumbers": [
                  45,
                  46,
                  47,
                  48,
                  49
                ],
                "isoWeeknumbers": [
                  44,
                  45,
                  46,
                  47,
                  48
                ]
              },
              "10-2023": {
                "firstDayOfWeek": 2,
                "inLeapYear": false,
                "firstWeekday": 1,
                "days": 31,
                "weeks": 6,
                "month": 10,
                "year": 2023,
                "weeknumbers": [
                  40,
                  41,
                  42,
                  43,
                  44,
                  45
                ],
                "isoWeeknumbers": [
                  39,
                  40,
                  41,
                  42,
                  43,
                  44
                ]
              },
              "12-2023": {
                "firstDayOfWeek": 2,
                "inLeapYear": false,
                "firstWeekday": 6,
                "days": 31,
                "weeks": 5,
                "month": 12,
                "year": 2023,
                "weeknumbers": [
                  49,
                  50,
                  51,
                  52,
                  53
                ],
                "isoWeeknumbers": [
                  48,
                  49,
                  50,
                  51,
                  52
                ]
              },
              "1-2020": {
                "firstDayOfWeek": 2,
                "inLeapYear": true,
                "firstWeekday": 4,
                "days": 31,
                "weeks": 5,
                "month": 1,
                "year": 2020,
                "weeknumbers": [
                  1,
                  2,
                  3,
                  4,
                  5
                ],
                "isoWeeknumbers": [
                  1,
                  2,
                  3,
                  4,
                  5
                ]
              }
            }
          },
          "firstDayOfWeek": 2,
          "start": "2023-11-17T16:00:00.000Z",
          "startTime": 1700236800000,
          "end": "2023-11-17T16:00:00.000Z",
          "endTime": 1700236800000,
          "isDate": true,
          "isRange": false,
          "isComplex": false
        }
      ],
      "hasDates": true,
      "excludeDates": [],
      "hasExcludeDates": false,
      "excludeMode": "intersects",
      "isComplex": false,
      "targetDate": {
        "isDateInfo": true,
        "order": 0,
        "locale": {
          "id": "zh-CN",
          "daysInWeek": 7,
          "firstDayOfWeek": 2,
          "masks": {
            "L": "YYYY/MM/DD",
            "title": "MMMM YYYY",
            "weekdays": "W",
            "navMonths": "MMM",
            "input": [
              "L",
              "YYYY-MM-DD",
              "YYYY/MM/DD"
            ],
            "inputDateTime": [
              "L h:mm A",
              "YYYY-MM-DD h:mm A",
              "YYYY/MM/DD h:mm A"
            ],
            "inputDateTime24hr": [
              "L HH:mm",
              "YYYY-MM-DD HH:mm",
              "YYYY/MM/DD HH:mm"
            ],
            "inputTime": [
              "h:mm A"
            ],
            "inputTime24hr": [
              "HH:mm"
            ],
            "dayPopover": "WWW, MMM D, YYYY",
            "data": [
              "L",
              "YYYY-MM-DD",
              "YYYY/MM/DD"
            ],
            "iso": "YYYY-MM-DDTHH:mm:ss.SSSZ"
          },
          "dayNames": [
            "星期日",
            "星期一",
            "星期二",
            "星期三",
            "星期四",
            "星期五",
            "星期六"
          ],
          "dayNamesShort": [
            "周日",
            "周一",
            "周二",
            "周三",
            "周四",
            "周五",
            "周六"
          ],
          "dayNamesShorter": [
            "周日",
            "周一",
            "周二",
            "周三",
            "周四",
            "周五",
            "周六"
          ],
          "dayNamesNarrow": [
            "日",
            "一",
            "二",
            "三",
            "四",
            "五",
            "六"
          ],
          "monthNames": [
            "一月",
            "二月",
            "三月",
            "四月",
            "五月",
            "六月",
            "七月",
            "八月",
            "九月",
            "十月",
            "十一月",
            "十二月"
          ],
          "monthNamesShort": [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月"
          ],
          "amPm": [
            "am",
            "pm"
          ],
          "monthData": {
            "11-2023": {
              "firstDayOfWeek": 2,
              "inLeapYear": false,
              "firstWeekday": 4,
              "days": 30,
              "weeks": 5,
              "month": 11,
              "year": 2023,
              "weeknumbers": [
                45,
                46,
                47,
                48,
                49
              ],
              "isoWeeknumbers": [
                44,
                45,
                46,
                47,
                48
              ]
            },
            "10-2023": {
              "firstDayOfWeek": 2,
              "inLeapYear": false,
              "firstWeekday": 1,
              "days": 31,
              "weeks": 6,
              "month": 10,
              "year": 2023,
              "weeknumbers": [
                40,
                41,
                42,
                43,
                44,
                45
              ],
              "isoWeeknumbers": [
                39,
                40,
                41,
                42,
                43,
                44
              ]
            },
            "12-2023": {
              "firstDayOfWeek": 2,
              "inLeapYear": false,
              "firstWeekday": 6,
              "days": 31,
              "weeks": 5,
              "month": 12,
              "year": 2023,
              "weeknumbers": [
                49,
                50,
                51,
                52,
                53
              ],
              "isoWeeknumbers": [
                48,
                49,
                50,
                51,
                52
              ]
            },
            "1-2020": {
              "firstDayOfWeek": 2,
              "inLeapYear": true,
              "firstWeekday": 4,
              "days": 31,
              "weeks": 5,
              "month": 1,
              "year": 2020,
              "weeknumbers": [
                1,
                2,
                3,
                4,
                5
              ],
              "isoWeeknumbers": [
                1,
                2,
                3,
                4,
                5
              ]
            }
          }
        },
        "firstDayOfWeek": 2,
        "start": "2023-11-17T16:00:00.000Z",
        "startTime": 1700236800000,
        "end": "2023-11-17T16:00:00.000Z",
        "endTime": 1700236800000,
        "isDate": true,
        "isRange": false,
        "isComplex": false
      }
    }
  ]
}

数据结构中删除了dot相关，设置标注日期需要获取的待办数量customData: '9'

 attrs: [
        {
          key: 'v0Day',
          dates: new Date(),
          highlight: true,
          popover: {
            label: '美好的一天！要开心呦！'
          }
        },
        {
          key: 'V1Day',
          customData: '10', // 划重点！！！
          dates: new Date(2023, 10, 18),
          popover: {
            label: '美好的一天！要开心呦！'
          }
        },
        {
          key: 'V2Day',
          customData: '9', // 划重点！！！
          dates: new Date(2023, 10, 6)
        }
      ],

最后放一张效果图

码字果然类，最后放个官网链接☞Attributes | VCalendar

小菜花29
关注
超简单V-Calendar日历使用
抹不去你留下的唇印的博客
12-09 8131
示例图: 1. npm i v-calendar 引入 V-Calendar V-Calendar 官网 2. main.js 引入 import VCalendar from 'v-calendar'; // 引入日历插件 Vue.use(VCalendar, { componentPrefix: 'vc', }); 3. 页面中使用V-Calendar &lt;div class="calendarBar"&gt; &lt;div class="calendarBarTit
【Vue】element el-calendar 日历组件增删改查自定义使用
热门推荐
小胡的博客
04-24 1万+
前段事件用fullcalendar插件做了一个日历，因为和系统框架不一致，改用了element el-calendar 两个插件都实现了所有功能，但总的来说，Fullcalendar好用很多，毕竟文档全，功能也全 如果没有规定一定要用某个插件，推荐使用Fullcalendar，附上官方文档参考 FullCalendar文档：https://fullcalendar.io/ 接下来就是el...
V-Calendar 日期选择器高级应用指南
gitblog_00337的博客
06-09 597
V-Calendar 日期选择器高级应用指南 前言 V-Calendar 是一个功能强大的 Vue 日历组件库，提供了丰富的日期选择功能。本文将深入探讨 V-Calendar 中几种高级日期选择器的实现方式，包括多日期选择、日期范围选择和按钮式下拉选择器。 多日期选择实现 传统多选模式实现 在 V-Calendar 2.0 版本中，mode: &quot;multiple&quot; 选项已被弃用...
【亲测免费】 V-Calendar 教程：安装与使用指南
gitblog_00050的博客
08-08 1477
V-Calendar 教程：安装与使用指南 1. 项目目录结构及介绍 在V-Calendar项目的根目录中，您将遇到以下主要文件和文件夹： src: 这是项目的源代码目录，包含了所有Vue组件、样式和配置。 components: 包含V-Calendar的核心组件。 directives: 存放自定义指令。 locales: 提供本地化支持的不同语言文件。 mixins: 共享的混入（Mi...
【免费下载】 推荐一款优雅的Vue.js日历插件——V-Calendar
gitblog_00072的博客
05-11 1672
推荐一款优雅的Vue.js日历插件——V-Calendar 在寻找一个强大且美观的日历和日期选择器插件来提升你的Vue.js应用用户体验吗？那么，V-Calendar绝对值得你投入时间和精力去了解。这款开源组件不仅设计精良，功能全面，而且易于集成到任何Vue.js项目中。 项目介绍 V-Calendar是一个专为Vue.js打造的优雅日历插件，它提供了多种展示模式，包括但不限于日历视图、时间轴视图...
前端日历插件VCalendar
qq_45600228的博客
07-31 2456
前端日历插件VCalendar
V-Calendar 日历demo组件使用
小破孩的博客
07-31 8414
先看几个效果图： 以上是V-Calendar官网展示出的日历demo效果图（这只是一部分），这么多种类，总有一款适合你 下边说一下使用方法： 通过npm安装依赖： npm install v-calendar@next 安装完成后在main.js中配置使用 import VCalendar from 'v-calendar'; // 引入日历插件 Vue.use(VCal...
VCalendar是一个轻量级的无依赖关系的Vuejs日历插件
08-07
V-Calendar是一个轻量级的，无依赖关系的Vue.js日历插件
vue-calendar-适用于Vue 2.1.5+的简单日历组件，支持自定义内容。 没有依赖关系。-Vue.js开发
05-27
calendar Chinese这是基于vue.js的日历组件。 支持自定义内容。 没有依赖关系。 当前，它仅支持月视图。 您的日历中文是基于vue.js的日历组件。 支持自定义内容。 没有依赖关系。 当前，它仅支持月视图。 您可以单击...
vue2-event-calendar-Vue2的事件日历，支持自定义事件项和日历标题。-Vue.js开发
05-27
Vue2日历组件基于Vue2和dayjs的完整日历。 支持月和周视图。 带scopeSlots的自定义日期项目样式。...calendar&#39;导入日历Vue.component（&#39;Calendar&#39;，Calendar）或作为组件导入&#39;vue2-event-calendar / dist / vue2-
基于Vue2-Calendar改进的日历组件（含中文使用说明）
10-17
本文将详细介绍一个基于Vue2-Calendar组件进行改进的日历组件，该组件在原版基础上进行了多项优化，以满足更多样化的使用需求。首先，让我们了解一下Vue2-Calendar的基础知识。 Vue2-Calendar是一款适用于Vue.js...
v-calendar：Vue的优雅日历和日期选择器插件
02-11
一个优雅的Vuejs日历和日期选择器插件。 npm i --save v-calendar 文献资料 有关完整文档，请访问 。 属性 强调 点 吧台 约夏克布丁 多页日历 主题颜色和深色模式 日期选择器 单一日期 多次约会 日期范围 带范围插槽的自定义日历
v-calendar-动画日历/日期选择器，显示简单和重复日期的区域，指示器和日期弹出框。-Vue.js开发
05-27
一个优雅的Vuejs日历和日期选择器插件。 npm i-保存v-calendar文档有关完整的文档，请访问vcalendar.io。 属性高一个Vuejs的优雅的日历和日期选择器插件。 npm i-保存v-calendar文档有关完整的文档，请访问vcalendar.io。 属性突出显示点条弹出框多重日历主题颜色和深色模式日期选择器单日期多个日期日期范围自定义日历（带范围内的广告位）
react-calendar:日历组件
05-26
日历 默认 &lt; Calendar xss=removed xss=removed&gt; setSelectDate ( date ) } onSelectDates = { dates =&gt; setSelectDates ( dates ) } selectDate = { selectDate } selectDates = { selectDates } ...
日历插件的使用
qq_21987433的博客
03-23 631
将碰到日历插件分享到这里：1.界面展示：2.日历插件资源地址   日历插件的地址在我的cadn资源库，地址为 https://download.csdn.net/download/qq_21987433/103043843.使用方法：&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html &amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta name=&quot;viewport...
【vue】 实现 自定义 Calendar 日历
weixin_50450473的博客
11-14 1972
{{ date.split('年')[0]+'-'+date.split('年')[1].replace('月','')}}
V-Calendar 在 Vue 3 中的使用指南
最新发布
gitblog_00445的博客
06-09 355
V-Calendar 在 Vue 3 中的使用指南 前言 V-Calendar 是一个功能强大的 Vue 日历组件库，提供了丰富的日期选择器和日历展示功能。随着 Vue 3 的普及，V-Calendar 也提供了对 Vue 3 的支持版本。本文将详细介绍如何在 Vue 3 项目中使用 V-Calendar，包括安装、配置和使用方法。 Vue 3 支持现状 目前 V-Calendar 的 Vue 3...
vue3使用v-calendar日历，选中当前日期
qq_55681529的博客
02-28 1831
首先看看效果，蓝色是自己标记的。
element的日历组件自定义日历头部应该如何使用
05-24
如果你想要使用 Element 的日历组件，自定义日历头部，可以通过使用 scoped slot 来实现。 首先，在 el-calendar 组件的标签上添加 scoped-slot 属性，值为 header，示例代码如下： ```html &lt;el-calendar v-model=&quot;date&quot; :first-day-of-week=&quot;1&quot; :scopedSlots=&quot;{ header: &#39;custom-header&#39; }&quot; &gt;&lt;/el-calendar&gt; ``` 然后，在 Vue 的模板中定义一个名为 custom-header 的 slot，来自定义日历头部的内容，示例代码如下： ```html &lt;template&gt; &lt;div class=&quot;custom-header&quot;&gt; &lt;span&gt;{{ year }}&lt;/span&gt; &lt;span&gt;/&lt;/span&gt; &lt;span&gt;{{ month }}&lt;/span&gt; &lt;/div&gt; &lt;/template&gt; &lt;script&gt; export default { props: { year: { type: Number, default: 2021 }, month: { type: Number, default: 1 } } } &lt;/script&gt; ``` 最后，在 Vue 的实例中，定义一个方法，用来渲染自定义的日历头部内容，示例代码如下： ```javascript methods: { customHeader({ year, month }) { return { year, month }; } } ``` 这样，你就可以自定义 Element 的日历组件的日历头部了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值