利用Javascript開(kāi)發(fā)一個(gè)二維周視圖日歷

更新時(shí)間：2017年12月14日 11:39:41 作者：依韻_宵音

這篇文章主要給大家介紹了關(guān)于利用Javascript如何開(kāi)發(fā)一個(gè)二維周視圖日歷的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。

前言

本文給大家介紹了Javascript開(kāi)發(fā)二維周視圖日歷的相關(guān)內(nèi)容，即之前實(shí)現(xiàn)了一個(gè)月視圖日歷，我們今天來(lái)實(shí)現(xiàn)一個(gè)二維周視圖的日歷。

以下進(jìn)行分析其中的關(guān)鍵部分。

結(jié)構(gòu)準(zhǔn)備

不同之處在于其在日歷的基礎(chǔ)上還有一個(gè)分類軸，用于展示不同的類目，主要用于一周內(nèi)的日程安排、會(huì)議安排等。

二維則和之前單獨(dú)的有所不同，二維日歷再切換日期時(shí)不用全部重新渲染，分類是不用變的，僅僅改變顯示的日期即可。

而且由于是二維的，插入的內(nèi)容必定是同時(shí)屬于一個(gè)分類和一個(gè)時(shí)間段的，內(nèi)容肯定是可以跨越時(shí)間(即日期軸)的，因此不能直接將插入的內(nèi)容像開(kāi)始的日歷一樣直接放置在日歷的格子中。而要進(jìn)行單獨(dú)的處理。

另外，只要分類不變，日期和分類構(gòu)成的網(wǎng)格是不用重繪的。

考慮到以上情況，插入內(nèi)容的和網(wǎng)格是需要分開(kāi)來(lái)的，我將現(xiàn)成的日歷弄成一下3D效果示意:

即插入內(nèi)容的層是單獨(dú)放置在時(shí)間和分類構(gòu)成的網(wǎng)格上方的。

基于以上分析，先構(gòu)建如下基本結(jié)構(gòu):

<div class="ep-weekcalendar border">
 <!-- 頭部 -->
 <div class="ep-weekcalendar-header">
 <div class="ep-weekcalendar-header-left"></div>
 <div class="ep-weekcalendar-header-center">
 <span class="ep-weekcalendar-header-btn ep-weekcalendar-header-btn-prev"></span>
 <span class="ep-weekcalendar-title">2017年12月04日 - 10日</span>
 <span class="ep-weekcalendar-header-btn ep-weekcalendar-header-btn-next"></span>
 </div>
 <div class="ep-weekcalendar-header-right"></div>
 </div>
 <!-- 主體 -->
 <div class="ep-weekcalendar-body">
 <!-- 分類區(qū)域 -->
 <div class="ep-weekcalendar-category-area">
 <div class="ep-weekcalendar-category-header">
 <span class="ep-weekcalendar-category-title">車輛</span>
 </div>
 <ul class="ep-weekcalendar-category-list">
 </ul>
 </div>
 <!-- 內(nèi)容區(qū)域 -->
 <div class="ep-weekcalendar-time-area">
 <!-- 每周日期渲染區(qū)域。切換日期時(shí)重新繪制內(nèi)容 -->
 <div class="ep-weekcalendar-weeks"></div>
 <div class="ep-weekcalendar-main">
 <!-- 分類和內(nèi)容構(gòu)建的網(wǎng)格區(qū)域，僅在分類改變時(shí)進(jìn)行調(diào)整 -->
 <div class="ep-weekcalendar-grid"> </div>
 <!-- 可插入任意內(nèi)容的區(qū)域，日期切換時(shí)清空，根據(jù)使用需求插入內(nèi)容 -->
 <div class="ep-weekcalendar-content"></div>
 </div>
 </div>
 </div>
 <!-- 底部 -->
 <div class="ep-weekcalendar-body"></div>
</div>

結(jié)構(gòu)如上，實(shí)現(xiàn)代碼就不用展示了。

繪制實(shí)現(xiàn)

初始好了必要的結(jié)構(gòu)，我們接著進(jìn)行日歷的繪制工作。

分類繪制

首先要處理的是分類，周視圖中，一周的天數(shù)是固定的，確定好分類才能繪制出主體部分的網(wǎng)格。

對(duì)于分類，暫時(shí)考慮如下必要數(shù)據(jù)格式：

{
 id: 'cate-1', // 分類ID
 name: '法拉利', // 分類名稱
 content: '蘇E00000' // 分類的具體描述
}

實(shí)現(xiàn)如下：

{
 // 設(shè)置分類數(shù)據(jù)
 setCategory: function (data) {
 if (!(data instanceof Array)) {
 this.throwError('分類數(shù)據(jù)必須是一個(gè)數(shù)組');
 return;
 }
 this._categoryData = data;

 // 繪制分類
 this._renderCatagories();
 // 繪制其他需要改變的部分
 this._renderChanged();
 },
 // 左側(cè)分類渲染
 _renderCatagories: function () {
 this._categoryListEl.innerHTML = '';
 var i = 0,
 data = this._categoryData,
 node = document.createElement('li'),
 cataEl;
 node.className = 'ep-weekcalendar-category';
 // 用行作為下標(biāo)記錄當(dāng)前分類id集合
 this._categoryIndexs = [];
 // id為鍵記錄索引
 this._categoryReocrds = {};
 while (i < data.length) {
 this._categoryIndexs.push(data[i].id);
 this._categoryReocrds[data[i].id] = i;
 cataEl = node.cloneNode(true);
 this._rendercategory(data[i], cataEl);
 i++;
 }
 },
 _rendercategory: function (cate, cateEl) {
 cateEl.setAttribute('data-cateid', cate.id);
 var titleEl = document.createElement('span'),
 contentEl = document.createElement('span');
 titleEl.className = 'title';
 contentEl.className = 'content';
 titleEl.innerHTML = cate.name;
 contentEl.innerHTML = cate.content;
 cateEl.appendChild(titleEl);
 cateEl.appendChild(contentEl);
 this.fire('categoryRender', {
 categoryEl: cateEl,
 titleEl: titleEl,
 contentEl: contentEl
 });
 this._categoryListEl.appendChild(cateEl);
 this.fire('agterCategoryRender', {
 categoryEl: cateEl,
 titleEl: titleEl,
 contentEl: contentEl
 });
 }
}

上面通過(guò)設(shè)置分類數(shù)據(jù) setCategory 作為入口，調(diào)用繪制分類方法，其中還調(diào)用了 _renderChanged 此方法用于重新繪制日歷的可變部分，如標(biāo)題、日期和其中的內(nèi)容，會(huì)在之后進(jìn)行介紹。

日期繪制

上面已經(jīng)準(zhǔn)備好了分類軸，還需要繪制出日期軸，對(duì)于周視圖而言，一周的實(shí)現(xiàn)就非常簡(jiǎn)單了，根據(jù)一周的開(kāi)始日期，依次渲染7天即可。注意在繪制過(guò)程中提供日期的必要信息給相應(yīng)事件，一遍使用者能夠在事件中進(jìn)行個(gè)性化處理。

{
 // 渲染日歷的星期
 _renderWeeks: function () {
 this._weeksEl.innerHTML = '';
 var i = 0,
 currDate = this._startDate.clone(),
 node = document.createElement('div'),
 week;
 node.className = 'ep-weekcalendar-week';
 // 單元格列作為下標(biāo)記錄日期
 this._dateRecords = [];
 while (i++ < 7) {
 // 更新記錄日期
 this._dateRecords.push(currDate.clone());
 week = node.cloneNode(true);
 this._renderWeek(currDate, week);
 currDate.add(1, 'day');
 }
 // 切換日期 需要重繪內(nèi)容區(qū)域
 this._rednerContent();
 },
 _renderWeek: function (date, node) {
 var dateText = date.format('YYYY-MM-DD'),
 day = date.isoWeekday();
 if (day > 5) {
 node.className += ' weekend';
 }
 if (date.isSame(this.today, 'day')) {
 node.className += ' today';
 }
 node.setAttribute('data-date', dateText);
 node.setAttribute('date-isoweekday', day);
 var ev = this.fire('dateRender', {
 // 當(dāng)前完整日期
 date: dateText,
 // iso星期
 isoWeekday: day,
 // 顯示的文本
 dateText: '周' + this._WEEKSNAME[day - 1] + ' ' + date.format('MM-DD'),
 // classname
 dateCls: node.className,
 // 日歷el
 el: this.el,
 // 當(dāng)前el
 dateEl: node
 });
 // 處理事件的修改
 node.innerHTML = ev.dateText;
 node.className = ev.dateCls;
 this._weeksEl.appendChild(node);
 this.fire('afterDateRender', {
 // 當(dāng)前完整日期
 date: dateText,
 // iso星期
 isoWeekday: day,
 // 顯示的文本
 dateText: node.innerHTML,
 // classname
 dateCls: node.className,
 // 日歷el
 el: this.el,
 // 當(dāng)前el
 dateEl: node
 });
 }
}

網(wǎng)格和內(nèi)容

上面已經(jīng)準(zhǔn)備好了二維視圖中的兩個(gè)軸，接著進(jìn)行網(wǎng)格和內(nèi)容層的繪制即可。

網(wǎng)格

此處以分類為Y方向（行），日期為X方向（列）來(lái)進(jìn)行繪制：

{
 // 右側(cè)網(wǎng)格
 _renderGrid: function () {
 this._gridEl.innerHTML = '';
 var rowNode = document.createElement('div'),
 itemNode = document.createElement('span'),
 rowsNum = this._categoryData.length,
 i = 0,
 j = 0,
 row, item;
 rowNode.className = 'ep-weekcalendar-grid-row';
 itemNode.className = 'ep-weekcalendar-grid-item';
 while (i < rowsNum) {
 row = rowNode.cloneNode();
 row.setAttribute('data-i', i);
 j = 0;
 while (j < 7) {
 item = itemNode.cloneNode();
 // 周末標(biāo)識(shí)
 if (this.dayStartFromSunday) {
  if (j === 0 || j === 6) {
  item.className += ' weekend';
  }
 } else {
  if (j > 4) {
  item.className += ' weekend';
  }
 }
 item.setAttribute('data-i', i);
 item.setAttribute('data-j', j);
 row.appendChild(item);

 j++;
 }
 this._gridEl.appendChild(row);

 i++;
 }
 rowNode = itemNode = row = item = null;
 }
}

內(nèi)容

理論上來(lái)說(shuō)，二維要支持跨行、跨列兩種情況，即內(nèi)容區(qū)域應(yīng)該為一整塊元素。但是結(jié)合到實(shí)際情況，跨時(shí)間的需求普遍存在（一個(gè)東西在一段時(shí)間內(nèi)被連續(xù)使用）?？绶诸惒](méi)有多大的實(shí)際意義，本來(lái)就要分開(kāi)以分類來(lái)管理，再跨分類，又變得復(fù)雜了。而且即使一定要實(shí)現(xiàn)一段時(shí)間內(nèi)同時(shí)在使用多個(gè)東西，也是可以直接實(shí)現(xiàn)的（分類A在XX時(shí)間段內(nèi)被使用，B在XX時(shí)間段內(nèi)被使用，只是此時(shí)XX正好相同而已）。

因此此處僅處理跨時(shí)間情況，可將內(nèi)容按行即分類進(jìn)行繪制，這樣在插入內(nèi)容部件時(shí)，可以簡(jiǎn)化很多計(jì)算。

{
 // 右側(cè)內(nèi)容
 _rednerContent: function () {
 this._contentEl.innerHTML = '';
 var i = 0,
 node = document.createElement('div'),
 row;
 node.className = 'ep-weekcalendar-content-row';
 while (i < this._categoryData.length) {
 row = node.cloneNode();
 row.setAttribute('data-i', i);

 this._contentEl.appendChild(row);
 ++i;
 }
 row = node = null;
 },
 // 日期切換時(shí)清空內(nèi)容
 _clearContent: function () {
 var rows = this._contentEl.childNodes,
 i = 0;
 while (i < rows.length) {
 rows[i].innerHTML && (rows[i].innerHTML = '');
 ++i;
 }
 // 部件數(shù)據(jù)清空
 this._widgetData = {};
 }
}

如果一定要實(shí)現(xiàn)跨行跨列的情況，直接將內(nèi)容繪制成一整塊元素即可，但是在點(diǎn)擊事件和插入內(nèi)容部件時(shí)，需要同時(shí)計(jì)算對(duì)應(yīng)的分類和日期時(shí)間。

難點(diǎn)實(shí)現(xiàn)

內(nèi)容部件插入

我們實(shí)現(xiàn)這個(gè)二維周視圖日歷的主要目的就是要支持插入任意的內(nèi)容，上面已經(jīng)準(zhǔn)備好了插入內(nèi)容的dom元素，這里要做的就是將數(shù)據(jù)繪制成dom放置在合適的位置。

考慮必要的內(nèi)容部件數(shù)據(jù)結(jié)構(gòu)如下：

{
 id: '數(shù)據(jù)標(biāo)識(shí)',
 categoryId: '所屬分類標(biāo)識(shí)',
 title: '名稱',
 content: '內(nèi)容',
 start: '開(kāi)始日期時(shí)間'
 end: '結(jié)束日期時(shí)間'
 bgColor: '展示的背景色'
}

由于上面在內(nèi)容區(qū)域是直接按照分類作為繪制的，因此拿到數(shù)據(jù)后，對(duì)應(yīng)的分類就已經(jīng)存在了。重點(diǎn)要根據(jù)指定的開(kāi)始和結(jié)束時(shí)間計(jì)算出開(kāi)始和結(jié)束位置。

考慮如下：

考慮響應(yīng)式，位置計(jì)算按照百分比計(jì)算
一周的總時(shí)間是固定的，開(kāi)始日期時(shí)間和這周開(kāi)始日期時(shí)間的差額占總時(shí)間的百分比即開(kāi)始位置的百分比
結(jié)束日期時(shí)間和開(kāi)始時(shí)間的差額占總時(shí)間的百分比即為結(jié)束時(shí)間距離最左側(cè)的百分比
注意處理開(kāi)始和結(jié)束時(shí)間溢出本周的情況

因此關(guān)于位置計(jì)算可以用如下代碼處理：

{
 // 日期時(shí)間分隔符 默認(rèn)為空 對(duì)應(yīng)格式為 '2017-11-11 20:00'
 // 對(duì)于'2017-11-11T20:00' 這樣的格式務(wù)必指定正確的日期和時(shí)間之間的分隔符T
 _dateTimeSplit:' ',
 // 一周分鐘數(shù)
 _WEEKMINUTES: 7 * 24 * 60,
 // 一周秒數(shù)
 _WEEKSECONDS: 7 * 24 * 3600,
 // 一天的分鐘數(shù)秒數(shù)
 _DAYMINUTES: 24 * 60,
 _DAYSCONDS: 24 * 3600,
 // 計(jì)算位置的精度 取值second 或 minute
 posUnit: 'second',
 // 計(jì)算指定日期的分鐘或秒數(shù)
 _getNumByUnits: function (dateStr) {
 var temp = dateStr.split(this._dateTimeSplit),
  date = temp[0];
 // 處理左側(cè)溢出
 if (this._startDate.isAfter(date, 'day')) {
  // 指定日期在開(kāi)始日期之前
  return 0;
 }
 // 右側(cè)溢出直接算作第7天即可
 var times = (temp[1] || '').split(':'),
  days = (function (startDate) {
  var currDate = startDate.clone(),
   i = 0,
   d = moment(date, 'YYYY-MM-DD');
  while (i < 7) {
   if (currDate.isSame(d, 'day')) {
   return i;
   } else {
   currDate.add(1, 'day');
   ++i;
   }
  }
  console && console.error && console.error('計(jì)算天數(shù)時(shí)出錯(cuò)！');
  return i;
  }(this._startDate)),
  hours = parseInt(times[0], 10) || 0,
  minutes = parseInt(times[1], 10) || 0,
  seconds = parseInt(times[2], 10) || 0,
  // 對(duì)應(yīng)分鐘數(shù)
  result = days * this._DAYMINUTES + hours * 60 + minutes;
 return this.posUnit == 'minute' ? result : (result * 60 + seconds);
 },
 // 計(jì)算日期時(shí)間的百分比位置
 _getPos: function (dateStr) {
 var p = this._getNumByUnits(dateStr) / (this.posUnit == 'minute' ? this._WEEKMINUTES : this._WEEKSECONDS);
 return p > 1 ? 1 : p;
 }
}

上面就拿到了一個(gè)數(shù)據(jù)所對(duì)應(yīng)的開(kāi)始位置和結(jié)束位置?；旧鲜且呀?jīng)完成了，但是還需要再處理一個(gè)情況：相同分類下的時(shí)間沖突問(wèn)題。

考慮以如下方式進(jìn)行：

沒(méi)添加一個(gè)就記錄下其數(shù)據(jù)
新增的如果和當(dāng)前分類下已有的存在時(shí)間重疊，則認(rèn)為沖突。

實(shí)現(xiàn)如下：

{
 /**
 * 檢查是否發(fā)生重疊
 *
 * @param {Object} data 當(dāng)前要加入的數(shù)據(jù)
 * @returns false 或 和當(dāng)前部件重疊的元素?cái)?shù)組
 */
 _checkOccupied: function (data) {
 if (!this._widgetData[data.categoryId]) {
  return false;
 }
 var i = 0,
  cate = this._widgetData[data.categoryId],
  len = cate.length,
  result = false,
  occupied = [];
 for (; i < len; ++i) {
  // 判斷時(shí)間是否存在重疊
  if (data.start < cate[i].end && data.end > cate[i].start) {
  occupied.push(cate[i]);
  result = true;
  }
 }
 return result ? occupied : false;
 }
}

完成以上兩步就可以往我們的內(nèi)容區(qū)域中插入了

{
 // 緩存widget數(shù)據(jù)
 _cacheWidgetData: function (data) {
 if (!this._widgetData[data.categoryId]) {
  this._widgetData[data.categoryId] = [];
 }
 // 記錄當(dāng)前的
 this._widgetData[data.categoryId].push(data);
 },
 // 新增一個(gè)小部件
 addWidget: function (data) {
 var row = this._contentEl.childNodes[this._categoryReocrds[data.categoryId]];
 if (!row) {
  this.throwError('對(duì)應(yīng)分類不存在，添加失敗');
  return false;
 }
 // 先查找是否含有
 var $aim = jQuery('.ep-weekcalendar-content-widget[data-id="' + data.id + '"]', row);
 if ($aim.length) {
  // 已經(jīng)存在則不添加
  return $aim[0];
 }
 // 創(chuàng)建部件
 var widget = document.createElement('div'),
  title = document.createElement('span'),
  content = document.createElement('p'),
  startPos = this._getPos(data.start),
  endPos = this._getPos(data.end),
  _data = {
  categoryId: data.categoryId,
  id: data.id,
  start: startPos,
  end: endPos,
  el: widget,
  data: data
  };
 widget.className = 'ep-weekcalendar-content-widget';
 title.className = 'ep-weekcalendar-content-widget-title';
 content.className = 'ep-weekcalendar-content-widget-content';
 widget.appendChild(title);
 widget.appendChild(content);
 // 通過(guò)絕對(duì)定位，指定其left和right來(lái)拉開(kāi)寬度的方式來(lái)處理響應(yīng)式
 // 可以通過(guò)樣式設(shè)置一個(gè)最小寬度，來(lái)避免時(shí)間段過(guò)小時(shí)其中文本無(wú)法顯示的問(wèn)題
 widget.style.left = startPos * 100 + '%';
 widget.style.right = (1 - endPos) * 100 + '%';
 data.bgColor && (widget.style.backgroundColor = data.bgColor);
 data.id && widget.setAttribute('data-id', data.id);
 widget.setAttribute('data-start', data.start);
 widget.setAttribute('data-end', data.end);
 title.innerHTML = data.title;
 data.content && (content.innerHTML = data.content);
 widget.title = data.title;
 // 檢查是否發(fā)生重疊
 var isoccupied = this._checkOccupied(_data);
 if (isoccupied) {
  // 觸發(fā)重疊事件
  var occupiedEv = this.fire('widgetoccupied', {
  occupiedWidgets: (function () {
   var arr = [];
   for (var i = 0, l = isoccupied.length; i < l; ++i) {
   arr.push(isoccupied[i].el);
   }
   return arr;
  })(),
  currWidget: widget,
  widgetData: data
  });
  // 取消后續(xù)執(zhí)行
  if (occupiedEv.cancel) {
  return false;
  }
 }
 // 緩存數(shù)據(jù)
 this._cacheWidgetData(_data);
 var addEv = this.fire('widgetAdd', {
  widgetId: data.id,
  categoryId: data.categoryId,
  start: data.start,
  end: data.end,
  startPos: startPos,
  endPos: endPos,
  widgetEl: widget
 });
 if (addEv.cancel) {
  return false;
 }
 row.appendChild(widget);
 this.fire('afterWidgetAdd', {
  widgetId: data.id,
  categoryId: data.categoryId,
  start: data.start,
  end: data.end,
  startPos: startPos,
  endPos: endPos,
  widgetEl: widget
 });
 return widget;
 },
}

點(diǎn)擊事件和范圍選擇

此控件不僅用于結(jié)果展示，還要可用于點(diǎn)擊進(jìn)行添加，需要處理其點(diǎn)擊事件，但是由于要展示內(nèi)容，內(nèi)容是覆蓋在分類和日期構(gòu)成的網(wǎng)格之上的，用戶的點(diǎn)擊是點(diǎn)擊不到網(wǎng)格元素的，必須要根據(jù)點(diǎn)擊的位置進(jìn)行計(jì)算來(lái)獲取所點(diǎn)擊的日期和所在分類。

同時(shí)，由于展示的部件都是時(shí)間范圍的，因此點(diǎn)擊返回某天和某個(gè)分類是不夠的，還需要能夠支持鼠標(biāo)按下拖動(dòng)再松開(kāi)，來(lái)直接選的一段時(shí)間。

考慮到以上需求，點(diǎn)擊事件不能直接使用 click 來(lái)實(shí)現(xiàn)，考慮使用 mousedown 和 mouseup 來(lái)處理點(diǎn)擊事件，同時(shí)需要在 mousemove 中實(shí)時(shí)給出用戶響應(yīng)。

{
 _initEvent: function () {
 var me = this;
 // 點(diǎn)擊的行索引
 var row,
  // 開(kāi)始列索引
  columnStart,
  // 結(jié)束列索引
  columnEnd,
  // 是否在按下、移動(dòng)、松開(kāi)的click中
  isDurringClick = false,
  // 是否移動(dòng)過(guò) 用于處理按下沒(méi)有移動(dòng)直接松開(kāi)的過(guò)程
  isMoveing = false,
  $columns,
  // 網(wǎng)格左側(cè)寬度
  gridLeft,
  // 每列的寬度
  columnWidth
 jQuery(this.el)
  // 按下鼠標(biāo) 記錄分類和開(kāi)始列
  .on('mousedown.weekcalendar', '.ep-weekcalendar-content-row', function (e) {
  isDurringClick = true;
  gridLeft = jQuery(me._gridEl).offset().left;
  columnWidth = jQuery(me._gridEl).width() / 7;
  jQuery(me._gridEl).find('.ep-weekcalendar-grid-item').removeClass(me._selectedCls);
  row = this.getAttribute('data-i');
  $columns = jQuery(me._gridEl).find('.ep-weekcalendar-grid-row').eq(row).children();

  columnStart = (e.pageX - gridLeft) / columnWidth >> 0;
  });
 // 移動(dòng)和松開(kāi) 松開(kāi)鼠標(biāo) 記錄結(jié)束列 觸發(fā)點(diǎn)擊事件 
 // 不能直接綁定在日期容器上 否則鼠標(biāo)移出日歷后，松開(kāi)鼠標(biāo)，實(shí)際點(diǎn)擊已經(jīng)結(jié)束，但是日歷上處理不到。
 jQuery('body')
  // 點(diǎn)擊移動(dòng)過(guò)程中 實(shí)時(shí)響應(yīng)選中狀態(tài)
  .on('mousemove.weekcalendar', function (e) {
  if (!isDurringClick) {
   return;
  }
  isMoveing = true;
  // 當(dāng)前列索引
  var currColumn;
  // mousemoveTimer = setTimeout(function () {
  currColumn = (e.pageX - gridLeft) / columnWidth >> 0;
  // 修正溢出
  currColumn = currColumn > 6 ? 6 : currColumn;
  currColumn = currColumn < 0 ? 0 : currColumn;
  $columns.removeClass(me._selectedCls);
  // 起止依次選中
  var start = Math.min(columnStart, currColumn),
   end = Math.max(columnStart, currColumn);
  do {
   $columns.eq(start).addClass(me._selectedCls);
  } while (++start <= end);
  })
  // 鼠標(biāo)松開(kāi)
  .on('mouseup.weekcalendar', function (e) {
  if (!isDurringClick) {
   return;
  }
  var startIndex = -1,
   endIndex = -1;
  columnEnd = (e.pageX - gridLeft) / columnWidth >> 0;
  columnEnd = columnEnd > 6 ? 6 : columnEnd;
  // 沒(méi)有移動(dòng)過(guò)時(shí)
  if (!isMoveing) {
   startIndex = endIndex = columnEnd;
   // 直接down up 沒(méi)有move的過(guò)程則只會(huì)有一個(gè)選中的，直接以結(jié)束的作為處理即可
   $columns.eq(columnEnd).addClass(me._selectedCls)
   .siblings().removeClass(me._selectedCls);
  } else {
   startIndex = Math.min(columnStart, columnEnd);
   endIndex = Math.max(columnStart, columnEnd);
  }
  // 觸發(fā)點(diǎn)擊事件
  me.fire('cellClick', {
   // 分類id 
   categoryId: me._categoryIndexs[row],
   // 時(shí)間1
   startDate: me._dateRecords[startIndex].format('YYYY-MM-DD'),
   // 日期2
   endDate: me._dateRecords[endIndex].format('YYYY-MM-DD'),
   // 行索引
   rowIndex: row,
   // 列范圍
   columnIndexs: (function (i, j) {
   var arr = [];
   while (i <= j) {
    arr.push(i++);
   }
   return arr;
   }(startIndex, endIndex))
  });
  row = columnStart = columnEnd = isMoveing = isDurringClick = false;
  });
 }
}

此過(guò)程要注意的問(wèn)題是：mousedown 必須綁定在日歷上，而 mouseup 和 mousemove 則不能綁定在日歷上，具體原因已經(jīng)寫(xiě)在上面代碼注釋中了。

另外需要注意，由于范圍點(diǎn)擊選擇使用了 mousedown 和 mouseup 來(lái)模擬，那么日歷內(nèi)容區(qū)域中插入的數(shù)據(jù)部件的點(diǎn)擊事件也要用 mousedown 和 mouseup 來(lái)模擬，因?yàn)?mouseup 觸發(fā)比 click 早，如果使用 click ，會(huì)導(dǎo)致先觸發(fā)日歷上的日期點(diǎn)擊或日期范圍點(diǎn)擊。

使用

此日歷實(shí)現(xiàn)基于一個(gè)控件基類擴(kuò)展而來(lái)，其必要功能僅為一套事件機(jī)制，可參考實(shí)現(xiàn)一套自定義事件機(jī)制

實(shí)測(cè)一下效果吧：

<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: {
 // 日期變化時(shí)觸發(fā)
 dateChanged: function (e) {
  var data = {
  start: e.startDate,
  end: e.endDate,
  };
  // 獲取數(shù)據(jù)并逐個(gè)添加到日歷上
  getData(data).done(function (data) {
  $.each(data, function (i, item) {
   calendar.addWidget(item);
  });
  });
 },
 // 部件重疊時(shí)觸發(fā)
 widgetOccupied: function (e) {
  // 沖突時(shí)禁止繼續(xù)添加
  console.error(e.widgetData.categoryId + '分類下id為' + e.widgetData.id + '的部件和現(xiàn)有部件有重疊，取消添加');
  e.cancel = true;
 }
 }
});
calendar.on('dateClick', function (e) {
 alert(JSON.stringify({
 '開(kāi)始時(shí)間': e.startDate,
 '結(jié)束時(shí)間': e.endDate,
 '分類id': e.categoryId,
 '行索引': e.rowIndex,
 '列索引范圍': e.columnIndexs
 }, 0, 4));
});
</script>

源碼下載：

github

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

您可能感興趣的文章: