console
<html>
<head>
<style>
*{
padding:0;
margin: 0;
}
.appointed_time_view{
padding-left: 50px;display: inline-block;position: relative;
}
.time-table {
border-collapse:collapse;
padding: 0;
margin: 0;
position: relative;
}
.schedule-time-header {
margin-left: -25px;
}
.schedule-time-header div{
border: 0;
width: 50px;
text-align: center;
position: relative;
color: #000;
float: left;
font-size: 12px;
height: 23px;
line-height: 23px;
-moz-user-select: none;
-webkit-user-select: none;
}
.schedule-day-head{
position: absolute;
left: 20px;
bottom: 0;
}
.schedule-day-head div{
font-size: 12px;
height: 25px;
line-height: 25px;
}
.time-table tr{
position: relative;
}
.time-table td {
position: relative;
background: #fff;
border: 0;
padding: 0;
color: #E6E6E6;
cursor: pointer;
font-size: 12px;
height: 25px;
width: 24px;
line-height: 25px;
text-align: center;
-moz-user-select: none;
-webkit-user-select: none;
border: 1px solid #dcdcdc;
}
.time-table td.selected {
background: #d9fcfe;
}
.time-table td.selecting{
border: 1px solid rgb(250, 255, 190);
background: rgb(250, 255, 190);
z-index: 99;
}
.time-table td:hover {
background-color: #faffbe80;
}
.time-table .schedule-covertimes{
color: #12bdce;
background: none;
font-size: 12px;
height: 25px;
line-height: 25px;
position: absolute;
border: 0;
opacity: .5;
filter: alpha(opacity=50);
margin: 0;
}
.time-table .schedule-covertimes-tip {
width: 100%;
text-align: center;
height: 25px;
line-height: 25px;
border: 0;
}
.time-table .schedule-covertimes-tip strong{
font-weight: bold;
font-family: arial,verdana,"Hiragino Sans GB",Hiragino Sans GB,"\5B8B\4F53";
}
</style>
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.js"></script>
<script>
/**
* 时间区域选择插件
*/
(function($) {
var dragStart = 0;
var dragEnd = 0;
var isDragging = false;
var $table;
var methods = {
isRightClick: function(e) {
if (e.which) {
return (e.which == 3);
} else if (e.button) {
return (e.button == 2);
}
return false;
},
//鼠标按下
rangeMouseDown: function() {
if (methods.isRightClick($(this))) {
return false;
} else {
var allCells = $table.find("td");
dragStart = allCells.index($(this));
isDragging = true;
$table.find("td:eq(" + dragStart + ")").addClass('selecting');
if (typeof $(this).preventDefault != 'undefined') {
$(this).preventDefault();
}
document.documentElement.onselectstart = function () {
return false;
};
}
},
//鼠标抬起
rangeMouseUp: function(e) {
if (methods.isRightClick($(this))) {
return false;
} else {
var allCells = $table.find("td");
dragEnd = allCells.index($(this));
isDragging = false;
console.log(dragStart+"---"+dragEnd);
methods.selectRangeEnd();
document.documentElement.onselectstart = function () {
return true;
};
}
},
//鼠标移动
rangeMouseMove: function(e) {
if (isDragging) {
var allCells = $table.find("td");
dragEnd = allCells.index($(this));
methods.selectRange();
}
},
selectRange: function() {
var startCol = dragStart % 24;
var startRow = Math.floor(dragStart / 24);
var endCol = dragEnd % 24;
var endRow = Math.floor(dragEnd / 24);
$table.find("td").removeClass("selecting");
for (var r = Math.min(startRow, endRow); r <= Math.max(startRow, endRow); ++r) {
for (var c = Math.min(startCol, endCol); c <= Math.max(startCol, endCol); ++c) {
var cutIndex = r * 24 + c;
var cutDom = $table.find("td:eq(" + cutIndex + ")")
cutDom.addClass('selecting');
}
}
},
selectRangeEnd: function() {
var startCol = dragStart % 24;
var startRow = Math.floor(dragStart / 24);
var endCol = dragEnd % 24;
var endRow = Math.floor(dragEnd / 24);
$table.find("td").removeClass("selecting");
for (var r = Math.min(startRow, endRow); r <= Math.max(startRow, endRow); ++r) {
for (var c = Math.min(startCol, endCol); c <= Math.max(startCol, endCol); ++c) {
var cutIndex = r * 24 + c;
var cutDom = $table.find("td:eq(" + cutIndex + ")")
if(cutDom.hasClass("selected")) {
cutDom.removeClass('selected');
} else {
cutDom.addClass('selected');
}
}
}
$table.find("aside").remove();
$table.find("tr").each(function(i) {
var pt = $(this);
var dataDay = i;
var startTime;
$(this).find("td").each(function() {
var isSelected = $(this).hasClass("selected");
var nextSelected = $(this).next().hasClass("selected");
if (startTime && isSelected && !nextSelected) {
var endTime = $(this).attr("data-time");
if((endTime-startTime+1)>=3) {
var style = "width: "+((endTime-startTime+1)*25)+"px;left: "+(startTime*25)+"px;";
var ts = startTime+":00-"+endTime+":00";
if(startTime==0 && endTime==23) {
ts = "全天投放";
}
pt.children(":last").after('<aside data-start-time="'+startTime+'" data-end-time="'+endTime+'" data-day="'+dataDay+'" class="schedule-covertimes" style="'+style+'"><div class="schedule-covertimes-tip"><strong>'+ts+'</strong></div></aside>');
}
startTime = null;
}
if (!startTime && isSelected && nextSelected) {
startTime = $(this).attr("data-time");
}
});
$table.find("aside").hover(function() {
$(this).hide();
});
});
},
createScheduleControl: function(e, col, row) {
for (var i = 0; i < row; i++) {
var tds = "";
var ths = "<div>0</div>";
for (var j = 0; j < col; j++) {
if(i==0 && j%2==1) {
ths+="<div>"+(j+1)+"</div>";
}
tds+='<td data-day="' + i + '" data-time="' + j + '"><div></div></td>';
}
if(i==0) {
$(".schedule-time-header").append(ths);
}
e.append('<tr>'+tds+'</tr>');
}
//鼠标选中日期中的时候，隐藏标注提示
e.find("td").hover(function() {
var dataDay = $(this).attr("data-day");
var dataTime = $(this).attr("data-time");
e.find("aside").each(function() {
var dataAsideDay = $(this).attr("data-day");
if(dataAsideDay == dataDay) {
var dataStartTime = $(this).attr("data-start-time");
var dataEndTime = $(this).attr("data-end-time");
if(parseInt(dataTime) >= parseInt(dataStartTime) && parseInt(dataTime) <= parseInt(dataEndTime)) {
$(this).hide();
} else {
$(this).show();
}
} else {
$(this).show();
}
});
});
},
init: function(options) {
this.addClass("appointed_time_view");
this.append('<div class="schedule-time-header"></div>');
this.append('<div class="schedule-day-head"><div>周一</div><div>周二</div><div>周三</div><div>周四</div><div>周五</div><div>周六</div><div>周日</div></div>');
//生成时间区域选择表格
this.append('<table id="appointed_time_table" class="time-table"></table>');
$table = $("#appointed_time_table");
//生成时间区域表格
methods.createScheduleControl($table, 24, 7);
//绑定事件
$table.find("td").mousedown(methods.rangeMouseDown).mouseup(methods.rangeMouseUp).mousemove(methods.rangeMouseMove);
},
//获取选中的值
getSelectValue: function() {
}
};
$.fn.timeChoiceCreatePlugin = function(method) {
if (methods[method]) {
return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
} else if (typeof method === 'object' || !method ) {
return methods.init.apply( this, arguments );
} else {
$.error( 'Method ' + method + ' does not exist on jQuery.timeChoiceCreatePlugin' );
}
};
})(jQuery);
$(function () {
var timeChoice = $("#appointed_time_view").timeChoiceCreatePlugin();
});
</script>
</head>
<body>
<div id="appointed_time_view"></div>
</body>
</html>