devbox
盐析白兔
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：盐析白兔 | 2024-04-30 12:17:12

赞

踩

v-calendar

目录

0.介绍

1.安装v-calendar

2.页面使用

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

0.介绍

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

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

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

1.安装v-calendar

npm i --save v-calendar

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

直接全局引入

  1. import VCalendar from 'v-calendar'; // 引入日历插件
  2.  
  3. Vue.use(VCalendar, {
  4.   componentPrefix: 'vc'
  5. }); // 组件前缀，以防后期跟其他冲突

2.页面使用

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

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

数据结构如下 

  1. attrs: [
  2.         {
  3.           key: 'v0Day',
  4.           dates: new Date(),
  5.           highlight: true,
  6.           dot: true,
  7.           popover: {
  8.             label: '美好的一天！要开心呦！'
  9.           }
  10.         },
  11.         {
  12.           key: 'V1Day',
  13.           customData: '10',
  14.           dot: {
  15.             style: {
  16.               backgroundColor: 'red'
  17.             }
  18.           },
  19.           dates: new Date(2023, 10, 18),
  20.           popover: {
  21.             label: '美好的一天！要开心呦！'
  22.           }
  23.         },
  24.         {
  25.           key: 'V2Day',
  26.           customData: '9',
  27.           dates: new Date(2023, 10, 6)
  28.         }
  29.       ],

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

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

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

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

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

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

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

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

  1. {
  2.   "id": "2023-11-18",
  3.   "label": "18",
  4.   "ariaLabel": "2023年11月18日星期六",
  5.   "day": 18,
  6.   "dayFromEnd": 13,
  7.   "weekday": 7,
  8.   "weekdayPosition": 6,
  9.   "weekdayPositionFromEnd": 1,
  10.   "weekdayOrdinal": 3,
  11.   "weekdayOrdinalFromEnd": 2,
  12.   "week": 3,
  13.   "weekFromEnd": 3,
  14.   "weeknumber": 47,
  15.   "isoWeeknumber": 46,
  16.   "month": 11,
  17.   "year": 2023,
  18.   "date": "2023-11-17T16:00:00.000Z",
  19.   "range": {
  20.     "start": "2023-11-17T16:00:00.000Z",
  21.     "end": "2023-11-18T15:59:59.999Z"
  22.   },
  23.   "isToday": false,
  24.   "isFirstDay": false,
  25.   "isLastDay": false,
  26.   "inMonth": true,
  27.   "inPrevMonth": false,
  28.   "inNextMonth": false,
  29.   "onTop": false,
  30.   "onBottom": false,
  31.   "onLeft": false,
  32.   "onRight": false,
  33.   "classes": [
  34.     "id-2023-11-18",
  35.     "day-18",
  36.     "day-from-end-13",
  37.     "weekday-7",
  38.     "weekday-position-6",
  39.     "weekday-ordinal-3",
  40.     "weekday-ordinal-from-end-2",
  41.     "week-3",
  42.     "week-from-end-3",
  43.     {
  44.       "is-today": false,
  45.       "is-first-day": false,
  46.       "is-last-day": false,
  47.       "in-month": true,
  48.       "in-prev-month": false,
  49.       "in-next-month": false,
  50.       "on-top": false,
  51.       "on-bottom": false,
  52.       "on-left": false,
  53.       "on-right": false
  54.     }
  55.   ],
  56.   "isDisabled": false,
  57.   "isFocusable": false,
  58.   "refresh": false,
  59.   "attributesMap": {
  60.     "V1Day": {
  61.       "key": "V1Day",
  62.       "hashcode": 83582020,
  63.       "customData": "10",
  64.       "order": 0,
  65.       "dateOpts": {
  66.         "order": 0,
  67.         "locale": {
  68.           "id": "zh-CN",
  69.           "daysInWeek": 7,
  70.           "firstDayOfWeek": 2,
  71.           "masks": {
  72.             "L": "YYYY/MM/DD",
  73.             "title": "MMMM YYYY",
  74.             "weekdays": "W",
  75.             "navMonths": "MMM",
  76.             "input": [
  77.               "L",
  78.               "YYYY-MM-DD",
  79.               "YYYY/MM/DD"
  80.             ],
  81.             "inputDateTime": [
  82.               "L h:mm A",
  83.               "YYYY-MM-DD h:mm A",
  84.               "YYYY/MM/DD h:mm A"
  85.             ],
  86.             "inputDateTime24hr": [
  87.               "L HH:mm",
  88.               "YYYY-MM-DD HH:mm",
  89.               "YYYY/MM/DD HH:mm"
  90.             ],
  91.             "inputTime": [
  92.               "h:mm A"
  93.             ],
  94.             "inputTime24hr": [
  95.               "HH:mm"
  96.             ],
  97.             "dayPopover": "WWW, MMM D, YYYY",
  98.             "data": [
  99.               "L",
  100.               "YYYY-MM-DD",
  101.               "YYYY/MM/DD"
  102.             ],
  103.             "iso": "YYYY-MM-DDTHH:mm:ss.SSSZ"
  104.           },
  105.           "dayNames": [
  106.             "星期日",
  107.             "星期一",
  108.             "星期二",
  109.             "星期三",
  110.             "星期四",
  111.             "星期五",
  112.             "星期六"
  113.           ],
  114.           "dayNamesShort": [
  115.             "周日",
  116.             "周一",
  117.             "周二",
  118.             "周三",
  119.             "周四",
  120.             "周五",
  121.             "周六"
  122.           ],
  123.           "dayNamesShorter": [
  124.             "周日",
  125.             "周一",
  126.             "周二",
  127.             "周三",
  128.             "周四",
  129.             "周五",
  130.             "周六"
  131.           ],
  132.           "dayNamesNarrow": [
  133.             "日",
  134.             "一",
  135.             "二",
  136.             "三",
  137.             "四",
  138.             "五",
  139.             "六"
  140.           ],
  141.           "monthNames": [
  142.             "一月",
  143.             "二月",
  144.             "三月",
  145.             "四月",
  146.             "五月",
  147.             "六月",
  148.             "七月",
  149.             "八月",
  150.             "九月",
  151.             "十月",
  152.             "十一月",
  153.             "十二月"
  154.           ],
  155.           "monthNamesShort": [
  156.             "1月",
  157.             "2月",
  158.             "3月",
  159.             "4月",
  160.             "5月",
  161.             "6月",
  162.             "7月",
  163.             "8月",
  164.             "9月",
  165.             "10月",
  166.             "11月",
  167.             "12月"
  168.           ],
  169.           "amPm": [
  170.             "am",
  171.             "pm"
  172.           ],
  173.           "monthData": {
  174.             "11-2023": {
  175.               "firstDayOfWeek": 2,
  176.               "inLeapYear": false,
  177.               "firstWeekday": 4,
  178.               "days": 30,
  179.               "weeks": 5,
  180.               "month": 11,
  181.               "year": 2023,
  182.               "weeknumbers": [
  183.                 45,
  184.                 46,
  185.                 47,
  186.                 48,
  187.                 49
  188.               ],
  189.               "isoWeeknumbers": [
  190.                 44,
  191.                 45,
  192.                 46,
  193.                 47,
  194.                 48
  195.               ]
  196.             },
  197.             "10-2023": {
  198.               "firstDayOfWeek": 2,
  199.               "inLeapYear": false,
  200.               "firstWeekday": 1,
  201.               "days": 31,
  202.               "weeks": 6,
  203.               "month": 10,
  204.               "year": 2023,
  205.               "weeknumbers": [
  206.                 40,
  207.                 41,
  208.                 42,
  209.                 43,
  210.                 44,
  211.                 45
  212.               ],
  213.               "isoWeeknumbers": [
  214.                 39,
  215.                 40,
  216.                 41,
  217.                 42,
  218.                 43,
  219.                 44
  220.               ]
  221.             },
  222.             "12-2023": {
  223.               "firstDayOfWeek": 2,
  224.               "inLeapYear": false,
  225.               "firstWeekday": 6,
  226.               "days": 31,
  227.               "weeks": 5,
  228.               "month": 12,
  229.               "year": 2023,
  230.               "weeknumbers": [
  231.                 49,
  232.                 50,
  233.                 51,
  234.                 52,
  235.                 53
  236.               ],
  237.               "isoWeeknumbers": [
  238.                 48,
  239.                 49,
  240.                 50,
  241.                 51,
  242.                 52
  243.               ]
  244.             },
  245.             "1-2020": {
  246.               "firstDayOfWeek": 2,
  247.               "inLeapYear": true,
  248.               "firstWeekday": 4,
  249.               "days": 31,
  250.               "weeks": 5,
  251.               "month": 1,
  252.               "year": 2020,
  253.               "weeknumbers": [
  254.                 1,
  255.                 2,
  256.                 3,
  257.                 4,
  258.                 5
  259.               ],
  260.               "isoWeeknumbers": [
  261.                 1,
  262.                 2,
  263.                 3,
  264.                 4,
  265.                 5
  266.               ]
  267.             }
  268.           }
  269.         }
  270.       },
  271.       "popover": {
  272.         "label": "美好的一天！要开心呦！"
  273.       },
  274.       "dates": [
  275.         {
  276.           "isDateInfo": true,
  277.           "order": 0,
  278.           "locale": {
  279.             "id": "zh-CN",
  280.             "daysInWeek": 7,
  281.             "firstDayOfWeek": 2,
  282.             "masks": {
  283.               "L": "YYYY/MM/DD",
  284.               "title": "MMMM YYYY",
  285.               "weekdays": "W",
  286.               "navMonths": "MMM",
  287.               "input": [
  288.                 "L",
  289.                 "YYYY-MM-DD",
  290.                 "YYYY/MM/DD"
  291.               ],
  292.               "inputDateTime": [
  293.                 "L h:mm A",
  294.                 "YYYY-MM-DD h:mm A",
  295.                 "YYYY/MM/DD h:mm A"
  296.               ],
  297.               "inputDateTime24hr": [
  298.                 "L HH:mm",
  299.                 "YYYY-MM-DD HH:mm",
  300.                 "YYYY/MM/DD HH:mm"
  301.               ],
  302.               "inputTime": [
  303.                 "h:mm A"
  304.               ],
  305.               "inputTime24hr": [
  306.                 "HH:mm"
  307.               ],
  308.               "dayPopover": "WWW, MMM D, YYYY",
  309.               "data": [
  310.                 "L",
  311.                 "YYYY-MM-DD",
  312.                 "YYYY/MM/DD"
  313.               ],
  314.               "iso": "YYYY-MM-DDTHH:mm:ss.SSSZ"
  315.             },
  316.             "dayNames": [
  317.               "星期日",
  318.               "星期一",
  319.               "星期二",
  320.               "星期三",
  321.               "星期四",
  322.               "星期五",
  323.               "星期六"
  324.             ],
  325.             "dayNamesShort": [
  326.               "周日",
  327.               "周一",
  328.               "周二",
  329.               "周三",
  330.               "周四",
  331.               "周五",
  332.               "周六"
  333.             ],
  334.             "dayNamesShorter": [
  335.               "周日",
  336.               "周一",
  337.               "周二",
  338.               "周三",
  339.               "周四",
  340.               "周五",
  341.               "周六"
  342.             ],
  343.             "dayNamesNarrow": [
  344.               "日",
  345.               "一",
  346.               "二",
  347.               "三",
  348.               "四",
  349.               "五",
  350.               "六"
  351.             ],
  352.             "monthNames": [
  353.               "一月",
  354.               "二月",
  355.               "三月",
  356.               "四月",
  357.               "五月",
  358.               "六月",
  359.               "七月",
  360.               "八月",
  361.               "九月",
  362.               "十月",
  363.               "十一月",
  364.               "十二月"
  365.             ],
  366.             "monthNamesShort": [
  367.               "1月",
  368.               "2月",
  369.               "3月",
  370.               "4月",
  371.               "5月",
  372.               "6月",
  373.               "7月",
  374.               "8月",
  375.               "9月",
  376.               "10月",
  377.               "11月",
  378.               "12月"
  379.             ],
  380.             "amPm": [
  381.               "am",
  382.               "pm"
  383.             ],
  384.             "monthData": {
  385.               "11-2023": {
  386.                 "firstDayOfWeek": 2,
  387.                 "inLeapYear": false,
  388.                 "firstWeekday": 4,
  389.                 "days": 30,
  390.                 "weeks": 5,
  391.                 "month": 11,
  392.                 "year": 2023,
  393.                 "weeknumbers": [
  394.                   45,
  395.                   46,
  396.                   47,
  397.                   48,
  398.                   49
  399.                 ],
  400.                 "isoWeeknumbers": [
  401.                   44,
  402.                   45,
  403.                   46,
  404.                   47,
  405.                   48
  406.                 ]
  407.               },
  408.               "10-2023": {
  409.                 "firstDayOfWeek": 2,
  410.                 "inLeapYear": false,
  411.                 "firstWeekday": 1,
  412.                 "days": 31,
  413.                 "weeks": 6,
  414.                 "month": 10,
  415.                 "year": 2023,
  416.                 "weeknumbers": [
  417.                   40,
  418.                   41,
  419.                   42,
  420.                   43,
  421.                   44,
  422.                   45
  423.                 ],
  424.                 "isoWeeknumbers": [
  425.                   39,
  426.                   40,
  427.                   41,
  428.                   42,
  429.                   43,
  430.                   44
  431.                 ]
  432.               },
  433.               "12-2023": {
  434.                 "firstDayOfWeek": 2,
  435.                 "inLeapYear": false,
  436.                 "firstWeekday": 6,
  437.                 "days": 31,
  438.                 "weeks": 5,
  439.                 "month": 12,
  440.                 "year": 2023,
  441.                 "weeknumbers": [
  442.                   49,
  443.                   50,
  444.                   51,
  445.                   52,
  446.                   53
  447.                 ],
  448.                 "isoWeeknumbers": [
  449.                   48,
  450.                   49,
  451.                   50,
  452.                   51,
  453.                   52
  454.                 ]
  455.               },
  456.               "1-2020": {
  457.                 "firstDayOfWeek": 2,
  458.                 "inLeapYear": true,
  459.                 "firstWeekday": 4,
  460.                 "days": 31,
  461.                 "weeks": 5,
  462.                 "month": 1,
  463.                 "year": 2020,
  464.                 "weeknumbers": [
  465.                   1,
  466.                   2,
  467.                   3,
  468.                   4,
  469.                   5
  470.                 ],
  471.                 "isoWeeknumbers": [
  472.                   1,
  473.                   2,
  474.                   3,
  475.                   4,
  476.                   5
  477.                 ]
  478.               }
  479.             }
  480.           },
  481.           "firstDayOfWeek": 2,
  482.           "start": "2023-11-17T16:00:00.000Z",
  483.           "startTime": 1700236800000,
  484.           "end": "2023-11-17T16:00:00.000Z",
  485.           "endTime": 1700236800000,
  486.           "isDate": true,
  487.           "isRange": false,
  488.           "isComplex": false
  489.         }
  490.       ],
  491.       "hasDates": true,
  492.       "excludeDates": [],
  493.       "hasExcludeDates": false,
  494.       "excludeMode": "intersects",
  495.       "isComplex": false,
  496.       "targetDate": {
  497.         "isDateInfo": true,
  498.         "order": 0,
  499.         "locale": {
  500.           "id": "zh-CN",
  501.           "daysInWeek": 7,
  502.           "firstDayOfWeek": 2,
  503.           "masks": {
  504.             "L": "YYYY/MM/DD",
  505.             "title": "MMMM YYYY",
  506.             "weekdays": "W",
  507.             "navMonths": "MMM",
  508.             "input": [
  509.               "L",
  510.               "YYYY-MM-DD",
  511.               "YYYY/MM/DD"
  512.             ],
  513.             "inputDateTime": [
  514.               "L h:mm A",
  515.               "YYYY-MM-DD h:mm A",
  516.               "YYYY/MM/DD h:mm A"
  517.             ],
  518.             "inputDateTime24hr": [
  519.               "L HH:mm",
  520.               "YYYY-MM-DD HH:mm",
  521.               "YYYY/MM/DD HH:mm"
  522.             ],
  523.             "inputTime": [
  524.               "h:mm A"
  525.             ],
  526.             "inputTime24hr": [
  527.               "HH:mm"
  528.             ],
  529.             "dayPopover": "WWW, MMM D, YYYY",
  530.             "data": [
  531.               "L",
  532.               "YYYY-MM-DD",
  533.               "YYYY/MM/DD"
  534.             ],
  535.             "iso": "YYYY-MM-DDTHH:mm:ss.SSSZ"
  536.           },
  537.           "dayNames": [
  538.             "星期日",
  539.             "星期一",
  540.             "星期二",
  541.             "星期三",
  542.             "星期四",
  543.             "星期五",
  544.             "星期六"
  545.           ],
  546.           "dayNamesShort": [
  547.             "周日",
  548.             "周一",
  549.             "周二",
  550.             "周三",
  551.             "周四",
  552.             "周五",
  553.             "周六"
  554.           ],
  555.           "dayNamesShorter": [
  556.             "周日",
  557.             "周一",
  558.             "周二",
  559.             "周三",
  560.             "周四",
  561.             "周五",
  562.             "周六"
  563.           ],
  564.           "dayNamesNarrow": [
  565.             "日",
  566.             "一",
  567.             "二",
  568.             "三",
  569.             "四",
  570.             "五",
  571.             "六"
  572.           ],
  573.           "monthNames": [
  574.             "一月",
  575.             "二月",
  576.             "三月",
  577.             "四月",
  578.             "五月",
  579.             "六月",
  580.             "七月",
  581.             "八月",
  582.             "九月",
  583.             "十月",
  584.             "十一月",
  585.             "十二月"
  586.           ],
  587.           "monthNamesShort": [
  588.             "1月",
  589.             "2月",
  590.             "3月",
  591.             "4月",
  592.             "5月",
  593.             "6月",
  594.             "7月",
  595.             "8月",
  596.             "9月",
  597.             "10月",
  598.             "11月",
  599.             "12月"
  600.           ],
  601.           "amPm": [
  602.             "am",
  603.             "pm"
  604.           ],
  605.           "monthData": {
  606.             "11-2023": {
  607.               "firstDayOfWeek": 2,
  608.               "inLeapYear": false,
  609.               "firstWeekday": 4,
  610.               "days": 30,
  611.               "weeks": 5,
  612.               "month": 11,
  613.               "year": 2023,
  614.               "weeknumbers": [
  615.                 45,
  616.                 46,
  617.                 47,
  618.                 48,
  619.                 49
  620.               ],
  621.               "isoWeeknumbers": [
  622.                 44,
  623.                 45,
  624.                 46,
  625.                 47,
  626.                 48
  627.               ]
  628.             },
  629.             "10-2023": {
  630.               "firstDayOfWeek": 2,
  631.               "inLeapYear": false,
  632.               "firstWeekday": 1,
  633.               "days": 31,
  634.               "weeks": 6,
  635.               "month": 10,
  636.               "year": 2023,
  637.               "weeknumbers": [
  638.                 40,
  639.                 41,
  640.                 42,
  641.                 43,
  642.                 44,
  643.                 45
  644.               ],
  645.               "isoWeeknumbers": [
  646.                 39,
  647.                 40,
  648.                 41,
  649.                 42,
  650.                 43,
  651.                 44
  652.               ]
  653.             },
  654.             "12-2023": {
  655.               "firstDayOfWeek": 2,
  656.               "inLeapYear": false,
  657.               "firstWeekday": 6,
  658.               "days": 31,
  659.               "weeks": 5,
  660.               "month": 12,
  661.               "year": 2023,
  662.               "weeknumbers": [
  663.                 49,
  664.                 50,
  665.                 51,
  666.                 52,
  667.                 53
  668.               ],
  669.               "isoWeeknumbers": [
  670.                 48,
  671.                 49,
  672.                 50,
  673.                 51,
  674.                 52
  675.               ]
  676.             },
  677.             "1-2020": {
  678.               "firstDayOfWeek": 2,
  679.               "inLeapYear": true,
  680.               "firstWeekday": 4,
  681.               "days": 31,
  682.               "weeks": 5,
  683.               "month": 1,
  684.               "year": 2020,
  685.               "weeknumbers": [
  686.                 1,
  687.                 2,
  688.                 3,
  689.                 4,
  690.                 5
  691.               ],
  692.               "isoWeeknumbers": [
  693.                 1,
  694.                 2,
  695.                 3,
  696.                 4,
  697.                 5
  698.               ]
  699.             }
  700.           }
  701.         },
  702.         "firstDayOfWeek": 2,
  703.         "start": "2023-11-17T16:00:00.000Z",
  704.         "startTime": 1700236800000,
  705.         "end": "2023-11-17T16:00:00.000Z",
  706.         "endTime": 1700236800000,
  707.         "isDate": true,
  708.         "isRange": false,
  709.         "isComplex": false
  710.       }
  711.     }
  712.   },
  713.   "attributes": [
  714.     {
  715.       "key": "V1Day",
  716.       "hashcode": 83582020,
  717.       "customData": "10",
  718.       "order": 0,
  719.       "dateOpts": {
  720.         "order": 0,
  721.         "locale": {
  722.           "id": "zh-CN",
  723.           "daysInWeek": 7,
  724.           "firstDayOfWeek": 2,
  725.           "masks": {
  726.             "L": "YYYY/MM/DD",
  727.             "title": "MMMM YYYY",
  728.             "weekdays": "W",
  729.             "navMonths": "MMM",
  730.             "input": [
  731.               "L",
  732.               "YYYY-MM-DD",
  733.               "YYYY/MM/DD"
  734.             ],
  735.             "inputDateTime": [
  736.               "L h:mm A",
  737.               "YYYY-MM-DD h:mm A",
  738.               "YYYY/MM/DD h:mm A"
  739.             ],
  740.             "inputDateTime24hr": [
  741.               "L HH:mm",
  742.               "YYYY-MM-DD HH:mm",
  743.               "YYYY/MM/DD HH:mm"
  744.             ],
  745.             "inputTime": [
  746.               "h:mm A"
  747.             ],
  748.             "inputTime24hr": [
  749.               "HH:mm"
  750.             ],
  751.             "dayPopover": "WWW, MMM D, YYYY",
  752.             "data": [
  753.               "L",
  754.               "YYYY-MM-DD",
  755.               "YYYY/MM/DD"
  756.             ],
  757.             "iso": "YYYY-MM-DDTHH:mm:ss.SSSZ"
  758.           },
  759.           "dayNames": [
  760.             "星期日",
  761.             "星期一",
  762.             "星期二",
  763.             "星期三",
  764.             "星期四",
  765.             "星期五",
  766.             "星期六"
  767.           ],
  768.           "dayNamesShort": [
  769.             "周日",
  770.             "周一",
  771.             "周二",
  772.             "周三",
  773.             "周四",
  774.             "周五",
  775.             "周六"
  776.           ],
  777.           "dayNamesShorter": [
  778.             "周日",
  779.             "周一",
  780.             "周二",
  781.             "周三",
  782.             "周四",
  783.             "周五",
  784.             "周六"
  785.           ],
  786.           "dayNamesNarrow": [
  787.             "日",
  788.             "一",
  789.             "二",
  790.             "三",
  791.             "四",
  792.             "五",
  793.             "六"
  794.           ],
  795.           "monthNames": [
  796.             "一月",
  797.             "二月",
  798.             "三月",
  799.             "四月",
  800.             "五月",
  801.             "六月",
  802.             "七月",
  803.             "八月",
  804.             "九月",
  805.             "十月",
  806.             "十一月",
  807.             "十二月"
  808.           ],
  809.           "monthNamesShort": [
  810.             "1月",
  811.             "2月",
  812.             "3月",
  813.             "4月",
  814.             "5月",
  815.             "6月",
  816.             "7月",
  817.             "8月",
  818.             "9月",
  819.             "10月",
  820.             "11月",
  821.             "12月"
  822.           ],
  823.           "amPm": [
  824.             "am",
  825.             "pm"
  826.           ],
  827.           "monthData": {
  828.             "11-2023": {
  829.               "firstDayOfWeek": 2,
  830.               "inLeapYear": false,
  831.               "firstWeekday": 4,
  832.               "days": 30,
  833.               "weeks": 5,
  834.               "month": 11,
  835.               "year": 2023,
  836.               "weeknumbers": [
  837.                 45,
  838.                 46,
  839.                 47,
  840.                 48,
  841.                 49
  842.               ],
  843.               "isoWeeknumbers": [
  844.                 44,
  845.                 45,
  846.                 46,
  847.                 47,
  848.                 48
  849.               ]
  850.             },
  851.             "10-2023": {
  852.               "firstDayOfWeek": 2,
  853.               "inLeapYear": false,
  854.               "firstWeekday": 1,
  855.               "days": 31,
  856.               "weeks": 6,
  857.               "month": 10,
  858.               "year": 2023,
  859.               "weeknumbers": [
  860.                 40,
  861.                 41,
  862.                 42,
  863.                 43,
  864.                 44,
  865.                 45
  866.               ],
  867.               "isoWeeknumbers": [
  868.                 39,
  869.                 40,
  870.                 41,
  871.                 42,
  872.                 43,
  873.                 44
  874.               ]
  875.             },
  876.             "12-2023": {
  877.               "firstDayOfWeek": 2,
  878.               "inLeapYear": false,
  879.               "firstWeekday": 6,
  880.               "days": 31,
  881.               "weeks": 5,
  882.               "month": 12,
  883.               "year": 2023,
  884.               "weeknumbers": [
  885.                 49,
  886.                 50,
  887.                 51,
  888.                 52,
  889.                 53
  890.               ],
  891.               "isoWeeknumbers": [
  892.                 48,
  893.                 49,
  894.                 50,
  895.                 51,
  896.                 52
  897.               ]
  898.             },
  899.             "1-2020": {
  900.               "firstDayOfWeek": 2,
  901.               "inLeapYear": true,
  902.               "firstWeekday": 4,
  903.               "days": 31,
  904.               "weeks": 5,
  905.               "month": 1,
  906.               "year": 2020,
  907.               "weeknumbers": [
  908.                 1,
  909.                 2,
  910.                 3,
  911.                 4,
  912.                 5
  913.               ],
  914.               "isoWeeknumbers": [
  915.                 1,
  916.                 2,
  917.                 3,
  918.                 4,
  919.                 5
  920.               ]
  921.             }
  922.           }
  923.         }
  924.       },
  925.       "popover": {
  926.         "label": "美好的一天！要开心呦！"
  927.       },
  928.       "dates": [
  929.         {
  930.           "isDateInfo": true,
  931.           "order": 0,
  932.           "locale": {
  933.             "id": "zh-CN",
  934.             "daysInWeek": 7,
  935.             "firstDayOfWeek": 2,
  936.             "masks": {
  937.               "L": "YYYY/MM/DD",
  938.               "title": "MMMM YYYY",
  939.               "weekdays": "W",
  940.               "navMonths": "MMM",
  941.               "input": [
  942.                 "L",
  943.                 "YYYY-MM-DD",
  944.                 "YYYY/MM/DD"
  945.               ],
  946.               "inputDateTime": [
  947.                 "L h:mm A",
  948.                 "YYYY-MM-DD h:mm A",
  949.                 "YYYY/MM/DD h:mm A"
  950.               ],
  951.               "inputDateTime24hr": [
  952.                 "L HH:mm",
  953.                 "YYYY-MM-DD HH:mm",
  954.                 "YYYY/MM/DD HH:mm"
  955.               ],
  956.               "inputTime": [
  957.                 "h:mm A"
  958.               ],
  959.               "inputTime24hr": [
  960.                 "HH:mm"
  961.               ],
  962.               "dayPopover": "WWW, MMM D, YYYY",
  963.               "data": [
  964.                 "L",
  965.                 "YYYY-MM-DD",
  966.                 "YYYY/MM/DD"
  967.               ],
  968.               "iso": "YYYY-MM-DDTHH:mm:ss.SSSZ"
  969.             },
  970.             "dayNames": [
  971.               "星期日",
  972.               "星期一",
  973.               "星期二",
  974.               "星期三",
  975.               "星期四",
  976.               "星期五",
  977.               "星期六"
  978.             ],
  979.             "dayNamesShort": [
  980.               "周日",
  981.               "周一",
  982.               "周二",
  983.               "周三",
  984.               "周四",
  985.               "周五",
  986.               "周六"
  987.             ],
  988.             "dayNamesShorter": [
  989.               "周日",
  990.               "周一",
  991.               "周二",
  992.               "周三",
  993.               "周四",
  994.               "周五",
  995.               "周六"
  996.             ],
  997.             "dayNamesNarrow": [
  998.               "日",
  999.               "一",
  1000.               "二",
  1001.               "三",
  1002.               "四",
  1003.               "五",
  1004.               "六"
  1005.             ],
  1006.             "monthNames": [
  1007.               "一月",
  1008.               "二月",
  1009.               "三月",
  1010.               "四月",
  1011.               "五月",
  1012.               "六月",
  1013.               "七月",
  1014.               "八月",
  1015.               "九月",
  1016.               "十月",
  1017.               "十一月",
  1018.               "十二月"
  1019.             ],
  1020.             "monthNamesShort": [
  1021.               "1月",
  1022.               "2月",
  1023.               "3月",
  1024.               "4月",
  1025.               "5月",
  1026.               "6月",
  1027.               "7月",
  1028.               "8月",
  1029.               "9月",
  1030.               "10月",
  1031.               "11月",
  1032.               "12月"
  1033.             ],
  1034.             "amPm": [
  1035.               "am",
  1036.               "pm"
  1037.             ],
  1038.             "monthData": {
  1039.               "11-2023": {
  1040.                 "firstDayOfWeek": 2,
  1041.                 "inLeapYear": false,
  1042.                 "firstWeekday": 4,
  1043.                 "days": 30,
  1044.                 "weeks": 5,
  1045.                 "month": 11,
  1046.                 "year": 2023,
  1047.                 "weeknumbers": [
  1048.                   45,
  1049.                   46,
  1050.                   47,
  1051.                   48,
  1052.                   49
  1053.                 ],
  1054.                 "isoWeeknumbers": [
  1055.                   44,
  1056.                   45,
  1057.                   46,
  1058.                   47,
  1059.                   48
  1060.                 ]
  1061.               },
  1062.               "10-2023": {
  1063.                 "firstDayOfWeek": 2,
  1064.                 "inLeapYear": false,
  1065.                 "firstWeekday": 1,
  1066.                 "days": 31,
  1067.                 "weeks": 6,
  1068.                 "month": 10,
  1069.                 "year": 2023,
  1070.                 "weeknumbers": [
  1071.                   40,
  1072.                   41,
  1073.                   42,
  1074.                   43,
  1075.                   44,
  1076.                   45
  1077.                 ],
  1078.                 "isoWeeknumbers": [
  1079.                   39,
  1080.                   40,
  1081.                   41,
  1082.                   42,
  1083.                   43,
  1084.                   44
  1085.                 ]
  1086.               },
  1087.               "12-2023": {
  1088.                 "firstDayOfWeek": 2,
  1089.                 "inLeapYear": false,
  1090.                 "firstWeekday": 6,
  1091.                 "days": 31,
  1092.                 "weeks": 5,
  1093.                 "month": 12,
  1094.                 "year": 2023,
  1095.                 "weeknumbers": [
  1096.                   49,
  1097.                   50,
  1098.                   51,
  1099.                   52,
  1100.                   53
  1101.                 ],
  1102.                 "isoWeeknumbers": [
  1103.                   48,
  1104.                   49,
  1105.                   50,
  1106.                   51,
  1107.                   52
  1108.                 ]
  1109.               },
  1110.               "1-2020": {
  1111.                 "firstDayOfWeek": 2,
  1112.                 "inLeapYear": true,
  1113.                 "firstWeekday": 4,
  1114.                 "days": 31,
  1115.                 "weeks": 5,
  1116.                 "month": 1,
  1117.                 "year": 2020,
  1118.                 "weeknumbers": [
  1119.                   1,
  1120.                   2,
  1121.                   3,
  1122.                   4,
  1123.                   5
  1124.                 ],
  1125.                 "isoWeeknumbers": [
  1126.                   1,
  1127.                   2,
  1128.                   3,
  1129.                   4,
  1130.                   5
  1131.                 ]
  1132.               }
  1133.             }
  1134.           },
  1135.           "firstDayOfWeek": 2,
  1136.           "start": "2023-11-17T16:00:00.000Z",
  1137.           "startTime": 1700236800000,
  1138.           "end": "2023-11-17T16:00:00.000Z",
  1139.           "endTime": 1700236800000,
  1140.           "isDate": true,
  1141.           "isRange": false,
  1142.           "isComplex": false
  1143.         }
  1144.       ],
  1145.       "hasDates": true,
  1146.       "excludeDates": [],
  1147.       "hasExcludeDates": false,
  1148.       "excludeMode": "intersects",
  1149.       "isComplex": false,
  1150.       "targetDate": {
  1151.         "isDateInfo": true,
  1152.         "order": 0,
  1153.         "locale": {
  1154.           "id": "zh-CN",
  1155.           "daysInWeek": 7,
  1156.           "firstDayOfWeek": 2,
  1157.           "masks": {
  1158.             "L": "YYYY/MM/DD",
  1159.             "title": "MMMM YYYY",
  1160.             "weekdays": "W",
  1161.             "navMonths": "MMM",
  1162.             "input": [
  1163.               "L",
  1164.               "YYYY-MM-DD",
  1165.               "YYYY/MM/DD"
  1166.             ],
  1167.             "inputDateTime": [
  1168.               "L h:mm A",
  1169.               "YYYY-MM-DD h:mm A",
  1170.               "YYYY/MM/DD h:mm A"
  1171.             ],
  1172.             "inputDateTime24hr": [
  1173.               "L HH:mm",
  1174.               "YYYY-MM-DD HH:mm",
  1175.               "YYYY/MM/DD HH:mm"
  1176.             ],
  1177.             "inputTime": [
  1178.               "h:mm A"
  1179.             ],
  1180.             "inputTime24hr": [
  1181.               "HH:mm"
  1182.             ],
  1183.             "dayPopover": "WWW, MMM D, YYYY",
  1184.             "data": [
  1185.               "L",
  1186.               "YYYY-MM-DD",
  1187.               "YYYY/MM/DD"
  1188.             ],
  1189.             "iso": "YYYY-MM-DDTHH:mm:ss.SSSZ"
  1190.           },
  1191.           "dayNames": [
  1192.             "星期日",
  1193.             "星期一",
  1194.             "星期二",
  1195.             "星期三",
  1196.             "星期四",
  1197.             "星期五",
  1198.             "星期六"
  1199.           ],
  1200.           "dayNamesShort": [
  1201.             "周日",
  1202.             "周一",
  1203.             "周二",
  1204.             "周三",
  1205.             "周四",
  1206.             "周五",
  1207.             "周六"
  1208.           ],
  1209.           "dayNamesShorter": [
  1210.             "周日",
  1211.             "周一",
  1212.             "周二",
  1213.             "周三",
  1214.             "周四",
  1215.             "周五",
  1216.             "周六"
  1217.           ],
  1218.           "dayNamesNarrow": [
  1219.             "日",
  1220.             "一",
  1221.             "二",
  1222.             "三",
  1223.             "四",
  1224.             "五",
  1225.             "六"
  1226.           ],
  1227.           "monthNames": [
  1228.             "一月",
  1229.             "二月",
  1230.             "三月",
  1231.             "四月",
  1232.             "五月",
  1233.             "六月",
  1234.             "七月",
  1235.             "八月",
  1236.             "九月",
  1237.             "十月",
  1238.             "十一月",
  1239.             "十二月"
  1240.           ],
  1241.           "monthNamesShort": [
  1242.             "1月",
  1243.             "2月",
  1244.             "3月",
  1245.             "4月",
  1246.             "5月",
  1247.             "6月",
  1248.             "7月",
  1249.             "8月",
  1250.             "9月",
  1251.             "10月",
  1252.             "11月",
  1253.             "12月"
  1254.           ],
  1255.           "amPm": [
  1256.             "am",
  1257.             "pm"
  1258.           ],
  1259.           "monthData": {
  1260.             "11-2023": {
  1261.               "firstDayOfWeek": 2,
  1262.               "inLeapYear": false,
  1263.               "firstWeekday": 4,
  1264.               "days": 30,
  1265.               "weeks": 5,
  1266.               "month": 11,
  1267.               "year": 2023,
  1268.               "weeknumbers": [
  1269.                 45,
  1270.                 46,
  1271.                 47,
  1272.                 48,
  1273.                 49
  1274.               ],
  1275.               "isoWeeknumbers": [
  1276.                 44,
  1277.                 45,
  1278.                 46,
  1279.                 47,
  1280.                 48
  1281.               ]
  1282.             },
  1283.             "10-2023": {
  1284.               "firstDayOfWeek": 2,
  1285.               "inLeapYear": false,
  1286.               "firstWeekday": 1,
  1287.               "days": 31,
  1288.               "weeks": 6,
  1289.               "month": 10,
  1290.               "year": 2023,
  1291.               "weeknumbers": [
  1292.                 40,
  1293.                 41,
  1294.                 42,
  1295.                 43,
  1296.                 44,
  1297.                 45
  1298.               ],
  1299.               "isoWeeknumbers": [
  1300.                 39,
  1301.                 40,
  1302.                 41,
  1303.                 42,
  1304.                 43,
  1305.                 44
  1306.               ]
  1307.             },
  1308.             "12-2023": {
  1309.               "firstDayOfWeek": 2,
  1310.               "inLeapYear": false,
  1311.               "firstWeekday": 6,
  1312.               "days": 31,
  1313.               "weeks": 5,
  1314.               "month": 12,
  1315.               "year": 2023,
  1316.               "weeknumbers": [
  1317.                 49,
  1318.                 50,
  1319.                 51,
  1320.                 52,
  1321.                 53
  1322.               ],
  1323.               "isoWeeknumbers": [
  1324.                 48,
  1325.                 49,
  1326.                 50,
  1327.                 51,
  1328.                 52
  1329.               ]
  1330.             },
  1331.             "1-2020": {
  1332.               "firstDayOfWeek": 2,
  1333.               "inLeapYear": true,
  1334.               "firstWeekday": 4,
  1335.               "days": 31,
  1336.               "weeks": 5,
  1337.               "month": 1,
  1338.               "year": 2020,
  1339.               "weeknumbers": [
  1340.                 1,
  1341.                 2,
  1342.                 3,
  1343.                 4,
  1344.                 5
  1345.               ],
  1346.               "isoWeeknumbers": [
  1347.                 1,
  1348.                 2,
  1349.                 3,
  1350.                 4,
  1351.                 5
  1352.               ]
  1353.             }
  1354.           }
  1355.         },
  1356.         "firstDayOfWeek": 2,
  1357.         "start": "2023-11-17T16:00:00.000Z",
  1358.         "startTime": 1700236800000,
  1359.         "end": "2023-11-17T16:00:00.000Z",
  1360.         "endTime": 1700236800000,
  1361.         "isDate": true,
  1362.         "isRange": false,
  1363.         "isComplex": false
  1364.       }
  1365.     }
  1366.   ]
  1367. }

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

  1.  attrs: [
  2.         {
  3.           key: 'v0Day',
  4.           dates: new Date(),
  5.           highlight: true,
  6.           popover: {
  7.             label: '美好的一天！要开心呦！'
  8.           }
  9.         },
  10.         {
  11.           key: 'V1Day',
  12.           customData: '10', // 划重点！！！
  13.           dates: new Date(2023, 10, 18),
  14.           popover: {
  15.             label: '美好的一天！要开心呦！'
  16.           }
  17.         },
  18.         {
  19.           key: 'V2Day',
  20.           customData: '9', // 划重点！！！
  21.           dates: new Date(2023, 10, 6)
  22.         }
  23.       ],

最后放一张效果图

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/513295
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号