微信小程序实用组件：日历小程序（真机可用）

cyk · 发表于 2017-1-16 17:24:33

小程序很火，但是现有的很多web插件都是操作DOM的，导致不能直接使用，最近需要弄个小程序日历，故而分享出来，大家相互交流。
可以左右切换，GIF工具掉咯，就传个静态图吧，大家自己下载体验

js文件
[mw_shl_code=applescript,true]const conf = {
  data: {
// hasEmptyGrid 变量控制是否渲染空格子，若当月第一天是星期天，就不应该渲染空格子
hasEmptyGrid: false
  },
  // 控制scroll-view高度
  getSystemInfo() {
try {
   const res = wx.getSystemInfoSync();
   this.setData({
      scrollViewHeight: res.windowHeight * res.pixelRatio || 667
   });
} catch (e) {
   console.log(e);
}
  },
  // 获取当月共多少天
  getThisMonthDays(year, month) {
return new Date(year, month, 0).getDate();
  },
  // 获取当月第一天星期几
  getFirstDayOfWeek(year, month) {
return new Date(Date.UTC(year, month - 1, 1)).getDay();
  },
  // 计算当月1号前空了几个格子
  calculateEmptyGrids(year, month) {
const firstDayOfWeek = this.getFirstDayOfWeek(year, month);
let empytGrids = [];
if (firstDayOfWeek > 0) {
   for (let i = 0; i < firstDayOfWeek; i++) {
      empytGrids.push(i);
   }
   this.setData({
      hasEmptyGrid: true,
      empytGrids
   });
} else {
   this.setData({
      hasEmptyGrid: false,
      empytGrids: []
   });
}
  },
  // 绘制当月天数占的格子
  calculateDays(year, month) {
let days = [];
const thisMonthDays = this.getThisMonthDays(year, month);
for (let i = 1; i <= thisMonthDays; i++) {
   days.push(i);
}
this.setData({
   days
});
  },
  // 初始化数据
  onLoad(options) {
const date = new Date();
const cur_year = date.getFullYear();
const cur_month = date.getMonth() + 1;
const weeks_ch = ['日', '一', '二', '三', '四', '五', '六'];
this.calculateEmptyGrids(cur_year, cur_month);
this.calculateDays(cur_year, cur_month);
this.getSystemInfo();
this.setData({
   cur_year,
   cur_month,
   weeks_ch
})
  },
  // 切换控制年月
  handleCalendar(e) {
const handle = e.currentTarget.dataset.handle;
const cur_year = this.data.cur_year;
const cur_month = this.data.cur_month;
if (handle === 'prev') {
   let newMonth = cur_month - 1;
   let newYear = cur_year;
   if (newMonth < 1) {
      newYear = cur_year - 1;
      newMonth = 12;
   }

   this.calculateDays(newYear, newMonth);
   this.calculateEmptyGrids(newYear, newMonth);

   this.setData({
      cur_year: newYear,
      cur_month: newMonth
   })

} else {
   let newMonth = cur_month + 1;
   let newYear = cur_year;
   if (newMonth > 12) {
      newYear = cur_year + 1;
      newMonth = 1;
   }

   this.calculateDays(newYear, newMonth);
   this.calculateEmptyGrids(newYear, newMonth);

   this.setData({
      cur_year: newYear,
      cur_month: newMonth
   })
}
  },
  onShareAppMessage() {
return {
   title: '小程序日历',
   desc: '还是新鲜的日历哟',
   path: 'pages/index/index'
}
  }
};

Page(conf);[/mw_shl_code]
wxml文件
[mw_shl_code=applescript,true]<scroll-view scroll-y="true" class="flex box box-tb box-pack-center box-align-center" style="height: {{scrollViewHeight*2}}rpx">
  <view class="calendar pink-color box box-tb">
      <view class="top-handle fs28 box box-lr box-align-center box-pack-center">
         <view class="prev box box-rl" bindtap="handleCalendar" data-handle="prev">
            <view class="prev-handle box box-lr box-align-center box-pack-center">《</view>
         </view>
         <view class="date-area box box-lr box-align-center box-pack-center">{{cur_year || "--"}} 年 {{cur_month || "--"}} 月</view>
         <view class="next box box-lr" bindtap="handleCalendar" data-handle="next">
            <view class="next-handle box box-lr box-align-center box-pack-center">》</view>
         </view>
      </view>
      <view class="weeks box box-lr box-pack-center box-align-center">
         <view class="flex week fs28" wx:for="{{weeks_ch}}" wx:key="{{index}}" data-idx="{{index}}">{{item}}</view>
      </view>
      <view class="days box box-lr box-wrap">
         <view wx:if="{{hasEmptyGrid}}" class="grid white-color box box-align-center box-pack-center" wx:for="{{empytGrids}}" wx:key="{{index}}" data-idx="{{index}}">
         </view>
         <view class="grid white-color box box-align-center box-pack-center" wx:for="{{days}}" wx:key="{{index}}" data-idx="{{index}}">
            <view class="day {{index >= 5 && index <= 13 ? 'border-radius pink-bg' : ''}} box box-align-center box-pack-center">{{item}}</view>
         </view>
      </view>
</view>
</scroll-view>[/mw_shl_code]
附件下载

游客，如果您要查看本帖隐藏内容请回复

keyun · 发表于 2017-2-20 21:08:09

啥也不说了，感谢楼主分享哇！

F°♂ · 发表于 2017-4-27 13:48:45

啥也不说了，感谢楼主分享哇！

haowang98 · 发表于 2017-5-4 11:54:03

啥也不说了，感谢楼主分享哇！

墨未浓 · 发表于 2017-5-4 13:47:39

水水水水水水水水水水水水水水水水水水水

389529819 · 发表于 2017-6-26 16:05:53

谢谢楼主 ~

儒风艺社 · 发表于 2017-7-1 01:30:15

这个没玩过，怎么样

onlyp · 发表于 2017-8-5 13:41:41

11111111111111111111111

Ywenli · 发表于 2017-8-5 17:42:27

谢谢楼主的分享！！！！

sonicsunsky · 发表于 2017-9-16 16:55:36

感谢分享，多谢楼主

		自动登录	找回密码
密码			立即注册

微信小程序实用组件：日历小程序（真机可用）

本帖子中包含更多资源

优秀版主