缁忚繃澶у鐨勫偓淇冿紝鏃ュ涓€鏃ワ紝vue3-hash-calendar缁堜簬鍦ㄤ粖澶╄癁鐢熶簡銆傛寜鐓ф儻渚嬶紝鍏堟壂鎻忔覆鏌撴紨绀轰笂鐨勪簩缁寸爜鎴栬€呬娇鐢ㄦ祻瑙堝櫒鐨勬墜鏈烘ā寮忔煡鐪嬶細https://www.hxkj.vip/demo/calendar/馃帀濡傛灉浣犺寰楀ソ鐢紝鍙互缁欎釜star鍝~馃帀浠撳簱鍦板潃github锛歨ttps://github.com/TangSY/vue3-hash-calendar鐮佷簯gitee锛歨ttps://gitee.com/HashTang/vue3-hash-calendar鍏朵粬鐗堟湰vue2.x鐗堟湰锛歨ttps://github.com/TangSY/vue-hash-calendarreact鐗堟湰锛歨ttps://github.com/TangSY/react-hash-calendarvue3-hash-calendar鍩轰簬vue3寮€鍙戠殑鏃ュ巻缁勪欢.X鏀寔鎵嬪娍婊戝姩鎿嶄綔鍘熺敓js寮€鍙戯紝涓嶄粙缁嶇涓夋柟搴撴敮鎸佸勾鏈堝揩閫熷垏鎹笂涓嬫粦鍔ㄥ垏鎹㈠懆/鏈堟ā寮忋€愬懆妯″紡涓嬨€戝乏鍙虫粦鍔ㄥ垏鎹笂涓€涓懆/涓嬪懆銆愭湀妯″紡銆戝乏鍙虫粦鍔ㄥ垏鎹笂鏈?涓嬫湀瀹夎璇存槑npmi-Svue3-hash-calendar//鍏ュ彛鏂囦欢锛坢ain.js锛変腑锛屽鍏ョ粍浠跺簱importvueHashCalendarfrom'vue3-hash-calendar'//寮曞叆缁勪欢CSS鏍峰紡import'vue3-hash-calendar/lib/style.css'constapp=createApp(App);//娉ㄥ唽缁勪欢搴揳pp.use(vueHashCalendar);//鍦╒UE鏂囦欢涓紩鍏ョ粍浠?vue-hash-calendar/>CDNimport//鍦╥ndex.html涓坊鍔犲涓嬪唴瀹逛袱涓狢DN閾炬帴锛歫sCDN:https://cdn.jsdelivr.net/npm/vue3-hash-calendar@{version}/lib/vue-hash-calendar.umd.jscssCDN:https://cdn.jsdelivr.net/npm/vue3-hash-calendar@{version}/lib/style.css//鐒跺悗鍦╳ebpack閰嶇疆涓紝娣诲姞濡備笅閰嶇疆銆俥xternals:{'vue-hash-calendar':'VueHashCalendar'}锛岄粯璁ら渶瑕丄PI灞炴€ф弿杩扮被鍨嬨€俈isible鎺у埗鏃ュ巻缁勪欢鐨勬樉绀烘垨闅愯棌銆傞渶瑕佷娇鐢╲-model:visibleBooleanfalse鎴杝crollChangeDate鏉ユ帶鍒舵粦鍔―ateBooleantrue鏃舵槸鍚︿慨鏀归€変腑鐨勩€傛ā鍨嬫棩鍘嗙粍浠朵互浣曠褰㈠紡鏄剧ず銆俰nline锛氬唴鑱旀ā寮忋€俤ialog:寮圭獥鏂瑰紡StringinlineNodefaultDatetime鎸囧畾榛樿鏃堕棿銆侱ate褰撳墠鏃堕棿鍚inDate鎸囧畾鏃ュ巻鐨勬渶灏忔棩鏈熻寖鍥达紝璁剧疆鍚庢棩鍘嗗彧鑳藉湪姝よ寖鍥村唴婊戝姩銆侱ate--nomaxDate鎸囧畾鏃ュ巻鐨勬渶澶ф棩鏈熻寖鍥达紝璁剧疆鍚庢棩鍘嗗彧鑳藉湪姝よ寖鍥村唴婊戝姩銆傛棩鏈?-鏃犳牸寮忓綋鏃ユ湡纭畾鍚庯紝鍥炶皟浜嬩欢杩斿洖鐨勬棩鏈熸牸寮忋€傚"YY/MM/DDhh:mm","DDYY鏈圡M鏃?褰撳墠鏃堕棿hh鏃秏m鍒?,"MMDD,YYathh:mmF"StringYY/MM/DDhh:mm鍚eekStart浣滀负姣忎釜鏃ュ巻鍛ㄧ殑璧峰鍛ㄧ殑鏄熸湡鍑犮€俹ptional['sunday','monday','tuesday','wednesday','thursday','friday','saturday']Stringsunday鍚ickerType閫夋嫨鍣ㄧ被鍨媎atetime:date+timedate:datetime:timeStringdatetime鍚howTodayButton鏄惁鏄剧ず浠婃棩杩斿洖鎸夐挳Booleantrue鍚sShowWeekView鏄惁浠ュ懆瑙嗗浘鏄剧ず缁勶紝闇€瑕佷娇鐢╲-model:isShowWeekViewBooleanfalse鍚sShowArrow妯″瀷鏃舵槸鍚︽樉绀烘寚绀虹澶达紙鏃ュ巻涓嬫柟鐨勫皬绠ご锛夌瓑浜庡唴鑱擝ooleanfalse鍚sShowAction鏄惁鏄剧ず鏃ュ巻缁勪欢鎿嶄綔鏍忥紙鏍囬鏍忥級Booleantrue鍚sShowNotCurrentMonthDay鏄惁鏄剧ず鏃ュ巻涓殑闈炴湀浠芥棩鏈燂紙鏃ユ湡鐨勭伆鑹查儴鍒嗭級Booleantrue鍚isabledWeekView绂佺敤鍛ㄨ鍥撅紙璁剧疆鍚嶣ooleanfalseNodisabledDate璁剧疆鏃ユ湡鐨勭鐢ㄧ姸鎬侊紝鍙傛暟涓哄綋鍓嶆棩鏈燂紝闇€瑕佽繑鍥濨oolean(disablethedateandreturntrue)Function---NodisabledTime璁剧疆鏃堕棿鐨刣isabled鐘舵€侊紝鍙傛暟涓哄綋鍓嶆棩鏈燂紝闇€瑕佽繑鍥濨oolean锛坉isablethetime闇€瑕佽繑鍥瀟rue锛塅unction---NodisabledScroll璁剧疆鏃ュ巻鐨勭鐢ㄦ粦鍔ㄦ柟鍚戙€傚彲閫塠'left','right','up','down','horizo鈥嬧€媙tal','vertical',true,false]銆備换浣曚竴涓兘鎺у埗涓€涓柟鍚戯紝鑰宼rue鍜宖alse鎺у埗鎵€鏈夋柟鍚戙€侭oolean,StringfalseNomarkDate闇€瑕佹爣璁扮殑鏃ユ湡锛屽彲浠ユ牴鎹笉鍚岀殑棰滆壊鍜屼笉鍚岀殑鏍囪绫诲瀷杩涜鍒嗙粍锛堜笉鍒嗙粍榛樿钃濊壊锛夈€傚锛歔{color:'red',date:['2019/02/25']},{color:'blue',type:'dot',date:['2019/01/20']},'2019/03/20']Array[]NomarkType鏍囪鍥炬绫诲瀷dot:smalldot(鍦ㄦ棩鏈熶笅鏂圭敤灏忓渾鐐规爣璁?circle:smallcircle(鏃ユ湡琚竴涓皬鍦嗗寘鍥?dot+circle:涓よ€呴兘鐢ㄥ皬鍦嗙偣鍜屽渾鍦圡arkStringdot娌℃湁minuteStep闂撮殧鏃堕棿銆傦紙鍒嗘锛塏umber1lang娌℃湁閫夋嫨璇█鐗堟湰銆傚彲鐢ㄥ€硷細['CN','EN']StringCN鏃燾hangeYearFast鏀寔鐐瑰嚮鎿嶄綔鏍忥紙鏍囬鏍忥級鏃ユ湡鍖哄煙蹇€熷垏鎹㈠勾浠紹ooleanfalse鏃爐hemeColor鐢ㄤ簬淇敼鏃ュ巻鐨勪富棰樿壊{'涓昏壊'锛氬瓧绗︿覆锛?鑳屾櫙棰滆壊'锛氬瓧绗︿覆锛?涓昏瀛椾綋棰滆壊'锛氬瓧绗︿覆锛?鍓瓧浣撻鑹?锛氬瓧绗︿覆锛?disabled-bg-color'锛氬瓧绗︿覆锛?disabled-font-color':string;}---nodisabledClassName鏃ユ湡绂佺敤鏃剁殑className銆傜敤浜庝慨鏀规棩鏈熺鐢ㄦ椂鐨勯粯璁ゆ牱寮廠tring---nonotCurrentMonthDayClassName涓嶆槸褰撳墠鏄剧ず鏈堜唤鏃ユ湡鐨刢lassName锛堜緥濡傛棩鍘嗗墠鍑犲ぉ鍜屽悗鍑犲ぉ鐨勭伆鑹查儴鍒嗭級銆傜敤浜庝慨鏀瑰綋鏈堥潪褰撳墠鏄剧ず鏃ユ湡鐨勯粯璁ゆ牱寮廠tring---閫夋嫨鏃ユ湡鏃禢ocheckedDayClassNameclassName銆傜敤浜庝慨鏀归€夋嫨鏃ユ湡鏃剁殑榛樿鏍峰紡String---notodayClassName浠婂ぉ鏃ユ湡鐨刢lassName銆傜敤浜庝慨楗颁粖澶╂棩鏈熺殑榛樿鏍峰紡String---鍚irstDayOfMonthClassName姣忔湀绗竴澶╃殑className銆傜敤浜庝慨鏀规瘡鏈堢涓€澶╃殑榛樿鏍峰紡String---鍚︿簨浠朵簨浠跺悕绉版弿杩板弬鏁癱hange鏃ユ湡鍙樺寲鏃惰Е鍙戣浜嬩欢銆?杩斿洖鐨勬棩鏈熸牸寮忓彇鍐充簬format灞炴€?(date:褰撴棩鏈熸敼鍙樻椂锛岄€夋嫨鐨勬棩鏈?褰撶‘璁ゆ寜閽鐐瑰嚮鏃讹紝瑙﹀彂璇ヤ簨浠讹紝璇ユ寜閽粎鍦ㄥ璇濇妯″紡涓嬪彲鐢ㄣ€?杩斿洖鏃ユ湡鐨勬牸寮忓彇鍐充簬format灞炴€?(date:褰撶‘璁ゆ寜閽鐐瑰嚮鏃讹紝閫夋嫨鐨勬棩鏈?褰撴棩鏈熻鐐瑰嚮鏃讹紝瑙﹀彂璇ヤ簨浠躲€?杩斿洖鐨勬棩鏈熸牸寮忓彇鍐充簬format灞炴€?(date:褰撳墠鐐瑰嚮鐨勬棩鏈?touchstartcalendarslidestart浜嬩欢锛屼笌鍘熺敓浜嬩欢鐩稿悓銆?event:touchevent)touchmove鏃ュ巻婊戝姩绉诲姩浜嬩欢锛屽悓鍘熶簨浠躲€?event:touchevent)touchend鏃ュ巻婊戝姩缁撴潫浜嬩欢锛屽悓鍘熺敓浜嬩欢銆?event:touchevent)slidechange鏃ュ巻婊戝姩鐨勬柟鍚戙€傝繑鍥炲€硷細鍙炽€佸乏銆佷笂銆佷笅銆?direction:婊戝姩鏂瑰悜)calendarTypeChange鏃ュ巻鏄剧ず绫诲瀷鍒囨崲鏃惰Е鍙戙€傝繑鍥炲€硷細鏃ユ湡銆佹湀浠姐€佸勾浠姐€亂earRange銆傦紙绫诲瀷锛氭棩鍘嗘樉绀洪潰鏉跨被鍨嬶級SlotSlotname鎻忚堪day鑷畾涔夋棩鏈熷唴瀹广€傛瘮濡傚彲浠ョ敤鏉ユ坊鍔犲啘鍘嗕箣绫荤殑銆傞厤鍚堣嚜瀹氫箟className浣跨敤锛屾晥鏋滄洿浣筹紒鍙傛暟涓簕date,extendAttr}锛屽叾涓璭xtendAttr鍙傛暟鍖呮嫭isMarked锛堟槸鍚︽爣璁版棩鏈燂級銆乮sDisabledDate锛堟槸鍚︾鐢ㄦ棩鏈燂級銆乮sToday锛堟槸鍚︿负浠婂ぉ锛夈€乮sChecked锛堟槸鍚﹂€変腑鏃ユ湡锛夈€乮sCurrentMonthDay锛堟棩鏈熸槸鍚︿负褰撴湀鐨勬棩鏈燂級锛宨sFirstDayOfMonth锛堟棩鏈熸槸鍚︿负褰撴湀鐨勭涓€澶╋級锛屽彲浠ョ敤浜庝竴浜涚壒娈婇渶瑕佺殑鏄熸湡鏉ヨ嚜瀹氫箟鏄熸湡鐨勫唴瀹广€傛瘮濡傚彲浠ョ敤鏉ヨ嚜瀹氫箟鏄熸湡鐨勬牱寮忕瓑绛夈€傚弬鏁颁负{week}arrow鑷畾涔夊懆鏈堝垏鎹㈡椂鐨勬寚鏍囩澶淬€傚弬鏁颁负{show}锛宻how:绫诲瀷涓築oolen锛岃〃绀哄綋鍓嶅懆瑙嗗浘鏄惁涓轰粖澶┿€傝嚜瀹氫箟鈥滀粖澶┾€濇寜閽殑鏂囨湰鍐呭鍜屾牱寮忕‘璁よ嚜瀹氫箟鈥滅‘瀹氣€濇寜閽殑鏂囨湰鍐呭鍜屾牱寮忓姩浣滆嚜瀹氫箟鎿嶄綔鏍忥紙鏍囬鏍忥級鐨勫唴瀹瑰拰鏍峰紡鏂规硶鏂规硶鏂规硶鍚嶇О鎻忚堪lastMonth鍒囨崲鏃ュ巻鍒皃reviousmonthnextMonth灏嗘棩鍘嗗垏鎹㈠埌涓嬩釜鏈坙astWeek灏嗘棩鍘嗗垏鎹㈠埌涓婁竴鍛╪extWeek灏嗘棩鍘嗗垏鎹㈠埌涓嬪懆today浠婂ぉ杩斿洖銆傚綋浠婂ぉ琚鐢ㄦ椂锛屽畠涓嶄細鐢熸晥銆傚叾浠栧浣曞湪瀵硅瘽妗嗘ā寮忎笅鏄剧ず鏃ュ巻缁勪欢锛熸敞鎰忎娇鐢╲-model:visible
