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

目录

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/121789.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

爱上C语言：操作符详解（上）

爱上C语言：操作符详解（上）

&#x1f680; 作者&#xff1a;阿辉不一般 &#x1f680; 你说呢&#xff1a;生活本来沉闷&#xff0c;但跑起来就有风 &#x1f680; 专栏&#xff1a;爱上C语言 &#x1f680;作图工具&#xff1a;draw.io(免费开源的作图网站) 如果觉得文章对你有帮助的话&#xff0c;还请…
阅读更多...
docker 构建并运行 python项目

docker 构建并运行 python项目

此处不重述docker安装及基本命令&#xff0c;可参考另一篇文章centos7 安装 docker_centos7 docker network rm-CSDN博客文章浏览阅读111次。1、 1.1 docker 官网 Empowering App Development for Developers | DockerLearn how Docker helps developers bring their ideas to …
阅读更多...
使用Drupal管理小型项目？试试Docker快速部署Drupal结合内网穿透实现远程访问

使用Drupal管理小型项目？试试Docker快速部署Drupal结合内网穿透实现远程访问

&#x1f3ac; 鸽芷咕&#xff1a;个人主页 &#x1f525;个人专栏:《Linux深造日志》《C干货基地》 ⛺️生活的理想&#xff0c;就是为了理想的生活! 文章目录 前言1. Docker安装Drupal2. 本地局域网访问3 . Linux 安装cpolar4. 配置Drupal公网访问地址5. 公网远程访问Drupal…
阅读更多...
简析电能管理系统在某煤矿的应用

简析电能管理系统在某煤矿的应用

叶根胜 安科瑞电气股份有限公司 上海嘉定 201801 摘要&#xff1a;针对传统的煤矿电能管理主要是由专人人工抄表&#xff0c;存在抄收数据繁琐&#xff0c;统计困难&#xff0c;煤矿用电分析等方面数据缺乏&#xff0c;电量峰谷比不合理等问题。某煤矿应用电能管理系统&#…
阅读更多...
【紫光同创国产FPGA教程】——【PGL22G第九章】HDMI环路实验例程

【紫光同创国产FPGA教程】——【PGL22G第九章】HDMI环路实验例程

本原创教程由深圳市小眼睛科技有限公司创作&#xff0c;版权归本公司所有&#xff0c;如需转载&#xff0c;需授权并注明出处 适用于板卡型号&#xff1a; 紫光同创PGL22G开发平台&#xff08;盘古22K&#xff09; 一&#xff1a;盘古22K开发板&#xff08;紫光同创PGL22G开…
阅读更多...
OpenSign 开源 PDF 电子签名解决方案

OpenSign 开源 PDF 电子签名解决方案

OpenSign 是一个开源文档电子签名解决方案&#xff0c;旨在为 DocuSign、PandaDoc、SignNow、Adobe Sign、Smartwaiver、SignRequest、HelloSign 和 Zoho Sign 等商业平台提供安全、可靠且免费的替代方案。 特性&#xff1a; 安全签名&#xff1a;利用最先进的加密算法来确保…
阅读更多...
Oracle RAC是啥？

Oracle RAC是啥？

Oracle RAC&#xff0c;全称是Oracle Real Application Cluster&#xff0c;翻译过来为Oracle真正的应用集群&#xff0c;它是Oracle提供的一个并行集群系统&#xff0c;由 Oracle Clusterware&#xff08;集群就绪软件&#xff09; 和 Real Application Cluster&#xff08;RA…
阅读更多...
1.docker linux离线环境安装 20.1.0.12

1.docker linux离线环境安装 20.1.0.12

目录 概述下载解压docker 卸载docker 安装检查安装环境常用命令结束 概述 docker离线环境安装 20.1.0.12 , centos 7.x 下载 安装包下载 解压 [roothadoop01 soft]# unzip docker_20_1_0_12.zip [roothadoop01 soft]# cd docker_20_1_0_12 [roothadoop01 docker_20_1_0_1…
阅读更多...
Linux 设置静态IP(Ubuntu 20.04/18.04)

Linux 设置静态IP(Ubuntu 20.04/18.04)

以Ubuntu20.04示例 第一步&#xff1a;查看当前网络信息 ifconfig 本机网卡名为&#xff1a;ens32&#xff0c;IP地址为&#xff1a;192.168.15.133&#xff0c;子网掩码为&#xff1a;255.255.255.0 第二步&#xff1a;查看当前网关信息 route -n 网关地址为&#xff1a;1…
阅读更多...
西周就已经开始用WIFI了？带你了解路由器的“前世今生”

西周就已经开始用WIFI了？带你了解路由器的“前世今生”

说起路由器&#xff0c;如果再往前10年&#xff0c;可能还不是那么普及&#xff0c;但如今再提及&#xff0c;基本上已经是家家户户必备的科技产品之一&#xff0c;无论是老人还是小孩对它也都很熟悉了&#xff0c;这样的变化不禁让人感叹科技的发展之快。 去年的三星堆文物又有…
阅读更多...
​​​​​​​​​​​​​​汽车网络信息安全分析方法论

​​​​​​​​​​​​​​汽车网络信息安全分析方法论

目录 1.典型信息安全分析方法 1.1 HEAVENS威胁分析模型 1.2 OCTAVE威胁分析方法 1.3 Attack Trees分析方法 2. 功能安全与信息安全的关系讨论 与Safety的典型分析方法一样&#xff0c;Security也有一些典型的信息安全威胁分析方法(TARA分析)&#xff0c;根据SAE J3061、I…
阅读更多...
51单片机+SIM800C(GSM模块)实现短信发送功能

51单片机+SIM800C(GSM模块)实现短信发送功能

一、前言 本项目利用51单片机和SIM800C GSM模块实现短信发送功能。短信作为一种广泛应用的通信方式&#xff0c;在许多领域具有重要的作用&#xff0c;如物联网、安防系统、远程监控等。通过将51单片机与SIM800C GSM模块相结合&#xff0c;可以实现在各种应用场景下的短信通信…
阅读更多...
【数据结构】排序算法复杂度 及 稳定性分析 【图文详解】

【数据结构】排序算法复杂度 及 稳定性分析 【图文详解】

排序算法总结 前言[ 一 ] 小数据基本排序算法&#xff08;1&#xff09;冒泡排序&#xff08;2&#xff09;直接插入排序 [ 二 ] &#xff08;由基本排序衍生的用作&#xff09;处理大数据处理排序&#xff08;1&#xff09;堆排序&#xff08;2&#xff09;希尔排序 [ 三 ] 大…
阅读更多...
μC/OS-II---内核：多任务与调度

μC/OS-II---内核：多任务与调度

目录 内核&#xff1a;多任务&#xff08;ucos_ii.h文件的函数&#xff09;Task创建Task创建&#xff08;扩展&#xff09;Task删除/请求删除Task改变Task优先级Task挂起和恢复Task信息获取Task调度器上锁和开锁 内核&#xff1a;调度&#xff08;oc_core.c文件的函数&#xff…
阅读更多...
后端面试问题（学习版）

后端面试问题（学习版）

JAVA相关 JAVA语言概述 1. 一个".java"源文件中是否可以包含多个类&#xff1f;有什么限制&#xff1f; 可以。 一个源文件可以声明多个类&#xff0c;但是最多只能有一个类使用public进行声明 且要求声明public的类的类名与源文件相同。 2. Java的优势&#xff…
阅读更多...
链表经典面试题之一讲

链表经典面试题之一讲

什么是链表&#xff1f; 链表是一种物理存储结构上非连续、非顺序的存储结构&#xff0c;数据元素的逻辑顺序是通过链表中的指针链接次序实现的 。 今天给大家分享一道经典的单链表面试题 力扣题目——反转链表https://leetcode.cn/problems/reverse-linked-list/ 只给了头…
阅读更多...
第三阶段第一章——PySpark实战

第三阶段第一章——PySpark实战

学习了这么多python的知识&#xff0c;是时候来搞点真玩意儿了~~ 春风得意马蹄疾&#xff0c;一日看尽长安花 o(*&#xffe3;︶&#xffe3;*)o 1.前言介绍 &#xff08;1&#xff09;什么是spark Apache Spark是一个开源的分布式计算框架&#xff0c;用于处理大规模数据集的…
阅读更多...
从哪些方面做好电商系统的网站建设？

从哪些方面做好电商系统的网站建设？

电子商务的迅猛发展&#xff0c;建设一款成功的电商系统网站成为企业取得竞争优势的重要一环。下面将从用户体验、网站设计、安全性和性能优化等方面&#xff0c;介绍如何打造一款优秀的电商系统网站。 一、用户体验 一款成功的电商系统网站必须注重用户体验&#xff0c;确保用…
阅读更多...
康耐视深度学习ViDi-ViDi四大工具之一蓝色定位工具/Locate

康耐视深度学习ViDi-ViDi四大工具之一蓝色定位工具/Locate

目录 工具介绍使用步骤说明调整工具ROI添加特征标签生成定位姿态训练并审核模型编辑器参数说明蓝色定位工具/Locate工具 工具介绍 蓝色定位工具用于识别和定位图像中的特定特征或特征组。该工具的输出可用于为其他ViDi 工具提供位置数据。使用该工具时，您提供图像训练集，然后…
阅读更多...
MySQL中的datetime和timestamp有什么区别

MySQL中的datetime和timestamp有什么区别

相同点: 存储格式相同 datetime和timestamp两者的时间格式都是YYYY-MM-DD HH:MM:SS 不同点: 存储范围不同. datetime的范围是1000-01-01到9999-12-31. 而timestamp是从1970-01-01到2038-01-19, 即后者的时间范围很小. 与时区关系. datetime是存储服务器当前的时区. 而timesta…
阅读更多...
最新文章

Copyright @ 2022~2023