在自定义日历中自动突出显示"其余时间"

Question

在自定义日历中自动突出显示"其余时间"

我正在使用vanilla JS创建一个事件调度程序.我目前正致力于通过"拖动"鼠标超过所需的时间来突出显示时间跨度.我已经让它运行得相当好,但是如果用户开始在一天(例如星期一)开始拖动到下一个(例如星期二),我希望其余时间自动突出显示.

换句话说,如果您在周一凌晨03点开始突出显示并拖到周二早上05点,则突出显示的区域应自动为03-07周一和00-05周二.

我几乎让它工作,但所有这些坐标和计算让我头晕目眩.我们非常欢迎任何帮助或指导.

这是我遇到问题的片段:

if((j >= (startCol-1) && j <= (col-1) && i >= (startRow-1) && i < (row-1))) {
  rows[i].children[j].classList.add('selected');
} else if((j > (startCol-1)) && (j <= (col-1)) && (i < (startRow-1))) {
  rows[i].children[j].classList.add('selected');
} else if((j < (col-1) && (j >= (startCol-1)) && (i >= (row-1)))) {
  rows[i].children[j].classList.add('selected');
} else {
  rows[i].children[j].classList.remove('selected');
}

Run Code Online (Sandbox Code Playgroud)

这是一个完整的片段

const table = document.querySelector('.table');
const rows = document.querySelectorAll('.row');
const sqSize = 28;
let selValue = 'p1';
let didMouseMove = false;
let startRow;
let startCol;

const cb = (e) => {
	didMouseMove = true;
	const x = e.clientX - table.offsetLeft;
	const y = e.clientY - table.offsetTop;
  const row = Math.round(y / sqSize);
  const col = Math.round(x / sqSize);

  for(let i=0; i < rows.length; i++) {
  	for(let j=0; j < rows[i].children.length; j++) {
    	if((j >= (startCol-1) && j <= (col-1) && i >= (startRow-1) && i < (row-1))) {
    		rows[i].children[j].classList.add('selected');
      } else if((j > (startCol-1)) && (j <= (col-1)) && (i < (startRow-1))) {
      	rows[i].children[j].classList.add('selected');
      } else if((j < (col-1) && (j >= (startCol-1)) && (i >= (row-1)))) {
      	rows[i].children[j].classList.add('selected');
      } else {
      	rows[i].children[j].classList.remove('selected');
      }
    }
  }
}

table.addEventListener('mousedown', (e) => {
  startRow = Math.round((e.clientY - table.offsetTop) / sqSize);
	startCol = Math.round((e.clientX - table.offsetLeft) / sqSize);
  table.addEventListener('mousemove', cb);
});
table.addEventListener('mouseup', (e) => {
	const x = table.querySelectorAll('.selected');
  for (let i = 0; i < x.length; i++) {
  	x[i].className = selValue;
  }
	if(!didMouseMove && !e.target.classList.contains('row')) {
  	e.target.classList.toggle(selValue);
  }
	didMouseMove = false;
  table.removeEventListener('mousemove', cb);
});
document.getElementById('sel').addEventListener('change', (e) => {
	selValue = e.target.value;
});

Run Code Online (Sandbox Code Playgroud)

body {
  margin: 0;
  padding: 0;
}

.head {
  font-size: 0;
  margin-left: 32px;
}

.head > div {
  font-size: 12px;
  display: inline-block;
  width: 25px;
  margin: 0 2px;
  text-align: center;
}

.pre {
  display: inline-block;
  font-size: 0;
  vertical-align: top;
  width: 32px;
  margin-top: -8px;
}

.pre > div {
  height: 25px;
  margin: 2px 0;
  font-size: 12px;
  display: inline-block;
}

.table {
  display: inline-block;
}

.wrapper {
  display: inline-block;
  position: relative;
}

.row {
  font-size: 0;
}

.row > div {
  display: inline-block;
  border: 1px solid black;
  margin: 1px;
  width: 25px;
  height: 25px;
}

.p1 {
  background: green;
}

.p2 {
  background: blue;
}

.p3 {
  background: orange;
}

.selected {
  background: grey;
}

Run Code Online (Sandbox Code Playgroud)

<div>
  <select id="sel">
     <option value="p1">Profile 1</option>
     <option value="p2">Profile 2</option>
     <option value="p3">Profile 3</option>
   </select>
 </div>
 
 <div class='wrapper'>
   <div class='head'>
     <div>Mon</div>
     <div>Tue</div>
     <div>Wed</div>
     <div>Thu</div>
     <div>Fri</div>
     <div>Sat</div>
     <div>Sun</div>
   </div>
   <div>
     <div class='pre'>
       <div>00:00</div>
       <div>00:30</div>
       <div>01:00</div>
       <div>01:30</div>
       <div>02:00</div>
       <div>02:30</div>
       <div>03:00</div>
       <div>03:30</div>
       <div>04:00</div>
       <div>04:30</div>
       <div>05:00</div>
       <div>05:30</div>
       <div>06:00</div>
       <div>06:30</div>
       <div>07:00</div>
     </div>
     <div class='table'>
       <div class='row'>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
       </div>
       <div class='row'>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
       </div>
       <div class='row'>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
       </div>
       <div class='row'>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
       </div>
       <div class='row'>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
       </div>
       <div class='row'>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
       </div>
       <div class='row'>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
       </div>
       <div class='row'>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
       </div>
       <div class='row'>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
       </div>
       <div class='row'>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
       </div>
       <div class='row'>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
       </div>
       <div class='row'>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
       </div>
       <div class='row'>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
       </div>
       <div class='row'>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
       </div>
     </div>
   </div>
 </div>

Run Code Online (Sandbox Code Playgroud)

和jsfiddle fork:http://jsfiddle.net/a2v9rd50/1/

Answer 1

Cid*_*Cid 1

我写了这个，需要调整和重构，但选择“有效”。

我动态生成了~~一个丑陋~~但时尚的日历。每个单元格都有一个像这样构建的 id：day_halfhour。day为 x 坐标，halfhour为 y 坐标。周一 00:00 的单元格具有 id 0_0。周日23点30分了6_47。

每个单元格上有 2 个事件侦听器。

一个用于选择起始 ( mousedown)，设置起始坐标（日 + 小时）startPoint并升起标志selecting

另一种用于选择( mouseover)。仅当标志为 true 时才执行selecting。coor它使用当前单元格 ID ( x_y)设置结束坐标（日 + 小时）

文档 ( ) 上有第三个事件，mouseup它在控制台中显示开始和结束坐标。

您可以使用最终事件来设计所选日期并管理数据。

function changeColor(x, y, state)
{
    let cell = document.getElementById(x + '_' + y);
    if (cell)
      cell.className = state;
}

let tbl = document.createElement('table');
let container = document.getElementById('myTable');
let startPoint = null;
let endPoint = null;
let selecting = false;
for (let i = 0; i < 48; ++i)
{
    let tr = document.createElement('tr');
    for (let j = 0; j < 7; ++j)
    {
        let td = document.createElement('td');
        td.setAttribute('id', j + "_" + i);
        td.innerHTML = "A";
        td.addEventListener('mousedown', (e) =>
        {
            let coortemp = e.srcElement.id.split('_');
            startPoint = [coortemp[0], coortemp[1]];
            selecting = true;
            changeColor(coortemp[0], coortemp[1], "selecting");
        });
        td.addEventListener('mouseover', (e) =>
        {
            if (selecting)
            {
                endPoint = e.srcElement.id.split('_');
                for (let x = 0; x < 7; ++x)
                {
                    for (let y = 0; y < 48; ++y)
                    {
                        //We're out of range concerning selection. background is white
                        if (x < startPoint[0]
                            || x > endPoint[0])
                            changeColor(x, y, "deselected");
                        else
                        {
                            //In the case where we're "painting" the first day
                            //of the selection.
                            if (x == startPoint[0])
                            {
                                /*
                                 * This checks if start and end are the same day.
                                 * to avoid "painting" too much hours
                                 * Or if days are differents, so we can "paint" until midnight
                                 */
                                if (y >= startPoint[1]
                                    && ((startPoint[0] == endPoint[0]
                                            && y <= endPoint[1])
                                        || startPoint[0] != endPoint[0]))
                                {
                                    changeColor(x, y, "selecting");
                                }
                                else
                                {
                                    changeColor(x, y, "deselected");
                                }
                            }
                            //last day of selection ...
                            else if (x == endPoint[0])
                            {
                                //... before or at last hour
                                if (y <= endPoint[1])
                                {
                                    changeColor(x, y, "selecting");
                                }                                    
                                else
                                {
                                    changeColor(x, y, "deselected");
                                }
                            }
                            //There, we're definitely in range and we can blindly "paint"
                            else
                            {
                                changeColor(x, y, "selecting");
                            }
                        }
                    }
                }
            }
        });
        tr.appendChild(td);
    }
    tbl.appendChild(tr);
}
container.appendChild(tbl);
document.addEventListener('mouseup', () =>
{
    if (selecting)
    {
        if (!endPoint)
            endPoint = startPoint;
        console.log('final selection : from day ' + startPoint[0] + ' half-hour * ' + startPoint[1] + ' to day ' + endPoint[0] + ' half-hour * ' + endPoint[1]);
        selecting = false;
        let days = document.getElementsByClassName("selecting");
        
        while (days.length)
          days[0].className = "selected";
    }
});

Run Code Online (Sandbox Code Playgroud)

.selecting
{
  background-color: #A9A9A9;
}

.deselected
{
  background-color: #FFFFFF;
}

.selected
{
  background-color: #00FF00;
}

Run Code Online (Sandbox Code Playgroud)

<div id="myTable">
</div>

Run Code Online (Sandbox Code Playgroud)

归档时间：	8 年前
查看次数：	86 次
最近记录：	8 年前