index.wxml 4.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  1. <view class="flex b tb ac" wx:if="{{calendar}}">
  2. <view class="calendar b tb">
  3. <!-- 头部操作栏 -->
  4. <view
  5. wx:if="{{!config.hideHeader}}"
  6. class="handle {{config.theme}}_handle-color fsnd b lr ac pc fsnd">
  7. <view class="prev fsnd" wx:if="{{!config.weekMode}}">
  8. <text class="prev-handle iconfont icon-doubleleft fsnd" bindtap="changeDate" data-type="prev_year"></text>
  9. <text class="prev-handle iconfont icon-left" bindtap="changeDate" data-type="prev_month"></text>
  10. </view>
  11. <view class="flex date-in-handle b lr cc fsnd" bindtap="doubleClickJumpToToday">
  12. {{calendar.curYear || "--"}} 年 {{calendar.curMonth || "--"}} 月
  13. </view>
  14. <view class="flex" bindtap="doubleClickJumpToToday">
  15. <i-icon type="search" size="25" style="color: blue"></i-icon>
  16. </view>
  17. <view class="next fsnd" wx:if="{{!config.weekMode}}">
  18. <text class="next-handle iconfont icon-right" bindtap="changeDate" data-type="next_month"></text>
  19. <text class="next-handle iconfont icon-doubleright" bindtap="changeDate" data-type="next_year"></text>
  20. </view>
  21. </view>
  22. <!-- 星期栏 -->
  23. <view class="weeks b lr ac {{config.theme}}_week-color mt10">
  24. <view class="week fsnd" wx:for="{{calendar.weeksCh}}" wx:key="index" data-idx="{{index}}">{{item}}</view>
  25. </view>
  26. <!-- 日历面板主体 -->
  27. <view class="b lr wrap" bindtouchstart="calendarTouchstart" catchtouchmove="calendarTouchmove" catchtouchend="calendarTouchend">
  28. <!-- 上月日期格子 -->
  29. <view class="grid b ac pc {{config.theme}}_prev-month-date" wx:for="{{calendar.prevMonthGrids}}" wx:key="index" data-idx="{{index}}">
  30. <view class="date-wrap b cc">
  31. <view class="date">
  32. {{item.date}}
  33. </view>
  34. </view>
  35. </view>
  36. <!-- 本月日期格子 -->
  37. <view wx:for="{{calendar.dates}}" wx:key="index" data-idx="{{index}}" data-info="{{item}}" bindtap="tapDate" class="grid {{item.class ? item.class : ''}} {{config.theme}}_normal-date b ac pc">
  38. <view class="date-wrap b cc {{config.emphasisWeek && (item.week === 0 || item.week === 6) ? config.theme + '_weekend-color' : ''}}">
  39. <view class="date b ac pc {{item.class ? item.class : ''}} {{item.isToday && config.highlightToday ? config.theme + '_today' : ''}} {{item.choosed ? config.theme + '_choosed' : ''}} {{item.disable ? config.theme + '_date-disable' : ''}} {{config.chooseAreaMode ? 'date-area-mode' : ''}} {{calendar.todoLabelCircle && item.showTodoLabel && !item.choosed ? config.theme + '_todo-circle todo-circle' : '' }}">
  40. {{config.markToday && item.isToday ? config.markToday : item.date}}
  41. <view
  42. wx:if="{{(config.showLunar && item.lunar && !item.showTodoLabel) || (item.showTodoLabel && calendar.todoLabelPos !== 'bottom') || config.showHolidays}}"
  43. class="date-desc {{config.theme}}_date-desc date-desc-bottom {{(item.choosed || item.isToday) ? 'date-desc-bottom-always' : ''}} {{item.disable ? config.theme + '_date-desc-disable' : ''}}">
  44. <text class="{{config.showHolidays && !item.showTodoLabel && item.label && !item.choosed ? config.theme + '_date-desc-lunar' : ''}} {{item.type === 'festival' ? config.theme + '_festival' : ''}}">{{item.label || item.lunar.Term || item.lunar.IDayCn}}</text>
  45. </view>
  46. <view
  47. wx:if="{{item.showTodoLabel && !calendar.todoLabelCircle}}"
  48. class="{{item.todoText ? 'date-desc' : config.theme + '_todo-dot todo-dot'}} {{config.showLunar ? config.theme + '_date-desc-lunar' : ''}} {{calendar.todoLabelPos === 'bottom' ? 'date-desc-bottom todo-dot-bottom' : 'date-desc-top todo-dot-top'}} {{calendar.showLabelAlways && item.choosed && calendar.todoLabelPos === 'bottom' ? 'date-desc-bottom-always todo-dot-bottom-always' : ''}} {{calendar.showLabelAlways && item.choosed && calendar.todoLabelPos === 'top' ? 'date-desc-top-always todo-dot-top-always' : ''}}"
  49. style="background-color: {{item.todoText ? '' : item.color || calendar.todoLabelColor}}; color: {{item.color}}">
  50. {{item.todoText}}
  51. </view>
  52. </view>
  53. </view>
  54. </view>
  55. <!-- 下月日期格子 -->
  56. <view class="grid b ac pc {{config.theme}}_next-month-date" wx:for="{{calendar.nextMonthGrids}}" wx:key="index" data-idx="{{index}}">
  57. <view class="date-wrap b cc">
  58. <view class="date">
  59. {{item.date}}
  60. </view>
  61. </view>
  62. </view>
  63. </view>
  64. </view>
  65. </view>