WeChat small program slidable week calendar component use details

WeChat small program slidable week calendar component for reference, the specific content is as follows

Look at the online last week’s calendar assembly, you got one, share it with you.

If the style is deformed, please check if there is a shared style to conflict

微信小程序可滑动周日历组件使用详解

Newly built under the Components component folder Calendarweek folder

Direct code:

Index.wxml

          {{weekday}}      {DAY.IDS}}  ->   {{day.day}}   <!--          INDEX.WXSS      / * Components / Calendarweek / index.wxss * /. date-choise {background: #fff; overflow: hidden; height: auto;}. data-month {width: 100%; align-items: center; padding: .35Rem .35Rem; Text -ALIGN: Left; Color:# 333; font-size: 38rpx;}. Date-choose-swiper {flex-growth: 1; Height: 182rpx;}. Swiper-item {display: flex; flex-direction: column;}. Weekday, .dateday { Display: Flex; Justify-Content: Space-between; Align-item; Flex-Wrap: Wrap; Flex-Wrap: 1;}. week, .day {width: 14.286%; flex- Basis: 14.286%;}. week {color: # 999; font-size: 24rpx;}. day text {position: relative; color: # 3333333;}. day .act: before {/ * circle * / content: Before {/ * Circle * / Content: BEFORE {/ * Circle * / Content: "" "; Position: Absolute; Width: 76rpx; Top: 50%; Left: 50%; -Webkit-Transform: Translate (-50%, -50%); Transform: Translate (-50%, 50%; border: 1px solid red; border-radius: 100%; Background: red; opacity: 0.1; z-index: -1;}. Day text.active {color: red} .day text.reds {color : # ff0000;} /* Start * /. Headerone {Width: 100%; Height: auto; font-size: 24rpx; / * margin: 0 30rpx; * /}. Headerone .ra {margin-right: 20 rpx;}. Headerone .radio-group {Margin: 20RPX 0 20RPX 30RPX;}. Headertwo {Width: 100%; Height: auto; font-size: 24rpx; margin-top: 10 rpx; margin-bottom: 26rpx;}. Headertwo .le Image {Width: 70 rpx; Height: 70rpx; border-radius: 10px; margin-limited: 20rpx}. HEADERTWO.RI {Flex: 1; Margin-Right: 30Rpx; Border-Radius: 6px; box-shadow: 0px 1px 6px 0PX RGBA (198, 198, 198, 0.5);}. Headertwo .ri .one {width: 100%; Padding-top: 24rpx; padding-bottom: 24rpx} .jiatwo .ri .one view .jiao {margin: 0 16rpx; border: 15rpx solid; / * margin-top: 15rpx; * / border-color: #ffffff #ffffff # b3b3b3 #fffff;}. Xi {background: red; coloR: #fffffff; padding: 3px 10px; border-radius: 6px 0px 0 6px;}. Headertwo .ri .one view view.jiaos {margin: 0 16rpx; border: 15rpx solid; margin-top: 14rpx; border-color : # b3b3b3 #ffffff #fffffff #ffff;}. Headertwo .ri .two {width: 100%; overflow: hidden; transition: all 0.5s} .body {width: 100%; / * Padding -Left: 60Rpx; * / / * padding-right: 22rpx; * / padding-top: 24rpx; padding-bottom: 24rpx;} 

Index.js
 // Components / Calendarweek / Index.jsvar Utils = Require ('./ Util.js') Component ({/ ** * Component's Properties list * / Properties: { }, / ** * Component's initial data * / data: {Valtime: 8, datelist: [], // calendar data array swipercurrent: 0, // calendar rotation is in which index location DateCurrent: new date () , // Positive date datecurrentstr: ', // Positive ID DATEmonth: 'Jan', // Positive Month DatelistArray: ['Day', 'One', '2', 'Triple', 'Four', '5', 'Six'],}, Ready: function () {var That = this; var today = utils.formattime2 (new date ()); this.setdata ({Today,}); var D = new date (); this.initdate (-5, 2, d) // Calendar component program-4 indicates the list of the way in the past 4th and right 1 indicates the method list of the past week}, / ** * component * / methods: {tiaotime (e) {let data = e.detail.value.split (" - ") VAR D = New Date (Number (Data [1]) - 1, Number (Data [2])); this.SetData ({datelist: []} this.initdate (-5, 2, d); // Calendar component program-4 left indicates that the past 4 weeks and right 1 indicates the past week}, onshow: function (e) {wx.getsysteminfo ({Success: (res) => {THIS. SetData ({WindowHeight: Res.WindowHeight, WindowWidth: Res.WindowWidth,});}});}, // Calendar Component section / / / ----------------- --------- Initdate (Left, Right, D) {var month = utils.addzero (D.getMonth) + 1), year = utils.addzero (D.Getfullyear ()), day = utils.addzero (d.Getdate ()); for (var i = left; i  currentIndex) {LastIndex === 7 && currentindex === 0? flag = true: null} else {LastIndex === 0 && currentIndex ==== 7? null: flag = true} if (flag) {key = 'NextMONTH'} if (key == ' LastMonth ') {let nowindex = currentIndex - 3; let uptime = currentIndex - 4; let a = 0; if (NowIndex  

To introduce Util.js

 // Time Format Conversion YYYY / MM / DDFUNCTION FORMATTIME (DATE) {var Year = Date.Getfullyear () VAR MONTH = DATE.GETMONTH () + 1 var day = date.getdate () var hour = date.getHours () var minute = Date.getminutes () var second = Date.getSeconds () Return [Year, Month, Day] .map (formatNumber) .join ('/') + '' + [Hour, Minute, SECond] .map (formatNumber) .join (':')} // Time Format Conversion YYYY-mm-ddfunction formattime2 (Date) {var year = Date.GetFullyear () var month = Date.getMonth () + 1 var day = DATE.GETDATE () VAR HOUR = DATE.GETHOURS () VAR minute = Date.getMinutes () var second = Date.getSeconds () Return [Year, Month, Day] .map (FormatNumber) .join ('-') } Function formatdate (DATE, SPLIT) {var year = Date.getFullyear () VAR MONTH = DATE.GETMONTH () + 1 var day = DATE.GETDATE () Return [Year, Month, Day] .map (FormatNumber) .join (split || '')} // Two-digit automatic complement fast function formatNumber (n) {n = n.to.tostring () return n [1]? N: '0' + n} // two digits Digital automatic complementing function formatNumber (n) {n = n.to.tostring () Return n [1]? N: '0' + n} // How many days after calculation, Dateaddday (D, days) {var D = New date (d); return new date (D.SetdateTDATE () + days));} // Get this Sunday date Function FirstdayInThisweek (d) {var D = new date (// console.log (formattime (Dateaddday (D, 0 - D.Getday) ())); Return Dateaddday (D, 0 - D.GetDay ());} // Judgment Type Function Type (OBJ) {var typeStr = Object.Prototype.tostring.call (obj) .split ("") [1]; return typeStr.substr (0, typeStr.length - 1) .toLowerCase ();} module.exports = {formatTime: formatTime, formatDate: formatDate, formatTime2, DateAddDay: DateAddDay, FirstDayInThisWeek: FirstDayInThisWeek, type: type, AddZero: FormatNumber,}  <= right; i++) {
 this.updateDate(utils.DateAddDay(d, i * 7));//多少天之后的
 }
 
 this.setData({
 swiperCurrent: 5,
 dateCurrent: d,
 dateCurrentStr: d.getFullYear() + '-' + month + '-' + day,
 dateMonth: month + '月',
 dateYear: year + '年',
 dateCurrentStr: year + "-" + month + "-" + day,
 });
 },
 // 获取这周从周日到周六的日期
 calculateDate(_date) {
 var first = utils.FirstDayInThisWeek(_date);
 var d = {
 'month': first.getMonth() + 1,
 'days': [],

 };
 for (var i = 0; i  Calling component < 0) { nowindex = nowindex + 8; a = 0 }
 if (uptime < 0) { uptime = uptime + 8 }

 let seltime = dateList[nowindex].days[a].ids
 var week = this.calculateDate(utils.formatTime(utils.DateAddDay(seltime, -1)));

 dateList[uptime] = week
 this.setData({
 dateList: dateList
 })

 }
 if (key == 'nextMonth') {
 let indexne = 0
 let aa = 0
 if (currentIndex == 7) { //要更新的下标
 indexne = 0
 aa = 1
 } else {
 indexne = currentIndex + 1
 aa = currentIndex + 2
 }
 if (aa == 8) {
 aa = 0
 }
 //aa 要更新的数组下标 datanex要往后查询一周的日期
 let datanex = dateList[indexne].days[6].ids
 //获取下一周的
 var week = this.calculateDate(utils.formatTime(utils.DateAddDay(datanex, 1)));
 dateList[aa] = week
 
 this.setData({
 dateList: dateList
 })
 }

 var d = this.data.dateList[currentIndex];
 let da = new Date(d.days[0].ids)
 this.setData({
 swiperCurrent: currentIndex,
 dateMonth: d.month + '月',
 dateYear: da.getFullYear()+"年"
 })

 },
 // 获得日期字符串
 getDateStr: function (arg) {
 if (utils.type(arg) == 'array') {
 return arr[0] + '-' + arr[1] + '-' + arr[2] + ' 00:00:00';
 } else if (utils.type(arg) == 'date') {
 return arg.getFullYear() + '-' + (arg.getMonth() + 1) + '-' + arg.getDate() + ' 00:00:00';
 } else if (utils.type(arg) == 'object') {
 return arg.year + '-' + arg.month + '-' + arg.day + ' 00:00:00';
 }
 },

 // 点击日历某日
 chooseDate(e) {
 var str = e.currentTarget.id;
 // console.log(str);
 this.setData({ dateCurrentStr: str });
 this.triggerEvent('mydata', { data: str })
 },
 }
}) 

// json file call “usingcomponents”: {“Calendarmonth” : “../../components/calendarweek/index” }

 page calling component  

// MYDATA triggered the event triggered the event to get the date of the current click

  Current page JS  
// js in the event mydata (e) {// can get a calendar click event Let Data = E.Detail.data console.log (data)}

More exciting calendar effects, please study reference: JavaScript calendar plug-in
The above is all the content of this article, I hope to help everyone, I hope everyone will support Tumi Clouds.
                     
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment