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

element UI日历组件自定义操作设置农历、阳历、节日展示、单日操作_elementui日历组件

作者：Monodyee | 2024-03-13 15:27:48

赞

踩

elementui日历组件

图例：

 自定义calendar.js,其他页面直接引入就可以

  1. /**
  2. * @1900-2100区间内的公历、农历互转
  3. * @charset UTF-8
  4. * @Author  Jea杨(JJonline@JJonline.Cn)
  5. * @Time    2014-7-21
  6. * @Time    2016-8-13 Fixed 2033hex、Attribution Annals
  7. * @Time    2016-9-25 Fixed lunar LeapMonth Param Bug
  8. * @Time    2017-7-24 Fixed use getTerm Func Param Error.use solar year,NOT lunar year
  9. * @Version 1.0.3
  10. * @公历转农历：calendar.solar2lunar(1987,11,01); //[you can ignore params of prefix 0]
  11. * @农历转公历：calendar.lunar2solar(1987,09,10); //[you can ignore params of prefix 0]
  12. */
  13. var calendar = {
  14.  
  15.     /**
  16.       * 农历1900-2100的润大小信息表
  17.       * @Array Of Property
  18.       * @return Hex
  19.       */
  20.     lunarInfo:[0x04bd8,0x04ae0,0x0a570,0x054d5,0x0d260,0x0d950,0x16554,0x056a0,0x09ad0,0x055d2,//1900-1909
  21.             0x04ae0,0x0a5b6,0x0a4d0,0x0d250,0x1d255,0x0b540,0x0d6a0,0x0ada2,0x095b0,0x14977,//1910-1919
  22.             0x04970,0x0a4b0,0x0b4b5,0x06a50,0x06d40,0x1ab54,0x02b60,0x09570,0x052f2,0x04970,//1920-1929
  23.             0x06566,0x0d4a0,0x0ea50,0x06e95,0x05ad0,0x02b60,0x186e3,0x092e0,0x1c8d7,0x0c950,//1930-1939
  24.             0x0d4a0,0x1d8a6,0x0b550,0x056a0,0x1a5b4,0x025d0,0x092d0,0x0d2b2,0x0a950,0x0b557,//1940-1949
  25.             0x06ca0,0x0b550,0x15355,0x04da0,0x0a5b0,0x14573,0x052b0,0x0a9a8,0x0e950,0x06aa0,//1950-1959
  26.             0x0aea6,0x0ab50,0x04b60,0x0aae4,0x0a570,0x05260,0x0f263,0x0d950,0x05b57,0x056a0,//1960-1969
  27.             0x096d0,0x04dd5,0x04ad0,0x0a4d0,0x0d4d4,0x0d250,0x0d558,0x0b540,0x0b6a0,0x195a6,//1970-1979
  28.             0x095b0,0x049b0,0x0a974,0x0a4b0,0x0b27a,0x06a50,0x06d40,0x0af46,0x0ab60,0x09570,//1980-1989
  29.             0x04af5,0x04970,0x064b0,0x074a3,0x0ea50,0x06b58,0x05ac0,0x0ab60,0x096d5,0x092e0,//1990-1999
  30.             0x0c960,0x0d954,0x0d4a0,0x0da50,0x07552,0x056a0,0x0abb7,0x025d0,0x092d0,0x0cab5,//2000-2009
  31.             0x0a950,0x0b4a0,0x0baa4,0x0ad50,0x055d9,0x04ba0,0x0a5b0,0x15176,0x052b0,0x0a930,//2010-2019
  32.             0x07954,0x06aa0,0x0ad50,0x05b52,0x04b60,0x0a6e6,0x0a4e0,0x0d260,0x0ea65,0x0d530,//2020-2029
  33.             0x05aa0,0x076a3,0x096d0,0x04afb,0x04ad0,0x0a4d0,0x1d0b6,0x0d250,0x0d520,0x0dd45,//2030-2039
  34.             0x0b5a0,0x056d0,0x055b2,0x049b0,0x0a577,0x0a4b0,0x0aa50,0x1b255,0x06d20,0x0ada0,//2040-2049
  35.             /**Add By JJonline@JJonline.Cn**/
  36.             0x14b63,0x09370,0x049f8,0x04970,0x064b0,0x168a6,0x0ea50, 0x06b20,0x1a6c4,0x0aae0,//2050-2059
  37.             0x0a2e0,0x0d2e3,0x0c960,0x0d557,0x0d4a0,0x0da50,0x05d55,0x056a0,0x0a6d0,0x055d4,//2060-2069
  38.             0x052d0,0x0a9b8,0x0a950,0x0b4a0,0x0b6a6,0x0ad50,0x055a0,0x0aba4,0x0a5b0,0x052b0,//2070-2079
  39.             0x0b273,0x06930,0x07337,0x06aa0,0x0ad50,0x14b55,0x04b60,0x0a570,0x054e4,0x0d160,//2080-2089
  40.             0x0e968,0x0d520,0x0daa0,0x16aa6,0x056d0,0x04ae0,0x0a9d4,0x0a2d0,0x0d150,0x0f252,//2090-2099
  41.             0x0d520],//2100
  42.  
  43.     /**
  44.       * 公历每个月份的天数普通表
  45.       * @Array Of Property
  46.       * @return Number
  47.       */
  48.     solarMonth:[31,28,31,30,31,30,31,31,30,31,30,31],
  49.  
  50.     /**
  51.       * 天干地支之天干速查表
  52.       * @Array Of Property trans["甲","乙","丙","丁","戊","己","庚","辛","壬","癸"]
  53.       * @return Cn string
  54.       */
  55.     Gan:["\u7532","\u4e59","\u4e19","\u4e01","\u620a","\u5df1","\u5e9a","\u8f9b","\u58ec","\u7678"],
  56.  
  57.     /**
  58.       * 天干地支之地支速查表
  59.       * @Array Of Property
  60.       * @trans["子","丑","寅","卯","辰","巳","午","未","申","酉","戌","亥"]
  61.       * @return Cn string
  62.       */
  63.     Zhi:["\u5b50","\u4e11","\u5bc5","\u536f","\u8fb0","\u5df3","\u5348","\u672a","\u7533","\u9149","\u620c","\u4ea5"],
  64.  
  65.     /**
  66.       * 天干地支之地支速查表<=>生肖
  67.       * @Array Of Property
  68.       * @trans["鼠","牛","虎","兔","龙","蛇","马","羊","猴","鸡","狗","猪"]
  69.       * @return Cn string
  70.       */
  71.     Animals:["\u9f20","\u725b","\u864e","\u5154","\u9f99","\u86c7","\u9a6c","\u7f8a","\u7334","\u9e21","\u72d7","\u732a"],
  72.     
  73.     /**
  74.      * 阳历节日
  75.      */
  76.     festival: {
  77.       '1-1':   {title: '元旦节'},
  78.       '2-14':  {title: '情人节'},
  79.       '5-1':   {title: '劳动节'},
  80.       '5-4':   {title: '青年节'},
  81.       '6-1':   {title: '儿童节'},
  82.       '9-10':  {title: '教师节'},
  83.       '10-1':  {title: '国庆节'},
  84.       '12-25': {title: '圣诞节'},
  85.  
  86.       '3-8':   {title: '妇女节'},
  87.       '3-12':  {title: '植树节'},
  88.       '4-1':   {title: '愚人节'},
  89.       '5-12':  {title: '护士节'},
  90.       '7-1':   {title: '建党节'},
  91.       '8-1':   {title: '建军节'},
  92.       '12-24': {title: '平安夜'},
  93.     },
  94.  
  95.     /**
  96.      * 农历节日
  97.      */
  98.     lfestival: {
  99.       '12-30': {title: '除夕'},
  100.       '1-1':   {title: '春节'},
  101.       '1-15':  {title: '元宵节'},
  102.       '5-5':   {title: '端午节'},
  103.       '8-15':  {title: '中秋节'},
  104.       '9-9':   {title: '重阳节'},
  105.     },
  106.  
  107.     /**
  108.      * 返回默认定义的阳历节日
  109.      */
  110.     getFestival(){
  111.       return this.festival
  112.     },
  113.  
  114.     /**
  115.      * 返回默认定义的内容里节日
  116.      */
  117.     getLunarFestival(){
  118.       return this.lfestival
  119.     },
  120.  
  121.     /**
  122.      * 
  123.      * @param {Object} 按照festival的格式输入数据，设置阳历节日
  124.      */
  125.     setFestival(param={}){
  126.       this.festival = param
  127.     },
  128.  
  129.     /**
  130.      * 
  131.      * @param {Object} 按照lfestival的格式输入数据，设置农历节日
  132.      */
  133.     setLunarFestival(param={}){
  134.       this.lfestival = param
  135.     },
  136.  
  137.     /**
  138.       * 24节气速查表
  139.       * @Array Of Property
  140.       * @trans["小寒","大寒","立春","雨水","惊蛰","春分","清明","谷雨","立夏","小满","芒种","夏至","小暑","大暑","立秋","处暑","白露","秋分","寒露","霜降","立冬","小雪","大雪","冬至"]
  141.       * @return Cn string
  142.       */
  143.     solarTerm:["\u5c0f\u5bd2","\u5927\u5bd2","\u7acb\u6625","\u96e8\u6c34","\u60ca\u86f0","\u6625\u5206","\u6e05\u660e","\u8c37\u96e8","\u7acb\u590f","\u5c0f\u6ee1","\u8292\u79cd","\u590f\u81f3","\u5c0f\u6691","\u5927\u6691","\u7acb\u79cb","\u5904\u6691","\u767d\u9732","\u79cb\u5206","\u5bd2\u9732","\u971c\u964d","\u7acb\u51ac","\u5c0f\u96ea","\u5927\u96ea","\u51ac\u81f3"],
  144.  
  145.     /**
  146.       * 1900-2100各年的24节气日期速查表
  147.       * @Array Of Property
  148.       * @return 0x string For splice
  149.       */
  150.     sTermInfo:['9778397bd097c36b0b6fc9274c91aa','97b6b97bd19801ec9210c965cc920e','97bcf97c3598082c95f8c965cc920f',
  151.               '97bd0b06bdb0722c965ce1cfcc920f','b027097bd097c36b0b6fc9274c91aa','97b6b97bd19801ec9210c965cc920e',
  152.               '97bcf97c359801ec95f8c965cc920f','97bd0b06bdb0722c965ce1cfcc920f','b027097bd097c36b0b6fc9274c91aa',
  153.               '97b6b97bd19801ec9210c965cc920e','97bcf97c359801ec95f8c965cc920f','97bd0b06bdb0722c965ce1cfcc920f',
  154.               'b027097bd097c36b0b6fc9274c91aa','9778397bd19801ec9210c965cc920e','97b6b97bd19801ec95f8c965cc920f',
  155.               '97bd09801d98082c95f8e1cfcc920f','97bd097bd097c36b0b6fc9210c8dc2','9778397bd197c36c9210c9274c91aa',
  156.               '97b6b97bd19801ec95f8c965cc920e','97bd09801d98082c95f8e1cfcc920f','97bd097bd097c36b0b6fc9210c8dc2',
  157.               '9778397bd097c36c9210c9274c91aa','97b6b97bd19801ec95f8c965cc920e','97bcf97c3598082c95f8e1cfcc920f',
  158.               '97bd097bd097c36b0b6fc9210c8dc2','9778397bd097c36c9210c9274c91aa','97b6b97bd19801ec9210c965cc920e',
  159.               '97bcf97c3598082c95f8c965cc920f','97bd097bd097c35b0b6fc920fb0722','9778397bd097c36b0b6fc9274c91aa',
  160.               '97b6b97bd19801ec9210c965cc920e','97bcf97c3598082c95f8c965cc920f','97bd097bd097c35b0b6fc920fb0722',
  161.               '9778397bd097c36b0b6fc9274c91aa','97b6b97bd19801ec9210c965cc920e','97bcf97c359801ec95f8c965cc920f',
  162.               '97bd097bd097c35b0b6fc920fb0722','9778397bd097c36b0b6fc9274c91aa','97b6b97bd19801ec9210c965cc920e',
  163.               '97bcf97c359801ec95f8c965cc920f','97bd097bd097c35b0b6fc920fb0722','9778397bd097c36b0b6fc9274c91aa',
  164.               '97b6b97bd19801ec9210c965cc920e','97bcf97c359801ec95f8c965cc920f','97bd097bd07f595b0b6fc920fb0722',
  165.               '9778397bd097c36b0b6fc9210c8dc2','9778397bd19801ec9210c9274c920e','97b6b97bd19801ec95f8c965cc920f',
  166.               '97bd07f5307f595b0b0bc920fb0722','7f0e397bd097c36b0b6fc9210c8dc2','9778397bd097c36c9210c9274c920e',
  167.               '97b6b97bd19801ec95f8c965cc920f','97bd07f5307f595b0b0bc920fb0722','7f0e397bd097c36b0b6fc9210c8dc2',
  168.               '9778397bd097c36c9210c9274c91aa','97b6b97bd19801ec9210c965cc920e','97bd07f1487f595b0b0bc920fb0722',
  169.               '7f0e397bd097c36b0b6fc9210c8dc2','9778397bd097c36b0b6fc9274c91aa','97b6b97bd19801ec9210c965cc920e',
  170.               '97bcf7f1487f595b0b0bb0b6fb0722','7f0e397bd097c35b0b6fc920fb0722','9778397bd097c36b0b6fc9274c91aa',
  171.               '97b6b97bd19801ec9210c965cc920e','97bcf7f1487f595b0b0bb0b6fb0722','7f0e397bd097c35b0b6fc920fb0722',
  172.               '9778397bd097c36b0b6fc9274c91aa','97b6b97bd19801ec9210c965cc920e','97bcf7f1487f531b0b0bb0b6fb0722',
  173.               '7f0e397bd097c35b0b6fc920fb0722','9778397bd097c36b0b6fc9274c91aa','97b6b97bd19801ec9210c965cc920e',
  174.               '97bcf7f1487f531b0b0bb0b6fb0722','7f0e397bd07f595b0b6fc920fb0722','9778397bd097c36b0b6fc9274c91aa',
  175.               '97b6b97bd19801ec9210c9274c920e','97bcf7f0e47f531b0b0bb0b6fb0722','7f0e397bd07f595b0b0bc920fb0722',
  176.               '9778397bd097c36b0b6fc9210c91aa','97b6b97bd197c36c9210c9274c920e','97bcf7f0e47f531b0b0bb0b6fb0722',
  177.               '7f0e397bd07f595b0b0bc920fb0722','9778397bd097c36b0b6fc9210c8dc2','9778397bd097c36c9210c9274c920e',
  178.               '97b6b7f0e47f531b0723b0b6fb0722','7f0e37f5307f595b0b0bc920fb0722','7f0e397bd097c36b0b6fc9210c8dc2',
  179.               '9778397bd097c36b0b70c9274c91aa','97b6b7f0e47f531b0723b0b6fb0721','7f0e37f1487f595b0b0bb0b6fb0722',
  180.               '7f0e397bd097c35b0b6fc9210c8dc2','9778397bd097c36b0b6fc9274c91aa','97b6b7f0e47f531b0723b0b6fb0721',
  181.               '7f0e27f1487f595b0b0bb0b6fb0722','7f0e397bd097c35b0b6fc920fb0722','9778397bd097c36b0b6fc9274c91aa',
  182.               '97b6b7f0e47f531b0723b0b6fb0721','7f0e27f1487f531b0b0bb0b6fb0722','7f0e397bd097c35b0b6fc920fb0722',
  183.               '9778397bd097c36b0b6fc9274c91aa','97b6b7f0e47f531b0723b0b6fb0721','7f0e27f1487f531b0b0bb0b6fb0722',
  184.               '7f0e397bd097c35b0b6fc920fb0722','9778397bd097c36b0b6fc9274c91aa','97b6b7f0e47f531b0723b0b6fb0721',
  185.               '7f0e27f1487f531b0b0bb0b6fb0722','7f0e397bd07f595b0b0bc920fb0722','9778397bd097c36b0b6fc9274c91aa',
  186.               '97b6b7f0e47f531b0723b0787b0721','7f0e27f0e47f531b0b0bb0b6fb0722','7f0e397bd07f595b0b0bc920fb0722',
  187.               '9778397bd097c36b0b6fc9210c91aa','97b6b7f0e47f149b0723b0787b0721','7f0e27f0e47f531b0723b0b6fb0722',
  188.               '7f0e397bd07f595b0b0bc920fb0722','9778397bd097c36b0b6fc9210c8dc2','977837f0e37f149b0723b0787b0721',
  189.               '7f07e7f0e47f531b0723b0b6fb0722','7f0e37f5307f595b0b0bc920fb0722','7f0e397bd097c35b0b6fc9210c8dc2',
  190.               '977837f0e37f14998082b0787b0721','7f07e7f0e47f531b0723b0b6fb0721','7f0e37f1487f595b0b0bb0b6fb0722',
  191.               '7f0e397bd097c35b0b6fc9210c8dc2','977837f0e37f14998082b0787b06bd','7f07e7f0e47f531b0723b0b6fb0721',
  192.               '7f0e27f1487f531b0b0bb0b6fb0722','7f0e397bd097c35b0b6fc920fb0722','977837f0e37f14998082b0787b06bd',
  193.               '7f07e7f0e47f531b0723b0b6fb0721','7f0e27f1487f531b0b0bb0b6fb0722','7f0e397bd097c35b0b6fc920fb0722',
  194.               '977837f0e37f14998082b0787b06bd','7f07e7f0e47f531b0723b0b6fb0721','7f0e27f1487f531b0b0bb0b6fb0722',
  195.               '7f0e397bd07f595b0b0bc920fb0722','977837f0e37f14998082b0787b06bd','7f07e7f0e47f531b0723b0b6fb0721',
  196.               '7f0e27f1487f531b0b0bb0b6fb0722','7f0e397bd07f595b0b0bc920fb0722','977837f0e37f14998082b0787b06bd',
  197.               '7f07e7f0e47f149b0723b0787b0721','7f0e27f0e47f531b0b0bb0b6fb0722','7f0e397bd07f595b0b0bc920fb0722',
  198.               '977837f0e37f14998082b0723b06bd','7f07e7f0e37f149b0723b0787b0721','7f0e27f0e47f531b0723b0b6fb0722',
  199.               '7f0e397bd07f595b0b0bc920fb0722','977837f0e37f14898082b0723b02d5','7ec967f0e37f14998082b0787b0721',
  200.               '7f07e7f0e47f531b0723b0b6fb0722','7f0e37f1487f595b0b0bb0b6fb0722','7f0e37f0e37f14898082b0723b02d5',
  201.               '7ec967f0e37f14998082b0787b0721','7f07e7f0e47f531b0723b0b6fb0722','7f0e37f1487f531b0b0bb0b6fb0722',
  202.               '7f0e37f0e37f14898082b0723b02d5','7ec967f0e37f14998082b0787b06bd','7f07e7f0e47f531b0723b0b6fb0721',
  203.               '7f0e37f1487f531b0b0bb0b6fb0722','7f0e37f0e37f14898082b072297c35','7ec967f0e37f14998082b0787b06bd',
  204.               '7f07e7f0e47f531b0723b0b6fb0721','7f0e27f1487f531b0b0bb0b6fb0722','7f0e37f0e37f14898082b072297c35',
  205.               '7ec967f0e37f14998082b0787b06bd','7f07e7f0e47f531b0723b0b6fb0721','7f0e27f1487f531b0b0bb0b6fb0722',
  206.               '7f0e37f0e366aa89801eb072297c35','7ec967f0e37f14998082b0787b06bd','7f07e7f0e47f149b0723b0787b0721',
  207.               '7f0e27f1487f531b0b0bb0b6fb0722','7f0e37f0e366aa89801eb072297c35','7ec967f0e37f14998082b0723b06bd',
  208.               '7f07e7f0e47f149b0723b0787b0721','7f0e27f0e47f531b0723b0b6fb0722','7f0e37f0e366aa89801eb072297c35',
  209.               '7ec967f0e37f14998082b0723b06bd','7f07e7f0e37f14998083b0787b0721','7f0e27f0e47f531b0723b0b6fb0722',
  210.               '7f0e37f0e366aa89801eb072297c35','7ec967f0e37f14898082b0723b02d5','7f07e7f0e37f14998082b0787b0721',
  211.               '7f07e7f0e47f531b0723b0b6fb0722','7f0e36665b66aa89801e9808297c35','665f67f0e37f14898082b0723b02d5',
  212.               '7ec967f0e37f14998082b0787b0721','7f07e7f0e47f531b0723b0b6fb0722','7f0e36665b66a449801e9808297c35',
  213.               '665f67f0e37f14898082b0723b02d5','7ec967f0e37f14998082b0787b06bd','7f07e7f0e47f531b0723b0b6fb0721',
  214.               '7f0e36665b66a449801e9808297c35','665f67f0e37f14898082b072297c35','7ec967f0e37f14998082b0787b06bd',
  215.               '7f07e7f0e47f531b0723b0b6fb0721','7f0e26665b66a449801e9808297c35','665f67f0e37f1489801eb072297c35',
  216.               '7ec967f0e37f14998082b0787b06bd','7f07e7f0e47f531b0723b0b6fb0721','7f0e27f1487f531b0b0bb0b6fb0722'],
  217.  
  218.     /**
  219.       * 数字转中文速查表
  220.       * @Array Of Property
  221.       * @trans ['日','一','二','三','四','五','六','七','八','九','十']
  222.       * @return Cn string
  223.       */
  224.     nStr1:["\u65e5","\u4e00","\u4e8c","\u4e09","\u56db","\u4e94","\u516d","\u4e03","\u516b","\u4e5d","\u5341"],
  225.  
  226.     /**
  227.       * 日期转农历称呼速查表
  228.       * @Array Of Property
  229.       * @trans ['初','十','廿','卅']
  230.       * @return Cn string
  231.       */
  232.     nStr2:["\u521d","\u5341","\u5eff","\u5345"],
  233.  
  234.     /**
  235.       * 月份转农历称呼速查表
  236.       * @Array Of Property
  237.       * @trans ['正','一','二','三','四','五','六','七','八','九','十','冬','腊']
  238.       * @return Cn string
  239.       */
  240.     nStr3:["\u6b63","\u4e8c","\u4e09","\u56db","\u4e94","\u516d","\u4e03","\u516b","\u4e5d","\u5341","\u51ac","\u814a"],
  241.  
  242.     /**
  243.       * 返回农历y年一整年的总天数
  244.       * @param lunar Year
  245.       * @return Number
  246.       * @eg:var count = calendar.lYearDays(1987) ;//count=387
  247.       */
  248.     lYearDays:function(y) {
  249.         var i, sum = 348;
  250.         for(i=0x8000; i>0x8; i>>=1) { sum += (this.lunarInfo[y-1900] & i)? 1: 0; }
  251.         return(sum+this.leapDays(y));
  252.     },
  253.  
  254.     /**
  255.       * 返回农历y年闰月是哪个月；若y年没有闰月 则返回0
  256.       * @param lunar Year
  257.       * @return Number (0-12)
  258.       * @eg:var leapMonth = calendar.leapMonth(1987) ;//leapMonth=6
  259.       */
  260.     leapMonth:function(y) { //闰字编码 \u95f0
  261.         return(this.lunarInfo[y-1900] & 0xf);
  262.     },
  263.  
  264.     /**
  265.       * 返回农历y年闰月的天数 若该年没有闰月则返回0
  266.       * @param lunar Year
  267.       * @return Number (0、29、30)
  268.       * @eg:var leapMonthDay = calendar.leapDays(1987) ;//leapMonthDay=29
  269.       */
  270.     leapDays:function(y) {
  271.         if(this.leapMonth(y))  {
  272.             return((this.lunarInfo[y-1900] & 0x10000)? 30: 29);
  273.         }
  274.         return(0);
  275.     },
  276.  
  277.     /**
  278.       * 返回农历y年m月（非闰月）的总天数，计算m为闰月时的天数请使用leapDays方法
  279.       * @param lunar Year
  280.       * @return Number (-1、29、30)
  281.       * @eg:var MonthDay = calendar.monthDays(1987,9) ;//MonthDay=29
  282.       */
  283.     monthDays:function(y,m) {
  284.         if(m>12 || m<1) {return -1}//月份参数从1至12，参数错误返回-1
  285.         return( (this.lunarInfo[y-1900] & (0x10000>>m))? 30: 29 );
  286.     },
  287.  
  288.     /**
  289.       * 返回公历(!)y年m月的天数
  290.       * @param solar Year
  291.       * @return Number (-1、28、29、30、31)
  292.       * @eg:var solarMonthDay = calendar.leapDays(1987) ;//solarMonthDay=30
  293.       */
  294.     solarDays:function(y,m) {
  295.         if(m>12 || m<1) {return -1} //若参数错误 返回-1
  296.         var ms = m-1;
  297.         if(ms==1) { //2月份的闰平规律测算后确认返回28或29
  298.             return(((y%4 == 0) && (y%100 != 0) || (y%400 == 0))? 29: 28);
  299.         }else {
  300.             return(this.solarMonth[ms]);
  301.         }
  302.     },
  303.  
  304.     /**
  305.      * 农历年份转换为干支纪年
  306.      * @param  lYear 农历年的年份数
  307.      * @return Cn string
  308.      */
  309.     toGanZhiYear:function(lYear) {
  310.         var ganKey = (lYear - 3) % 10;
  311.         var zhiKey = (lYear - 3) % 12;
  312.         if(ganKey == 0) ganKey = 10;//如果余数为0则为最后一个天干
  313.         if(zhiKey == 0) zhiKey = 12;//如果余数为0则为最后一个地支
  314.         return this.Gan[ganKey-1] + this.Zhi[zhiKey-1];
  315.  
  316.     },
  317.  
  318.     /**
  319.      * 公历月、日判断所属星座
  320.      * @param  cMonth [description]
  321.      * @param  cDay [description]
  322.      * @return Cn string
  323.      */
  324.     toAstro:function(cMonth,cDay) {
  325.         var s   = "\u9b54\u7faf\u6c34\u74f6\u53cc\u9c7c\u767d\u7f8a\u91d1\u725b\u53cc\u5b50\u5de8\u87f9\u72ee\u5b50\u5904\u5973\u5929\u79e4\u5929\u874e\u5c04\u624b\u9b54\u7faf";
  326.         var arr = [20,19,21,21,21,22,23,23,23,23,22,22];
  327.         return s.substr(cMonth*2 - (cDay < arr[cMonth-1] ? 2 : 0),2) + "\u5ea7";//座
  328.     },
  329.  
  330.     /**
  331.       * 传入offset偏移量返回干支
  332.       * @param offset 相对甲子的偏移量
  333.       * @return Cn string
  334.       */
  335.     toGanZhi:function(offset) {
  336.         return this.Gan[offset%10] + this.Zhi[offset%12];
  337.     },
  338.  
  339.     /**
  340.       * 传入公历(!)y年获得该年第n个节气的公历日期
  341.       * @param y公历年(1900-2100)；n二十四节气中的第几个节气(1~24)；从n=1(小寒)算起
  342.       * @return day Number
  343.       * @eg:var _24 = calendar.getTerm(1987,3) ;//_24=4;意即1987年2月4日立春
  344.       */
  345.     getTerm:function(y,n) {
  346.         if(y<1900 || y>2100) {return -1;}
  347.         if(n<1 || n>24) {return -1;}
  348.         var _table = this.sTermInfo[y-1900];
  349.         var _info = [
  350.             parseInt('0x'+_table.substr(0,5)).toString() ,
  351.             parseInt('0x'+_table.substr(5,5)).toString(),
  352.             parseInt('0x'+_table.substr(10,5)).toString(),
  353.             parseInt('0x'+_table.substr(15,5)).toString(),
  354.             parseInt('0x'+_table.substr(20,5)).toString(),
  355.             parseInt('0x'+_table.substr(25,5)).toString()
  356.         ];
  357.         var _calday = [
  358.             _info[0].substr(0,1),
  359.             _info[0].substr(1,2),
  360.             _info[0].substr(3,1),
  361.             _info[0].substr(4,2),
  362.  
  363.             _info[1].substr(0,1),
  364.             _info[1].substr(1,2),
  365.             _info[1].substr(3,1),
  366.             _info[1].substr(4,2),
  367.  
  368.             _info[2].substr(0,1),
  369.             _info[2].substr(1,2),
  370.             _info[2].substr(3,1),
  371.             _info[2].substr(4,2),
  372.  
  373.             _info[3].substr(0,1),
  374.             _info[3].substr(1,2),
  375.             _info[3].substr(3,1),
  376.             _info[3].substr(4,2),
  377.  
  378.             _info[4].substr(0,1),
  379.             _info[4].substr(1,2),
  380.             _info[4].substr(3,1),
  381.             _info[4].substr(4,2),
  382.  
  383.             _info[5].substr(0,1),
  384.             _info[5].substr(1,2),
  385.             _info[5].substr(3,1),
  386.             _info[5].substr(4,2),
  387.         ];
  388.         return parseInt(_calday[n-1]);
  389.     },
  390.  
  391.     /**
  392.       * 传入农历数字月份返回汉语通俗表示法
  393.       * @param lunar month
  394.       * @return Cn string
  395.       * @eg:var cnMonth = calendar.toChinaMonth(12) ;//cnMonth='腊月'
  396.       */
  397.     toChinaMonth:function(m) { // 月 => \u6708
  398.         if(m>12 || m<1) {return -1} //若参数错误 返回-1
  399.         var s = this.nStr3[m-1];
  400.         s+= "\u6708";//加上月字
  401.         return s;
  402.     },
  403.  
  404.     /**
  405.       * 传入农历日期数字返回汉字表示法
  406.       * @param lunar day
  407.       * @return Cn string
  408.       * @eg:var cnDay = calendar.toChinaDay(21) ;//cnMonth='廿一'
  409.       */
  410.     toChinaDay:function(d){ //日 => \u65e5
  411.         var s;
  412.         switch (d) {
  413.             case 10:
  414.             s = '\u521d\u5341'; break;
  415.         case 20:
  416.             s = '\u4e8c\u5341'; break;
  417.             break;
  418.         case 30:
  419.             s = '\u4e09\u5341'; break;
  420.             break;
  421.         default :
  422.             s = this.nStr2[Math.floor(d/10)];
  423.             s += this.nStr1[d%10];
  424.         }
  425.         return(s);
  426.     },
  427.  
  428.     /**
  429.       * 年份转生肖[!仅能大致转换] => 精确划分生肖分界线是“立春”
  430.       * @param y year
  431.       * @return Cn string
  432.       * @eg:var animal = calendar.getAnimal(1987) ;//animal='兔'
  433.       */
  434.     getAnimal: function(y) {
  435.         return this.Animals[(y - 4) % 12]
  436.     },
  437.  
  438.     /**
  439.       * 传入阳历年月日获得详细的公历、农历object信息 <=>JSON
  440.       * @param y  solar year
  441.       * @param m  solar month
  442.       * @param d  solar day
  443.       * @return JSON object
  444.       * @eg:console.log(calendar.solar2lunar(1987,11,01));
  445.       */
  446.     solar2lunar:function (y,m,d) { //参数区间1900.1.31~2100.12.31
  447.         y = parseInt(y)
  448.         m = parseInt(m)
  449.         d = parseInt(d)
  450.         //年份限定、上限
  451.         if(y<1900 || y>2100) {
  452.             return -1;// undefined转换为数字变为NaN
  453.         }
  454.         //公历传参最下限
  455.         if(y==1900&&m==1&&d<31) {
  456.             return -1;
  457.         }
  458.         //未传参  获得当天
  459.         if(!y) {
  460.             var objDate = new Date();
  461.         }else {
  462.             var objDate = new Date(y,parseInt(m)-1,d)
  463.         }
  464.         var i, leap=0, temp=0;
  465.         //修正ymd参数
  466.         var y = objDate.getFullYear(),
  467.             m = objDate.getMonth()+1,
  468.             d = objDate.getDate();
  469.         var offset = (Date.UTC(objDate.getFullYear(),objDate.getMonth(),objDate.getDate()) - Date.UTC(1900,0,31))/86400000;
  470.         for(i=1900; i<2101 && offset>0; i++) {
  471.             temp    = this.lYearDays(i);
  472.             offset -= temp;
  473.         }
  474.         if(offset<0) {
  475.             offset+=temp; i--;
  476.         }
  477.  
  478.         //是否今天
  479.         var isTodayObj = new Date(),
  480.             isToday    = false;
  481.         if(isTodayObj.getFullYear()==y && isTodayObj.getMonth()+1==m && isTodayObj.getDate()==d) {
  482.             isToday = true;
  483.         }
  484.         //星期几
  485.         var nWeek = objDate.getDay(),
  486.            cWeek  = this.nStr1[nWeek];
  487.         //数字表示周几顺应天朝周一开始的惯例
  488.         if(nWeek==0) {
  489.             nWeek = 7;
  490.         }
  491.         //农历年
  492.         var year   = i;
  493.         var leap   = this.leapMonth(i); //闰哪个月
  494.         var isLeap = false;
  495.  
  496.         //效验闰月
  497.         for(i=1; i<13 && offset>0; i++) {
  498.             //闰月
  499.             if(leap>0 && i==(leap+1) && isLeap==false){
  500.                 --i;
  501.                 isLeap = true; temp = this.leapDays(year); //计算农历闰月天数
  502.             }
  503.             else{
  504.                 temp = this.monthDays(year, i);//计算农历普通月天数
  505.             }
  506.             //解除闰月
  507.             if(isLeap==true && i==(leap+1)) { isLeap = false; }
  508.             offset -= temp;
  509.         }
  510.         // 闰月导致数组下标重叠取反
  511.         if(offset==0 && leap>0 && i==leap+1)
  512.         {
  513.             if(isLeap){
  514.                 isLeap = false;
  515.             }else{
  516.                 isLeap = true; --i;
  517.             }
  518.         }
  519.         if(offset<0)
  520.         {
  521.             offset += temp; --i;
  522.         }
  523.         //农历月
  524.         var month      = i;
  525.         //农历日
  526.         var day        = offset + 1;
  527.         //天干地支处理
  528.         var sm         = m-1;
  529.         var gzY        = this.toGanZhiYear(year);
  530.  
  531.         // 当月的两个节气
  532.         // bugfix-2017-7-24 11:03:38 use lunar Year Param `y` Not `year`
  533.         var firstNode  = this.getTerm(y,(m*2-1));//返回当月「节」为几日开始
  534.         var secondNode = this.getTerm(y,(m*2));//返回当月「节」为几日开始
  535.  
  536.         // 依据12节气修正干支月
  537.         var gzM        = this.toGanZhi((y-1900)*12+m+11);
  538.         if(d>=firstNode) {
  539.             gzM        = this.toGanZhi((y-1900)*12+m+12);
  540.         }
  541.  
  542.         //传入的日期的节气与否
  543.         var isTerm = false;
  544.         var Term   = null;
  545.         if(firstNode==d) {
  546.             isTerm  = true;
  547.             Term    = this.solarTerm[m*2-2];
  548.         }
  549.         if(secondNode==d) {
  550.             isTerm  = true;
  551.             Term    = this.solarTerm[m*2-1];
  552.         }
  553.         //日柱 当月一日与 1900/1/1 相差天数
  554.         var dayCyclical = Date.UTC(y,sm,1,0,0,0,0)/86400000+25567+10;
  555.         var gzD         = this.toGanZhi(dayCyclical+d-1);
  556.         //该日期所属的星座
  557.         var astro       = this.toAstro(m,d);
  558.  
  559.         var solarDate = y+'-'+m+'-'+d
  560.         var lunarDate = year+'-'+month+'-'+day
  561.  
  562.         var festival = this.festival
  563.         var lfestival = this.lfestival
  564.  
  565.         var festivalDate = m+'-'+d
  566.         var lunarFestivalDate = month+'-'+day
  567.  
  568.         return {
  569.           date: solarDate,
  570.           lunarDate: lunarDate,
  571.           festival: festival[festivalDate] ? festival[festivalDate].title : null,
  572.           lunarFestival: lfestival[lunarFestivalDate] ? lfestival[lunarFestivalDate].title : null,
  573.           'lYear':year,
  574.           'lMonth':month,
  575.           'lDay':day,
  576.           'Animal':this.getAnimal(year),
  577.           'IMonthCn':(isLeap?"\u95f0":'')+this.toChinaMonth(month),
  578.           'IDayCn':this.toChinaDay(day),
  579.           'cYear':y,
  580.           'cMonth':m,
  581.           'cDay':d,
  582.           'gzYear':gzY,
  583.           'gzMonth':gzM,
  584.           'gzDay':gzD,
  585.           'isToday':isToday,
  586.           'isLeap':isLeap,
  587.           'nWeek':nWeek,
  588.           'ncWeek':"\u661f\u671f"+cWeek,
  589.           'isTerm':isTerm,
  590.           'Term':Term,
  591.           'astro':astro
  592.         };
  593.     },
  594.  
  595.     /**
  596.       * 传入农历年月日以及传入的月份是否闰月获得详细的公历、农历object信息 <=>JSON
  597.       * @param y  lunar year
  598.       * @param m  lunar month
  599.       * @param d  lunar day
  600.       * @param isLeapMonth  lunar month is leap or not.[如果是农历闰月第四个参数赋值true即可]
  601.       * @return JSON object
  602.       * @eg:console.log(calendar.lunar2solar(1987,9,10));
  603.       */
  604.     lunar2solar:function(y,m,d,isLeapMonth) {   //参数区间1900.1.31~2100.12.1
  605.         y = parseInt(y)
  606.         m = parseInt(m)
  607.         d = parseInt(d)
  608.         var isLeapMonth = !!isLeapMonth;
  609.         var leapOffset  = 0;
  610.         var leapMonth   = this.leapMonth(y);
  611.         var leapDay     = this.leapDays(y);
  612.         if(isLeapMonth&&(leapMonth!=m)) {return -1;}//传参要求计算该闰月公历 但该年得出的闰月与传参的月份并不同
  613.         if(y==2100&&m==12&&d>1 || y==1900&&m==1&&d<31) {return -1;}//超出了最大极限值
  614.         var day  = this.monthDays(y,m);
  615.         var _day = day;
  616.         //bugFix 2016-9-25
  617.         //if month is leap, _day use leapDays method
  618.         if(isLeapMonth) {
  619.             _day = this.leapDays(y,m);
  620.         }
  621.         if(y < 1900 || y > 2100 || d > _day) {return -1;}//参数合法性效验
  622.  
  623.         //计算农历的时间差
  624.         var offset = 0;
  625.         for(var i=1900;i<y;i++) {
  626.             offset+=this.lYearDays(i);
  627.         }
  628.         var leap = 0,isAdd= false;
  629.         for(var i=1;i<m;i++) {
  630.             leap = this.leapMonth(y);
  631.             if(!isAdd) {//处理闰月
  632.                 if(leap<=i && leap>0) {
  633.                     offset+=this.leapDays(y);isAdd = true;
  634.                 }
  635.             }
  636.             offset+=this.monthDays(y,i);
  637.         }
  638.         //转换闰月农历 需补充该年闰月的前一个月的时差
  639.         if(isLeapMonth) {offset+=day;}
  640.         //1900年农历正月一日的公历时间为1900年1月30日0时0分0秒(该时间也是本农历的最开始起始点)
  641.         var stmap   =   Date.UTC(1900,1,30,0,0,0);
  642.         var calObj  =   new Date((offset+d-31)*86400000+stmap);
  643.         var cY      =   calObj.getUTCFullYear();
  644.         var cM      =   calObj.getUTCMonth()+1;
  645.         var cD      =   calObj.getUTCDate();
  646.  
  647.         return this.solar2lunar(cY,cM,cD);
  648.     }
  649. };
  650. export default calendar;

创建calendar.vue文件

  1. <template>
  2.   <div class="hello">
  3.     <div class="threetype">
  4.       <span class='typeflag flagtwo'></span>&nbsp;工作日&nbsp;
  5.       <span class='typeflag flagthree'></span>&nbsp;今日日期&nbsp;
  6.       <span class='typeflag flagone'></span>&nbsp;休息日&nbsp;
  7.     </div>
  8.     <el-calendar :first-day-of-week="7" class='main'>
  9.     
  10.       <template slot="dateCell" slot-scope="{date, data}">
  11.          <div class="item">
  12.            <div class="top">
  13.         <!-- {{solarDate2lunar(data.day) }} -->
  14.           <span class="onedate">{{solarDate2lunar(data.day,'one')}}</span>
  15.           <span class="twodate">{{solarDate2lunar(data.day,'two')}}</span>
  16.           <span class='flag' :class="getMyDay(new Date(data.day))?'flagone':getToday(data.day)?'flagthree':'flagtwo'"></span>
  17.            </div>
  18.            <div class="center" :class="getFes(data.day)?'centerone':'centertwo'">
  19.              {{getFes(data.day)}}
  20.            </div>
  21.          <div>
  22.              <span class="logo unactive"> </span>
  23.               <img class="logoimg" src="@/assets/logo.png" alt="" />
  24.         </div>
  25.         <template v-for="(item, index) in msg">
  26.           <el-popover
  27.             v-if="item.date == data.day"
  28.             :key="index"
  29.             placement="top-start"
  30.             width="200"
  31.             trigger="hover"
  32.           >
  33.           <p v-for="(item2, index2) in item.msg" :key="index2">
  34.               <span>{{item2}} </span>
  35.               <el-button type="primary" size="mini" class="addbtn" @click="oneself(date,data,item.num)">自定义</el-button>
  36.           </p>
  37.          
  38.           <ul class='ulmsg' v-if='item.date===data.day' slot="reference" @dblclick="aclick(data,item)">
  39.           <div v-if="item.num>0" >
  40.              <span class="logo active"> </span>
  41.               <img class="logoimg" src="@/assets/logo.png"/>
  42.           </div>
  43.           <li v-for="(item1, index1) in item.msg" :key="index1">
  44.             <span style="display:inline-block;width:70px;">{{item1.split('|')[0]}}</span>
  45.             <span>{{item1.split('|')[1]}} </span>
  46.           </li>
  47.           </ul>
  48.           </el-popover>
  49.         </template>
  50.         </div>
  51.       </template>
  52.     </el-calendar>
  53.     <el-dialog title="修改备注" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
  54.         <el-button type="primary" size="mini" @click="add(changemsg)" class="addbtn">添加</el-button>
  55.         <p v-for='(msg,i) in changemsg.msg' :key="i">
  56.                 <el-input
  57.                   style="display:inline-block;width:140px;"
  58.                   :placeholder="msg"
  59.                   :disabled="true">
  60.                 </el-input>
  61.                 <el-button type="primary" size="mini" icon="el-icon-edit" circle @click="edit(changemsg,i)"></el-button>
  62.                 <el-button type="danger" size="mini"  icon="el-icon-delete" circle @click="dele(changemsg,i)"></el-button>
  63.         </p>
  64.     </el-dialog>
  65.   </div>
  66. </template>
  67.  
  68. <script>
  69. import calendar from "@/assets/calendar.js";
  70. export default {
  71.   name: "HelloWorld",
  72.   data() {
  73.     return {
  74.       refNamePopover: 'popover-',
  75.       // value: new Date(),
  76.       msg: [{date:"2022-02-21",msg:['8:00-9:30|1人','9:30-11:00|8人','14:30-16:00|1人','14:30-16:00|1人'],num:4},{date:"2022-03-29",msg:['8:00-9:30|1人','9:30-11:00|8人','14:30-16:00|1人','14:30-16:00|1人'],num:4},{date:"2022-02-23",msg:['9:30-11:00|8人','14:30-16:00|1人','9:30-11:00|8人','14:30-16:00|1人','9:30-11:00|8人','14:30-16:00|1人'],num:6},{date:"2022-02-09",msg:['14:30-16:00|1人'],num:1},{date:"2022-01-19",msg:['9:30-11:00|8人','14:30-16:00|1人','14:31-16:00|3人'],num:3}],
  77.       dialogFormVisible:false,
  78.       changemsg:{},
  79.       input:'',
  80.       inputshow:true
  81.     };
  82.   },
  83.   created: function() {
  84.   //  <span v-for='(item,key) in msg' @dblclick="aclick(data,item)" :key="key"
  85.   //       >
  86.   //       <el-popover  placement="right" trigger="hover" :ref="refNamePopover+key">
  87.   //       <div slot="content">
  88.   //           　<p v-for='(msg,i) in item.msg' :key="i">
  89.   //               <span style="display:inline-block;width:70px;">{{msg.split('|')[0]}}</span>
  90.   //               <span>{{msg.split('|')[1]}} </span>
  91.   //               <el-button type="primary" size="mini" class="addbtn" @click="oneself(date,data,key)" slot="reference">自定义</el-button>
  92.   //           </p>
  93.   //         </div>
  94.   //       <ul class='ulmsg' v-if='item.date===data.day'>
  95.   //         <div v-if="item.num>0" >
  96.   //            <span class="logo active"> </span>
  97.   //             <img class="logoimg" src="@/assets/logo.png"/>
  98.   //         </div>
  99.   //         <li v-for='(msg,i) in item.msg' :key="i">
  100.   //           <span style="display:inline-block;width:70px;">{{msg.split('|')[0]}}</span>
  101.   //           <span>{{msg.split('|')[1]}} </span>
  102.   //         </li>
  103.   //         </ul>
  104.   //       </el-popover>
  105.   //       </span>
  106.   // <template v-for="(item, index) in msg">
  107.   //         <el-popover
  108.   //           v-if="item.date == data.day"
  109.   //           :key="index"
  110.   //           placement="top-start"
  111.   //           width="200"
  112.   //           trigger="hover"
  113.   //         >
  114.   //         <p v-for="(item2, index2) in item.data" :key="index2">
  115.   //             <span>{{item2}} </span>
  116.   //             <el-button type="primary" size="mini" class="addbtn" @click="oneself(date,data,item.num)">自定义</el-button>
  117.   //         </p>
  118.   //         <span slot="reference" v-for="(item1, index1) in item.data" v-if="item.date == data.day" :key="index1" style="display:inline-block;">{{item1}}</span>
  119.   //         </el-popover>
  120.   //       </template>
  121.   },
  122.   methods:{
  123.     oneself(date,data,id){
  124.       console.log('9999',date,data,id)
  125.  
  126.     },
  127.     aclick(data,msg){
  128.       console.log(data,msg)
  129.       this.dialogFormVisible =true
  130.       this.changemsg= msg
  131.     },
  132.     solarDate2lunar(solarDate,type) {
  133.       // console.log('6666',solarDate,type)
  134.       var solar = solarDate.split("-");
  135.       var lunar = calendar.solar2lunar(solar[0], solar[1], solar[2]);
  136.       // console.log('888',solar,solar[2])
  137.       if(type==='one'){
  138.          if(lunar.IDayCn==='初一'){
  139.             // return lunar.IMonthCn + lunar.IDayCn+ "\n\n" + solar[1] + "-" + solar[2] ;//三月初一 03-24
  140.             return lunar.IMonthCn + lunar.IDayCn;//三月初一 03-24
  141.           }
  142.           return lunar.IDayCn;
  143.       }
  144.       return solar[2]+"日" ;
  145.     },
  146.     getToday(date){
  147.       let today = new Date()
  148.       let month = today.getMonth()+1>10?today.getMonth()+1:'0'+(today.getMonth()+1)
  149.       let day = today.getDate()>10?today.getDate():'0'+(today.getDate())
  150.       let s = today.getFullYear()+'-'+month+'-'+day
  151.       return date==s
  152.     },
  153.     getMyDay(date){
  154.       var week;
  155.       if(date.getDay()==0) week="周日"
  156.       if(date.getDay()==6) week="周六"
  157.       return week;
  158.     },
  159.     getFes(solarDate){
  160.       var solar = solarDate.split("-");
  161.       var lunar = calendar.solar2lunar(solar[0], solar[1], solar[2]);
  162.       return lunar.festival? lunar.festival:lunar.lunarFestival
  163.     },
  164.     edit(obj,i){
  165.       let str =obj.msg[i]
  166.       str=str.substr(0, str.length - 1);  
  167.       this.$prompt('请输入修改', '提示', {
  168.           confirmButtonText: '确定',
  169.           cancelButtonText: '取消',
  170.           inputValue:str,
  171.           inputPattern: /^([0-9]|1[0-9]|2[0-3]):[0-5][0-9]-([0-9]|1[0-9]|2[0-3]):[0-5][0-9][|][0-9]*[1-9][0-9]*$/,
  172.           inputErrorMessage: '格式不正确',
  173.           closeOnClickModal:false,
  174.         }).then(({ value }) => {
  175.           this.changemsg.msg.splice(i,1,value+'人')
  176.           this.$message({
  177.             type: 'success',
  178.             message: '修改成功'
  179.           });
  180.         }).catch(() => {
  181.           this.$message({
  182.             type: 'info',
  183.             message: '取消修改'
  184.           });       
  185.         });
  186.     },
  187.     dele(obj,i){
  188.       console.log(obj,i)
  189.       obj.msg.splice(i,1)
  190.       this.changemsg=obj
  191.     },
  192.     add(obj){
  193.       this.$prompt('请输入添加', '提示', {
  194.           confirmButtonText: '确定',
  195.           cancelButtonText: '取消',
  196.           inputValue:'0:00-0:00|1',
  197.           inputPattern: /^([0-9]|1[0-9]|2[0-3]):[0-5][0-9]-([0-9]|1[0-9]|2[0-3]):[0-5][0-9][|][0-9]*[1-9][0-9]*$/,
  198.           inputErrorMessage: '格式不正确',
  199.           closeOnClickModal:false,
  200.         }).then(({ value }) => {
  201.           this.changemsg.msg.push(value+'人')
  202.           this.$message({
  203.             type: 'success',
  204.             message: '添加成功'
  205.           });
  206.         }).catch(() => {
  207.           this.$message({
  208.             type: 'info',
  209.             message: '取消添加'
  210.           });       
  211.         });
  212.     }
  213.   }
  214. };
  215. </script>
  216.  
  217. <!-- Add "scoped" attribute to limit CSS to this component only -->
  218. <style>
  219. .el-calendar-table thead th:before{
  220.     content: '周';
  221. }
  222.   .el-calendar__title{
  223.     margin-left: 50%;
  224.     transform: translate(-50%);
  225.     font-size: 1.5em;
  226.     font-weight: 500;
  227.   }
  228.   .el-calendar__button-group{
  229.     margin-right: 20%;
  230.   }
  231.   .el-calendar-table .el-calendar-day{
  232.     height: 100px;
  233.   }
  234.   .el-calendar-table thead th{
  235.     font-weight: 500;
  236.   }
  237. </style>
  238. <style scoped>
  239. .main{
  240.   width: 80%;
  241. }
  242. .threetype{
  243.   position: absolute;
  244.   left: 65%;
  245.   top: 10.5%;
  246.   font-size: 13px;
  247. }
  248. .typeflag{
  249.   height: 8px;
  250.   width: 8px;
  251.   display: inline-block;
  252.   border-radius: 50%; 
  253. }
  254. .item{
  255.   position: relative;
  256. }
  257. .top{
  258.   height: 10px;
  259.   font-size: 13px;
  260. }
  261. .center{
  262.   position: absolute;
  263.   width: 112%;
  264.   height: 20px;
  265.   line-height: 20px;
  266.   left: -10px;
  267.   margin-top: 10px;
  268.   margin-left: 0;
  269.   border-bottom: 1px dashed #EBE8EC;
  270.   font-size: 13px;
  271. }
  272. .centerone{
  273.   background: #F0F5F1;
  274.   color:#6CBE77;
  275. }
  276. .centertwo{
  277.   background: rgba(255, 255, 255, 0.1);
  278.   color:#fff;
  279. }
  280. .logo{
  281.   width: 0;
  282.   height: 0;
  283.   border: 24px solid;
  284.   border-left: 0;
  285.   transform:rotate(90deg);
  286.   display: inline-block;
  287.   position: absolute;
  288.   left: 3px;
  289.   top: -20px;
  290. }
  291. .onedate{
  292.   float: left;
  293. }
  294. .twodate{
  295.   float: right;
  296. }
  297. .flag{
  298.   height: 8px;
  299.   width: 8px;
  300.   float: right;
  301.   display: block;
  302.   position: relative;
  303.   top: 5px;
  304.   left: -5px;
  305.   border-radius: 50%; 
  306. }
  307. .flagone{
  308.   background: #ccc;
  309. }
  310. .flagtwo{
  311.   background: #28B541;
  312. }
  313. .flagthree{
  314.   background: #f00;
  315. }
  316. .unactive{
  317.    border-color: transparent transparent #F4F6F8;
  318.    top: -21px;
  319. }
  320. .active{
  321.    border-color: transparent transparent #64A7F9;
  322. }
  323. .logoimg{
  324.   height: 15px;
  325.   width: 15px;
  326.    position: absolute;
  327.   left: -8px;
  328.   top: -10px;
  329. }
  330. .ulmsg{
  331.   margin-top: 30px;
  332.   height: 50px;
  333.   overflow: hidden;
  334. }
  335. .ulmsg li{
  336.   list-style: none;
  337.   font-size: 13px;
  338.   text-align: left;
  339.   z-index: -1;
  340. }
  341. .addbtn{
  342.   position: absolute;
  343.   right: 10%;
  344.   bottom: 15%;
  345. }
  346. </style>

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

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

  

闽ICP备14008679号