利用Javascript开发一个二维周视图日历(7)

日期：2020-05-11 栏目：程序人生 浏览：次

此过程要注意的问题是：mousedown 必须绑定在日历上，而 mouseup 和 mousemove 则不能绑定在日历上，具体原因已经写在上面代码注释中了。

另外需要注意，由于范围点击选择使用了 mousedown 和 mouseup 来模拟，那么日历内容区域中插入的数据部件的点击事件也要用 mousedown 和 mouseup 来模拟，因为 mouseup 触发比 click 早，如果使用 click ，会导致先触发日历上的日期点击或日期范围点击。

使用

此日历实现基于一个控件基类扩展而来，其必要功能仅为一套事件机制，可参考实现一套自定义事件机制

实测一下效果吧：

<div id="week-calendar" style="width:100%;height:80vh"></div>
<script>
var calendar = epctrl.init('WeekCalendar', {
 el: '#week-calendar',
 categoryTitle: '车辆',
 category: [{
 id: 'cate-1',
 name: '法拉利',
 content: '苏E00000'
 }, {
 id: 'cate-2',
 name: 'Lamborghini',
 content: '苏E00001'
 }, {
 id: 'cate-3',
 name: '捷豹',
 content: '苏E00002'
 }, {
 id: 'cate-4',
 name: '宾利',
 content: '苏E00003'
 }, {
 id: 'cate-5',
 name: 'SSC',
 content: '苏E00004'
 }],
 events: {
 // 日期变化时触发
 dateChanged: function (e) {
  var data = {
  start: e.startDate,
  end: e.endDate,
  };
  // 获取数据并逐个添加到日历上
  getData(data).done(function (data) {
  $.each(data, function (i, item) {
   calendar.addWidget(item);
  });
  });
 },
 // 部件重叠时触发
 widgetOccupied: function (e) {
  // 冲突时禁止继续添加
  console.error(e.widgetData.categoryId + '分类下id为' + e.widgetData.id + '的部件和现有部件有重叠，取消添加');
  e.cancel = true;
 }
 }
});
calendar.on('dateClick', function (e) {
 alert(JSON.stringify({
 '开始时间': e.startDate,
 '结束时间': e.endDate,
 '分类id': e.categoryId,
 '行索引': e.rowIndex,
 '列索引范围': e.columnIndexs
 }, 0, 4));
});
</script>

源码下载：

github

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对黑区网络的支持。