\u672c\u7bc7\u6587\u7ae0\u7ed9\u5927\u5bb6\u5e26\u6765\u7684\u5185\u5bb9\u662f\u5173\u4e8e\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u5b9e\u4f8b\uff1a\u5b9e\u73b0\u81ea\u5b9a\u4e49\u65e5\u671f\u63a7\u4ef6\u7684\u4ee3\u7801\uff0c\u6709\u4e00\u5b9a\u7684\u53c2\u8003\u4ef7\u503c\uff0c\u6709\u9700\u8981\u7684\u670b\u53cb\u53ef\u4ee5\u53c2\u8003\u4e00\u4e0b\uff0c\u5e0c\u671b\u5bf9\u4f60\u6709\u6240\u5e2e\u52a9\u3002<\/p>\n
\u6700\u8fd1\u5728\u7814\u7a76\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\uff0c\u9700\u8981\u5b9e\u73b0\u4e00\u4e2a\u81ea\u5b9a\u4e49\u65e5\u671f\u7684\u529f\u80fd\uff0c\u7c7b\u4f3c\u4e8e\u732b\u773capp\u4e0a\u9009\u62e9\u65e5\u671f\uff0c\u53ef\u4ee5\u6309\u65e5\u3001\u6309\u5468\u3001\u6309\u6708\u3001\u6309\u5e74\u3001\u81ea\u5b9a\u4e49\u65e5\u671f\uff0c\u4e3a\u6b64\u7279\u5730\u5c06\u5176\u5199\u6210\u4e86\u4e00\u4e2a\u7ec4\u4ef6\uff0c\u4f9b\u6709\u9700\u8981\u7684\u670b\u53cb\u53c2\u8003\u3002
\u672c\u4eba\u6240\u7528\u6846\u67b6\u662fwepy,\u6240\u4ee5\u6b64\u7ec4\u4ef6\u7ed3\u6784\u4e3awepy\u4ee3\u7801\u7ed3\u6784\u3002<\/p>\n
\u5927\u81f4\u4ecb\u7ecd\uff1a
1.\u6309\u65e5\u7684\u65e5\u5386\u63a7\u4ef6\u91c7\u7528\u7684\u6781\u70b9\u65e5\u5386\u63d2\u4ef6\uff0c\u8be6\u60c5\u8bf7\u770b\uff1ahttps:\/\/github.com\/czcaiwj\/calendar\uff1b
2.\u7ec4\u4ef6\u4e2d\u6240\u7528\u5230\u7684\u4e00\u4e9b\u7ec4\u4ef6\u4e3aivew weapp\u7ec4\u4ef6\uff0c\u8be6\u60c5\u4f7f\u7528\u8bf7\u770b\u6211\u7684\u53e6\u4e00\u7bc7\u5206\u4eab\uff1ahttps:\/\/www.jianshu.com\/p\/e07b7cf5e494\uff1b
3.\u7ec4\u4ef6\u4e2d\u6309\u5468\u9009\u62e9\uff0c\u5468\u6211\u662f\u4ece2017\u5e74\u81f3\u4eca\u53d6\u7684\uff0c\u5177\u4f53\u5b9e\u73b0\u53ef\u770b\u6211\u53e6\u4e00\u7bc7\u5206\u4eab\uff1ahttps:\/\/www.jianshu.com\/p\/5112df795162\uff1b\u5728\u672c\u7bc7onLoad()\u65b9\u6cd5\u91cc\u4e5f\u6709\u5b9e\u73b0\uff1b\u56e0\u672c\u4eba\u5f00\u53d1\u9700\u8981\uff0c\u8bbe\u5b9a\u529f\u80fd\u4e3a\u6309\u5468\u53ef\u591a\u9009\uff0c\u8fd9\u4e2a\u53ef\u4ee5\u6839\u636e\u81ea\u8eab\u5f00\u53d1\u9700\u6c42\u8c03\u6574\uff1b
4.\u672c\u7ec4\u4ef6\u65f6\u95f4\u9ed8\u8ba4\u4ece17\u5e74\u5f00\u59cb\u81f3\u4eca\uff0c\u4e5f\u53ef\u6839\u636e\u81ea\u8eab\u5b9e\u9645\u9700\u6c42\u8c03\u6574\u3002<\/p>\n
\u5b9e\u73b0\u6548\u679c\uff1a<\/p>\n
<\/p>\n
\u4ee3\u7801\u5982\u4e0b\uff1a<\/p>\n
<style>\n .home {\n height: 100%;\n .calendar-header {\n font-size: large;\n color: #406BF8;\n }\n .calendar-board {\n color: #406BF8;\n }\n .week_year_style {\n font-size: 30 rpx;\n padding: 20 rpx 15 rpx;\n text-align: center;\n }\n .week_selectyear_style {\n background-color: #fff;\n color: #406BF8;\n }\n .calendar {\n background-color: #fcfcfc;\n \/\/padding-top: 10px;\n }\n }\n<\/style><template>\n <view>\n <i-tabs>\n <i-tab><\/i-tab>\n <i-tab><\/i-tab>\n <i-tab><\/i-tab>\n <i-tab><\/i-tab>\n <i-tab><\/i-tab>\n <\/i-tabs>\n <view>\n <calendar><\/calendar>\n <\/view>\n <view>\n <view>\n <view>\n <block>\n <view>{{item + '\u5e74'}}\n <\/view>\n <\/block>\n <\/view>\n <scroll-view>\n <i-cell-group>\n <block>\n <i-cell>\n <i-icon><\/i-icon>\n <\/i-cell>\n <\/block>\n\n <\/i-cell-group>\n <\/scroll-view>\n <\/view>\n <\/view>\n\n <view>\n <view>\n <view>\n <block>\n <view>{{item + '\u5e74'}}\n <\/view>\n <\/block>\n\n <\/view>\n <scroll-view>\n <i-cell-group>\n <block>\n <i-cell>\n <i-icon><\/i-icon>\n <\/i-cell>\n <\/block>\n\n <\/i-cell-group>\n <\/scroll-view>\n <\/view>\n <\/view>\n\n <view>\n <i-cell-group>\n <block>\n <i-cell>\n <i-icon><\/i-icon>\n <\/i-cell>\n <\/block>\n\n <\/i-cell-group>\n <\/view>\n\n <view>\n <calendar><\/calendar>\n <\/view>\n\n <\/view><\/template><script>\n import wepy from 'wepy';\n\n const MONTHS = ['Jan.', 'Feb.', 'Mar.', 'Apr.', 'May.', 'June.', 'July.', 'Aug.', 'Sept.', 'Oct.', 'Nov.', 'Dec.'];\n\n export default class TabsContent extends wepy.component {\n props = {\n openDateModal: {\n type: Boolean,\n default: false,\n twoWay: true\n },\n dateSelect: {\n type: String,\n default: '',\n twoWay: true\n },\n dateFilter: {\n type: String,\n default: '',\n twoWay: true\n },\n filterWeekArray: {\n type: String,\n default: '',\n twoWay: true\n },\n filterWeekSelect: {\n type: String,\n default: '',\n twoWay: true\n }\n };\n data = {\n currentTab: '\u6309\u65e5', \/\/Tabs\u9875\u5207\u6362\n\n year: new Date().getFullYear(), \/\/ \u5e74\u4efd\n month: new Date().getMonth() + 1, \/\/ \u6708\u4efd\n day: new Date().getDate(),\n str: MONTHS[new Date().getMonth()], \/\/ \u6708\u4efd\u5b57\u7b26\u4e32\n\n days_style: [{month: 'current', day: new Date().getDate(), color: '#fff', background: '#eb4986'}], \/\/\u6309\u65e5\u9009\u4e2d\u65e5\u671f\u6837\u5f0f\n selectDate: [], \/\/\u6309\u65e5\u9009\u62e9\u7684\u65e5\u671f\n\n yearArray: [], \/\/\u4ece2017\u5e74\u8d77\u81f3\u4eca\n weeksYears: new Date().getFullYear(), \/\/\u6309\u5468\u9009\u62e9\u4e86\u54ea\u4e00\u5e74\n weeksArray: {}, \/\/\u4ece2017\u5e74\u8d77\u81f3\u4eca\u7684\u6240\u6709\u5468\n selectWeekArray: [], \/\/\u9009\u62e9\u7684\u5468\n\n fullMonthArray: [12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1],\n currentMonthArray: [], \/\/\u4eca\u5e74\u8fc7\u4e86\u51e0\u4e2a\u6708\n monthYear: new Date().getFullYear(), \/\/\u6309\u6708\u9009\u62e9\u4e86\u54ea\u4e00\u5e74\n selectMonth: 0, \/\/\u6309\u6708\u9009\u62e9\u4e86\u54ea\u4e00\u6708\n\n selectYear: 0, \/\/\u6309\u5e74\u9009\u62e9\u4e86\u54ea\u4e00\u5e74\n\n define_days_style: [{month: 'current', day: new Date().getDate(), color: '#fff', background: '#eb4986'}], \/\/\u81ea\u5b9a\u4e49\u65e5\u671f\u683c\u5f0f\n selectDate_define: []\n\n\n };\n\n methods = {\n handleChangeTab({detail}) {\n this.currentTab = detail.key\n this.dateFilter = this.currentTab\n },\n\n dayClick: function (event) {\n let style = (event.detail.year == this.year && event.detail.month == this.month) ?\n [{month: 'current', day: new Date().getDate(), color: '#fff', background: '#eb4986'},\n {month: 'current', day: event.detail.day, color: '#fff', background: '#406BF8'}] :\n [{month: 'current', day: event.detail.day, color: '#fff', background: '#406BF8'}]\n this.days_style = style\n this.selectDate = [event.detail.year, event.detail.month, event.detail.day]\n this.openDateModal = false\n this.dateFilter = this.currentTab\n this.dateSelect = [event.detail.year, event.detail.month, event.detail.day]\n },\n next: function (event) {\n if (event.detail.currentYear == this.year && event.detail.currentMonth == this.month)\n this.days_style = [{\n month: 'current',\n day: new Date().getDate(),\n color: '#fff',\n background: '#eb4986'\n }]\n else this.days_style = [vent.detail.year, event.detail.month, event.detail.day]\n },\n prev: function (event) {\n this.days_style = []\n },\n\n changeWeekYear(year) {\n this.weeksYears = year\n },\n handleWeeksChange(weekIndex) {\n this.weeksArray[this.weeksYears][weekIndex].select = !this.weeksArray[this.weeksYears][weekIndex].select\n\n if (this.selectWeekArray[this.weeksYears]) {\n let bool = this.selectWeekArray[this.weeksYears].some(index => index == weekIndex)\n if (bool) { \/\/\u771f \u5df2\u5b58\u5728 delete\n \/\/if(this.selectWeekArray[this.weeksYears].length>1)\n this.selectWeekArray[this.weeksYears].remove(weekIndex)\n } else { \/\/\u5047 push\n this.selectWeekArray[this.weeksYears].push(weekIndex)\n this.selectWeekArray[this.weeksYears].sort()\n }\n } else {\n let temp = {}\n temp[this.weeksYears] = []\n let a = [weekIndex]\n temp[this.weeksYears] = a\n this.selectWeekArray = temp\n }\n this.filterWeekSelect = this.selectWeekArray \/\/\u56de\u8c03\u5230\u7236\u7ea7\u9875\u9762\n },\n\n changeMonthYear(year) {\n this.monthYear = year\n },\n handleMonthChange(month) {\n this.selectMonth = month\n this.openDateModal = false\n this.dateFilter = this.currentTab\n this.dateSelect = [this.monthYear, this.selectMonth]\n },\n\n handleYearChange(year) {\n this.selectYear = year\n this.openDateModal = false\n this.dateFilter = this.currentTab\n this.dateSelect = [year]\n },\n\n dayClick_define: function (event) {\n let style = []\n if (this.selectDate_define.length == 0) { \/\/\u7b2c\u4e00\u6b21\u70b9\u51fb\n this.selectDate_define.push([event.detail.year, event.detail.month, event.detail.day])\n if (event.detail.year == this.year && event.detail.month == this.mounth) {\n style = [{month: 'current', day: new Date().getDate(), color: '#fff', background: '#eb4986'},\n {month: 'current', day: event.detail.day, color: '#fff', background: '#406BF8'}]\n }\n this.define_days_style = style\n } else if (this.selectDate_define.length == 1) { \/\/\u9009\u4e2d\u7b2c\u4e8c\u4e2a\u65e5\u671f\u5c31\u5173\u95ed\u9875\u9762\n this.selectDate_define.push([event.detail.year, event.detail.month, event.detail.day])\n this.define_days_style.push({\n month: 'current',\n day: event.detail.day,\n color: '#fff',\n background: '#406BF8'\n })\n\n this.openDateModal = false\n this.dateFilter = this.currentTab\n this.dateSelect = this.selectDate_define\n } else { \/\/\u91cd\u65b0\u81ea\u5b9a\u4e49\u65e5\u671f\n this.selectDate_define = [[event.detail.year, event.detail.month, event.detail.day]]\n style = [{month: 'current', day: new Date().getDate(), color: '#fff', background: '#eb4986'},\n {month: 'current', day: event.detail.day, color: '#fff', background: '#406BF8'}]\n this.define_days_style = style\n }\n },\n next_define: function (event) {\n if (event.detail.currentYear == this.year && event.detail.currentMonth == this.month)\n this.define_days_style = [{\n month: 'current',\n day: new Date().getDate(),\n color: '#fff',\n background: '#eb4986'\n }]\n else this.define_days_style = [event.detail.year, event.detail.month, event.detail.day]\n },\n prev_define: function (event) {\n this.define_days_style = []\n },\n\n };\n\n onLoad() {\n let currentYear = new Date().getFullYear()\n let currentMonth = new Date().getMonth() + 1\n for (var i = currentYear; i >= 2017; i--) {\n this.yearArray.push(i)\n }\n for (var i = currentMonth; i >= 1; i--) {\n this.currentMonthArray.push(i)\n }\n\n let weeksArray = {} \/\/\u8ba1\u7b972017\u5e74\u81f3\u4eca\u7684\u6240\u6709\u5468\n for (var i = 0; i <= this.yearArray.length; i++) {\n let index = 1;\n let temp = []\n if (i == 0) { \/\/\u4eca\u5e74\n for (let i of createWeeks(this.yearArray[i])) {\n let start = i[0],\n end = i[1];\n if (end <= new Date().getTime() || (start <= new Date().getTime() && end >= new Date().getTime())) {\n let a = start <= new Date().getTime() && end >= new Date().getTime() ?\n '\u7b2c' + formatDig(index++) + '\u5468\uff08' + formatDate(start) + '\u65e5-' + formatDate(end) + '\u65e5)' + ' \u672c\u5468' :\n '\u7b2c' + formatDig(index++) + '\u5468\uff08' + formatDate(start) + '\u65e5-' + formatDate(end) + '\u65e5)'\n temp.push({'weeks': a, 'select': false})\n }\n }\n } else {\n for (let i of createWeeks(this.yearArray[i])) {\n let start = i[0],\n end = i[1];\n let a = '\u7b2c' + formatDig(index++) + '\u5468\uff08' + formatDate(start) + '\u65e5-' + formatDate(end) + '\u65e5)'\n temp.push({'weeks': a, 'select': false})\n }\n }\n if (this.yearArray[i] != undefined) {\n weeksArray[this.yearArray[i]] = temp.reverse();\n }\n }\n this.weeksArray = weeksArray\n this.filterWeekArray = weeksArray\n\n }\n }\n\n function formatDig(num) {\n \/\/return num>9?''+num:'0'+num;\n return num;\n }\n\n function formatDate(mill) {\n var y = new Date(mill);\n let raws = [\n \/\/y.getFullYear(),\n formatDig(y.getMonth() + 1),\n formatDig(y.getDate()),\n \/\/y.getDay()||7 \/\/\u83b7\u53d6\u661f\u671f\u51e0\n ];\n \/\/let format=['\u5e74','\u6708','\u65e5 \u661f\u671f'];\n let format = ['\u6708', '\u65e5'];\n return String.raw({raw: raws}, ...format);\n }\n\n function* createWeeks(year) {\n const ONE_DAY = 24 * 3600 * 1000;\n let start = new Date(year, 0, 1),\n end = new Date(year, 11, 31);\n let firstDay = start.getDay() || 7,\n lastDay = end.getDay() || 7;\n let startTime = +start,\n endTime = startTime + (7 - firstDay) * ONE_DAY,\n _endTime = end - (7 - lastDay) * ONE_DAY;\n yield [startTime, endTime];\n startTime = endTime + ONE_DAY;\n endTime = endTime + 7 * ONE_DAY;\n while (endTime < _endTime) {\n yield [startTime, endTime];\n startTime = endTime + ONE_DAY;\n endTime = endTime + 7 * ONE_DAY;\n }\n yield [startTime, +end];\n }\n\n Array.prototype.remove = function (val) {\n var index = this.indexOf(val);\n if (index > -1) {\n this.splice(index, 1);\n }\n };\n<\/script><\/pre>\n \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
\u76f8\u5173\u63a8\u8350\uff1a<\/p>\n<\/p>\n
\u4ee5\u4e0a\u5c31\u662f\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u5b9e\u4f8b\uff1a\u5b9e\u73b0\u81ea\u5b9a\u4e49\u65e5\u671f\u63a7\u4ef6\u7684\u4ee3\u7801\u7684\u8be6\u7ec6\u5185\u5bb9\uff0c\u66f4\u591a\u8bf7\u5173\u6ce8\u7c73\u4e91\u5176\u5b83\u76f8\u5173\u6587\u7ae0\uff01<\/p>\n","protected":false},"excerpt":{"rendered":"
\u672c\u7bc7\u6587\u7ae0\u7ed9\u5927\u5bb6\u5e26\u6765\u7684\u5185\u5bb9\u662f\u5173\u4e8e\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u5b9e\u4f8b\uff1a\u5b9e\u73b0\u81ea\u5b9a\u4e49\u65e5\u671f\u63a7\u4ef6\u7684\u4ee3\u7801\uff0c\u6709\u4e00\u5b9a\u7684\u53c2\u8003\u4ef7\u503c\uff0c\u6709\u9700\u8981\u7684\u670b\u53cb\u53ef\u4ee5\u53c2\u8003\u4e00\u4e0b\uff0c\u5e0c\u671b\u5bf9\u4f60\u6709\u6240\u5e2e\u52a9\u3002 \u6700\u8fd1\u5728\u7814\u7a76\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\uff0c\u9700\u8981\u5b9e\u73b0\u4e00\u4e2a\u81ea\u5b9a\u4e49\u65e5\u671f\u7684\u529f\u80fd\uff0c\u7c7b\u4f3c\u4e8e\u732b\u773capp\u4e0a\u9009\u62e9\u65e5\u671f\uff0c\u53ef\u4ee5\u6309\u65e5\u3001\u6309\u5468\u3001\u6309\u6708\u3001\u6309\u5e74\u3001\u81ea\u5b9a\u4e49\u65e5\u671f\uff0c\u4e3a\u6b64\u7279\u5730\u5c06\u5176\u5199\u6210\u4e86\u4e00\u4e2a\u7ec4\u4ef6\uff0c\u4f9b\u6709\u9700\u8981\u7684\u670b\u53cb\u53c2\u8003\u3002\u672c\u4eba\u6240\u7528\u6846\u67b6\u662fwepy,\u6240\u4ee5\u6b64\u7ec4\u4ef6\u7ed3\u6784\u4e3awepy\u4ee3\u7801\u7ed3\u6784\u3002 \u5927\u81f4\u4ecb\u7ecd\uff1a1.\u6309\u65e5\u7684\u65e5\u5386\u63a7\u4ef6\u91c7\u7528\u7684\u6781\u70b9\u65e5\u5386\u63d2\u4ef6\uff0c\u8be6\u60c5\u8bf7\u770b\uff1ahttps:\/\/github.com\/czcaiwj\/calendar\uff1b2.\u7ec4\u4ef6\u4e2d\u6240\u7528\u5230\u7684\u4e00\u4e9b\u7ec4\u4ef6\u4e3aivew weapp\u7ec4\u4ef6\uff0c\u8be6\u60c5\u4f7f\u7528\u8bf7\u770b\u6211\u7684\u53e6\u4e00\u7bc7\u5206\u4eab\uff1ahttps:\/\/www.jianshu.com\/p\/e07b7cf5e494\uff1b3.\u7ec4\u4ef6\u4e2d\u6309\u5468\u9009\u62e9\uff0c\u5468\u6211\u662f\u4ece2017\u5e74\u81f3\u4eca\u53d6\u7684\uff0c\u5177\u4f53\u5b9e\u73b0\u53ef\u770b\u6211\u53e6\u4e00\u7bc7\u5206\u4eab\uff1ahttps:\/\/www.jianshu.com\/p\/5112df795162\uff1b\u5728\u672c\u7bc7onLoad()\u65b9\u6cd5\u91cc\u4e5f\u6709\u5b9e\u73b0\uff1b\u56e0\u672c\u4eba\u5f00\u53d1\u9700\u8981\uff0c\u8bbe\u5b9a\u529f\u80fd\u4e3a\u6309\u5468\u53ef\u591a\u9009\uff0c\u8fd9\u4e2a\u53ef\u4ee5\u6839\u636e\u81ea\u8eab\u5f00\u53d1\u9700\u6c42\u8c03\u6574\uff1b4.\u672c\u7ec4\u4ef6\u65f6\u95f4\u9ed8\u8ba4\u4ece17\u5e74\u5f00\u59cb\u81f3\u4eca\uff0c\u4e5f\u53ef\u6839\u636e\u81ea\u8eab\u5b9e\u9645\u9700\u6c42\u8c03\u6574\u3002 \u5b9e\u73b0\u6548\u679c\uff1a \u4ee3\u7801\u5982\u4e0b\uff1a <style> .home { height: 100%; .calendar-header { font-size: large; color: #406BF8; } .calendar-board { color: #406BF8; } .week_year_style { font-size: 30 rpx; padding: 20 rpx 15 rpx; text-align: center; } .week_selectyear_style { background-color: #fff; color: #406BF8; } .calendar { background-color: #fcfcfc; \/\/padding-top: 10px; } } <\/style><template> <view> <i-tabs> <i-tab><\/i-tab> […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[19],"tags":[],"class_list":["post-32387","post","type-post","status-publish","format-standard","hentry","category-19"],"_links":{"self":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/32387","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/comments?post=32387"}],"version-history":[{"count":0,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/32387\/revisions"}],"wp:attachment":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/media?parent=32387"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/categories?post=32387"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/tags?post=32387"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}