JS实现日程安排 日程安排插件
代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="EmpWeekPlan.aspx.cs" Inherits="Aepri.InfoDev.DPP.Web.PlanManage.EmpWeekPlan" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>员工周计划</title>
<style type="text/css">
body
{
margin: 0;
padding: 0;
font-size: 12px;
color: #555;
background-color: #fff;
} .table-title
{
border-collapse: collapse;
width: 100%;
border: solid 1px #ddd;
font-size: 12px;
font-weight: bold;
color: #555;
} .table-title td
{
text-align: center;
padding: 5px;
height: 25px;
} .table-days
{
border-collapse: collapse;
width: 100%;
} .table-days td
{
border: solid 1px #ddd;
height: 150px;
vertical-align: top;
width: 14px;
} .td-gray
{
color: #ccc;
background-color: #f7f7f7;
} .div-task-item
{
background-color: #bfecff;
margin-top: 2px;
padding: 2px;
height: 14px;
cursor: default;
/* margin-left: 5px;
margin-right: 5px;*/
} .div-task-item:hover
{
background-color: #ff5588 !important;
} .div-no-task-item
{
margin-top: 2px;
padding: 2px;
height: 14px;
} .td-selected
{
background-color: #e0f2f8 !important;
} .div-day-title
{
text-align: right;
padding: 3px;
} .td-today
{
background-color: #fcd7d7;
} .td-today div:first-child
{
border-top: solid 2px #f72f37;
padding-top: 1px;
} .highlight-task
{
background-color: #ff3366 !important;
color: #fff !important;
}
</style>
<script src="<%=ResolveClientUrl("~/js/jquery-1.7.2.min.js") %>" type="text/javascript"></script>
<script type="text/javascript">
var data = {
empCode: '101',
list: [
//说明：id暂时无用
{ id: '01', taskCode: '001', title: '任务一', content: '测试内容', year: 2016, month: 1, day: 3 },
{ id: '02', taskCode: '001', title: '任务一', content: '测试内容', year: 2016, month: 1, day: 4 },
//{ id: '02', taskCode: '001', title: '任务一', content: '测试内容', year: 2016, month: 1, day: 5 },
{ id: '03', taskCode: '002', title: '任务二', content: '测试内容', year: 2016, month: 1, day: 4 },
//{ id: '04', taskCode: '002', title: '任务二', content: '测试内容', year: 2016, month: 1, day: 5 },
{ id: '05', taskCode: '003', title: '任务三', content: '测试内容', year: 2016, month: 1, day: 5 },
{ id: '06', taskCode: '003', title: '任务三', content: '测试内容', year: 2016, month: 1, day: 6 },
{ id: '07', taskCode: '004', title: '任务四', content: '测试内容', year: 2016, month: 1, day: 6 },
{ id: '08', taskCode: '005', title: '任务五', content: '测试内容', year: 2016, month: 1, day: 6 },
{ id: '09', taskCode: '005', title: '任务五', content: '测试内容', year: 2016, month: 1, day: 7 },
{ id: '10', taskCode: '006', title: '任务六', content: '测试内容', year: 2016, month: 1, day: 7 },
//{ id: '11', taskCode: '006', title: '任务六', content: '测试内容', year: 2016, month: 1, day: 8 },
//{ id: '12', taskCode: '006', title: '任务六', content: '测试内容', year: 2016, month: 1, day: 9 },
{ id: '13', taskCode: '007', title: '任务七', content: '测试内容', year: 2016, month: 1, day: 6 },
{ id: '13', taskCode: '007', title: '任务七', content: '测试内容', year: 2016, month: 1, day: 7 },
{ id: '14', taskCode: '007', title: '任务七', content: '测试内容', year: 2016, month: 1, day: 8 },
//{ id: '15', taskCode: '008', title: '任务八', content: '测试内容', year: 2016, month: 1, day: 6 },
//{ id: '15', taskCode: '008', title: '任务八', content: '测试内容', year: 2016, month: 1, day: 7 },
{ id: '15', taskCode: '008', title: '任务八', content: '测试内容', year: 2016, month: 1, day: 8 },
{ id: '15', taskCode: '008', title: '任务八', content: '测试内容', year: 2016, month: 1, day: 9 },
{ id: '15', taskCode: '009', title: '任务九', content: '测试内容', year: 2016, month: 1, day: 4 },
{ id: '15', taskCode: '009', title: '任务九', content: '测试内容', year: 2016, month: 1, day: 5 },
{ id: '15', taskCode: '010', title: '任务十', content: '测试内容', year: 2016, month: 1, day: 10 },
{ id: '15', taskCode: '010', title: '任务十', content: '测试内容', year: 2016, month: 1, day: 9 },
{ id: '15', taskCode: '011', title: '任务十一', content: '测试内容', year: 2015, month: 12, day: 31 },
{ id: '15', taskCode: '011', title: '任务十一', content: '测试内容', year: 2016, month: 1, day: 1 },
{ id: '15', taskCode: '011', title: '任务十一', content: '测试内容', year: 2016, month: 1, day: 2 },
{ id: '15', taskCode: '011', title: '任务十一', content: '测试内容', year: 2016, month: 1, day: 3 }
]
}; var taskCodeList = new Array();
function createTaskCodeList(data, taskCodeList) {
for (var i = 0; i < data.list.length; i++) {
var bl = true;
for (var j = 0; j < taskCodeList.length; j++) {
if (taskCodeList[j] == data.list[i].taskCode) {
bl = false;
}
}
if (bl) {
taskCodeList.push(data.list[i].taskCode);
}
}
}
createTaskCodeList(data, taskCodeList); $(function () {
$(".table-days").parent().height($(window).height() - $(".table-days").parent().position().top - 10); $("#year").change(function () {
var year = $("#year").val();
var month = $("#month").val();
createPlanTable(year, month);
});
$("#month").change(function () {
var year = $("#year").val();
var month = $("#month").val();
createPlanTable(year, month);
});
gotoToday(); //ie6、7
if ($.browser.msie) {
if (parseInt($.browser.version) == 7 || parseInt($.browser.version) == 6) {
$("#table-days").width($("#table-days").width() - 20);
$("#table-days").parent().height($("#table-days").parent().height() - 15);
}
}
}); //end $ //创建计划表格
function createPlanTable(year, month) {
var html = '';
var table = $("#table-days");
var days = getDaysOfMonth(year, month);
var preDays = getDaysOfPreMonth(year, month);
var week = getWeek(year, month, 1);
var day = preDays - week + 1;
var grayDay = 'td-gray'; //置灰
var current = false;
var today = new Date(); for (var i = 0; i < (days + week - 1) / 7 ; i++) {
html += '<tr>';
for (var j = 0; j < 7; j++) {
day++;
if (current == false && day > preDays) {
day = 1;
grayDay = '';
current = true;
}
if (current == true && day > days) {
day = 1;
grayDay = 'td-gray';
current = false;
} var todayClass = '';
if (current && today.getFullYear() == year && today.getMonth() == month - 1 && today.getDate() == day) {
todayClass = 'td-today';
}
html += '<td day="' + day + '" class=" ' + grayDay + ' ' + todayClass + '"><div class="div-day-title">' + day + '</div>'; var virtualTaskCount = 0;
for (var k = 0; k < data.list.length; k++) {
var model = data.list[k];
if (grayDay == '' && year == model.year && month == model.month && day == model.day) {
var taskIndex = getTaskIndex(taskCodeList, model.taskCode);
for (var m = virtualTaskCount; m < taskIndex; m++) {
html += '<div class="div-no-task-item"></div>';
virtualTaskCount++;
}
html += '<div class="div-task-item" taskCode="' + model.taskCode + '" style="background-color:#' + getColor(taskCodeList, model.taskCode) + ';">' + model.title + '</div>';
virtualTaskCount++;
}
} html += '</td>';
}
html += '</tr>';
}
table.html(html); //优化显示
if (true) {
for (var i = 0; i < taskCodeList.length; i++) {
table.find("tr").each(function () {
var tr = $(this); var taskItem = tr.find("div[taskCode='" + taskCodeList[i] + "']");
if (taskItem.length > 0) {
var k = -1;
while (k != -2) {
k++;
var bl = true;
taskItem.each(function () {
var prev = $(this).parent().find("div:eq(" + (k + 1) + ")");
if (!prev || prev.length == 0) k = -2;
if (prev && prev.attr("taskCode") == taskCodeList[i]) k = -2;
if (!$(this).parent().attr("class") || !prev || prev.length == 0 || prev.attr("class").indexOf("div-no-task-item") == -1) {
bl = false;
}
});
if (bl) {
taskItem.each(function () {
var item = $(this);
var prev = item.parent().find("div:eq(" + (k + 1) + ")");
if (prev.length > 0) {
item.after('<div class="div-no-task-item"></div>');
item.wrap("<div></div>");
prev.after(item.parent().html());
prev.remove();
item.parent().remove();
}
});
} }
}
});
} //end for taskCodeList
//去空
table.find("td").each(function () {
var td = $(this);
while (true) {
var div = td.find("div:last");
if (div.attr("class").indexOf("div-no-task-item") != -1) {
div.remove();
}
else {
break;
}
}
});
} //end 优化显示 //日期td单击双击
table.find("td").each(function () {
var td = $(this);
var grayDay = td.attr('class').indexOf('td-gray') == -1;
td.click(function () {
if (grayDay) {
if (td.attr("class").indexOf("td-selected") != -1) {
td.removeClass("td-selected");
} else {
$(".td-selected").removeClass("td-selected");
td.addClass("td-selected");
}
}
});
td.dblclick(function () {
if (grayDay) {
add(td.attr("day"));
}
});
}); //任务单击双击
$(".div-task-item").each(function () {
var taskItemDiv = $(this);
var taskCode = taskItemDiv.attr("taskCode");
taskItemDiv.click(function (evt) {
$(".div-task-item").removeClass("highlight-task");
table.find("div[taskCode='" + taskCode + "']").addClass("highlight-task");
evt.stopPropagation();
});
taskItemDiv.dblclick(function (evt) {
evt.stopPropagation();
});
});
} //创建新计划
function add(day) {
data.list.push({ id: '15', taskCode: '000', title: '测试新增', content: '测试内容', year: 2016, month: 1, day: parseInt(day) });
createTaskCodeList(data, taskCodeList)
var scrollTop = $("#div-days").scrollTop();
$("#month").change();
$("#div-days").scrollTop(scrollTop);
} //今天
function gotoToday() {
var today = new Date();
$("#year").val(today.getFullYear());
$("#month").val(today.getMonth() + 1);
$("#month").change();
var top = $(".td-today").position().top - $(".table-days").position().top;
var div = $("#div-days").scrollTop(top);
var div = $(".td-selected").removeClass("td-selected");
} //上月
function preMonth() {
var year = $("#year").val();
var month = $("#month").val();
if (month == 1) {
$("#year").val(parseInt(year) - 1);
$("#month").val(12);
} else {
$("#month").val(parseInt(month) - 1);
}
$("#month").change();
$("#div-days").scrollTop($(window).height());
} //下月
function nextMonth() {
var year = $("#year").val();
var month = $("#month").val();
if (month == 12) {
$("#year").val(parseInt(year) + 1);
$("#month").val(1);
} else {
$("#month").val(parseInt(month) + 1);
}
$("#month").change();
$("#div-days").scrollTop(0);
} //获取task索引
function getTaskIndex(taskCodeList, taskCode) {
var pos = 0;
for (var i = 0; i < taskCodeList.length; i++) {
if (taskCodeList[i] == taskCode) {
break;
}
pos++;
}
return pos;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div style="padding: 5px;">
<div style="padding: 10px;">
<input type="button" value="今天" onclick="gotoToday()" />
<input type="button" value="<" onclick="preMonth()" />
<select id="year" name="year">
<option value="2017">2017</option>
<option value="2016">2016</option>
<option value="2015">2015</option>
<option value="2014">2014</option>
</select>
年
<select id="month" name="month">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
月
<input type="button" value=">" onclick="nextMonth()" />
</div>
<div style="margin-top: 5px;">
<table class="table-title" cellpadding="0" cellspacing="0">
<tr>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
<td>星期六</td>
<td>星期日</td>
</tr>
</table>
</div>
<div id="div-days" style="height: 350px; overflow: auto; margin-top: -1px; border-bottom: solid 1px #ddd;">
<table id="table-days" class="table-days" cellpadding="0" cellspacing="0">
</table>
</div>
</div>
</form>
<script type="text/javascript">
//获取当月天数
function getDaysOfMonth(year, month) {
var d = new Date(year, month, 0);
return d.getDate();
} //获取前一个月天数
function getDaysOfPreMonth(year, month) {
if (month == 1) {
month = 12;
year = year - 1;
}
else {
month = month - 1;
}
var d = new Date(year, month, 0);
return d.getDate();
} //获取当天星期数(0到6)
function getWeek(year, month, day) {
var d = new Date(year, month - 1, day);
return d.getDay();
} //颜色集合
var myColor = [
'ccddff',
'ccffdd',
'eeccff',
'eeffcc',
'ffccee',
'ffeecc'
]; //获取颜色
function getColor(taskCodeList, taskCode) {
var pos = 0;
for (var i = 0; i < taskCodeList.length; i++) {
if (taskCodeList[i] == taskCode) {
break;
}
pos++;
if (pos > myColor.length - 1) {
pos = 0;
}
}
return myColor[pos];
}
</script>
</body>
</html>
可以运行的html代码(放一个jquery.js在同一目录即可)：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>员工周计划</title>
<style type="text/css">
body
{
margin: 0;
padding: 0;
font-size: 12px;
color: #555;
background-color: #fff;
} .table-title
{
border-collapse: collapse;
width: 100%;
border: solid 1px #ddd;
font-size: 12px;
font-weight: bold;
color: #555;
} .table-title td
{
text-align: center;
padding: 5px;
height: 25px;
} .table-days
{
border-collapse: collapse;
width: 100%;
} .table-days td
{
border: solid 1px #ddd;
height: 150px;
vertical-align: top;
width: 14px;
} .td-gray
{
color: #ccc;
background-color: #f7f7f7;
} .div-task-item
{
background-color: #bfecff;
margin-top: 2px;
padding: 2px;
height: 14px;
cursor: default;
/* margin-left: 5px;
margin-right: 5px;*/
} .div-task-item:hover
{
background-color: #ff5588 !important;
} .div-no-task-item
{
margin-top: 2px;
padding: 2px;
height: 14px;
} .td-selected
{
background-color: #e0f2f8 !important;
} .div-day-title
{
text-align: right;
padding: 3px;
} .td-today
{
background-color: #fcd7d7;
} .td-today div:first-child
{
border-top: solid 2px #f72f37;
padding-top: 1px;
} .highlight-task
{
background-color: #ff3366 !important;
color: #fff !important;
}
</style>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
var data = {
empCode: '101',
list: [
//说明：id暂时无用
{ id: '01', taskCode: '001', title: '任务一', content: '测试内容', year: 2016, month: 1, day: 3 },
{ id: '02', taskCode: '001', title: '任务一', content: '测试内容', year: 2016, month: 1, day: 4 },
//{ id: '02', taskCode: '001', title: '任务一', content: '测试内容', year: 2016, month: 1, day: 5 },
{ id: '03', taskCode: '002', title: '任务二', content: '测试内容', year: 2016, month: 1, day: 4 },
//{ id: '04', taskCode: '002', title: '任务二', content: '测试内容', year: 2016, month: 1, day: 5 },
{ id: '05', taskCode: '003', title: '任务三', content: '测试内容', year: 2016, month: 1, day: 5 },
{ id: '06', taskCode: '003', title: '任务三', content: '测试内容', year: 2016, month: 1, day: 6 },
{ id: '07', taskCode: '004', title: '任务四', content: '测试内容', year: 2016, month: 1, day: 6 },
{ id: '08', taskCode: '005', title: '任务五', content: '测试内容', year: 2016, month: 1, day: 6 },
{ id: '09', taskCode: '005', title: '任务五', content: '测试内容', year: 2016, month: 1, day: 7 },
{ id: '10', taskCode: '006', title: '任务六', content: '测试内容', year: 2016, month: 1, day: 7 },
//{ id: '11', taskCode: '006', title: '任务六', content: '测试内容', year: 2016, month: 1, day: 8 },
//{ id: '12', taskCode: '006', title: '任务六', content: '测试内容', year: 2016, month: 1, day: 9 },
{ id: '13', taskCode: '007', title: '任务七', content: '测试内容', year: 2016, month: 1, day: 6 },
{ id: '13', taskCode: '007', title: '任务七', content: '测试内容', year: 2016, month: 1, day: 7 },
{ id: '14', taskCode: '007', title: '任务七', content: '测试内容', year: 2016, month: 1, day: 8 },
//{ id: '15', taskCode: '008', title: '任务八', content: '测试内容', year: 2016, month: 1, day: 6 },
//{ id: '15', taskCode: '008', title: '任务八', content: '测试内容', year: 2016, month: 1, day: 7 },
{ id: '15', taskCode: '008', title: '任务八', content: '测试内容', year: 2016, month: 1, day: 8 },
{ id: '15', taskCode: '008', title: '任务八', content: '测试内容', year: 2016, month: 1, day: 9 },
{ id: '15', taskCode: '009', title: '任务九', content: '测试内容', year: 2016, month: 1, day: 4 },
{ id: '15', taskCode: '009', title: '任务九', content: '测试内容', year: 2016, month: 1, day: 5 },
{ id: '15', taskCode: '010', title: '任务十', content: '测试内容', year: 2016, month: 1, day: 10 },
{ id: '15', taskCode: '010', title: '任务十', content: '测试内容', year: 2016, month: 1, day: 9 },
{ id: '15', taskCode: '011', title: '任务十一', content: '测试内容', year: 2015, month: 12, day: 31 },
{ id: '15', taskCode: '011', title: '任务十一', content: '测试内容', year: 2016, month: 1, day: 1 },
{ id: '15', taskCode: '011', title: '任务十一', content: '测试内容', year: 2016, month: 1, day: 2 },
{ id: '15', taskCode: '011', title: '任务十一', content: '测试内容', year: 2016, month: 1, day: 3 }
]
}; var taskCodeList = new Array();
function createTaskCodeList(data, taskCodeList) {
for (var i = 0; i < data.list.length; i++) {
var bl = true;
for (var j = 0; j < taskCodeList.length; j++) {
if (taskCodeList[j] == data.list[i].taskCode) {
bl = false;
}
}
if (bl) {
taskCodeList.push(data.list[i].taskCode);
}
}
}
createTaskCodeList(data, taskCodeList); $(function () {
$(".table-days").parent().height($(window).height() - $(".table-days").parent().position().top - 10); $("#year").change(function () {
var year = $("#year").val();
var month = $("#month").val();
createPlanTable(year, month);
});
$("#month").change(function () {
var year = $("#year").val();
var month = $("#month").val();
createPlanTable(year, month);
});
gotoToday(); //ie6、7
if ($.browser.msie) {
if (parseInt($.browser.version) == 7 || parseInt($.browser.version) == 6) {
$("#table-days").width($("#table-days").width() - 20);
$("#table-days").parent().height($("#table-days").parent().height() - 15);
}
}
}); //end $ //创建计划表格
function createPlanTable(year, month) {
var html = '';
var table = $("#table-days");
var days = getDaysOfMonth(year, month);
var preDays = getDaysOfPreMonth(year, month);
var week = getWeek(year, month, 1);
var day = preDays - week + 1;
var grayDay = 'td-gray'; //置灰
var current = false;
var today = new Date(); for (var i = 0; i < (days + week - 1) / 7 ; i++) {
html += '<tr>';
for (var j = 0; j < 7; j++) {
day++;
if (current == false && day > preDays) {
day = 1;
grayDay = '';
current = true;
}
if (current == true && day > days) {
day = 1;
grayDay = 'td-gray';
current = false;
} var todayClass = '';
if (current && today.getFullYear() == year && today.getMonth() == month - 1 && today.getDate() == day) {
todayClass = 'td-today';
}
html += '<td day="' + day + '" class=" ' + grayDay + ' ' + todayClass + '"><div class="div-day-title">' + day + '</div>'; var virtualTaskCount = 0;
for (var k = 0; k < data.list.length; k++) {
var model = data.list[k];
if (grayDay == '' && year == model.year && month == model.month && day == model.day) {
var taskIndex = getTaskIndex(taskCodeList, model.taskCode);
for (var m = virtualTaskCount; m < taskIndex; m++) {
html += '<div class="div-no-task-item"></div>';
virtualTaskCount++;
}
html += '<div class="div-task-item" taskCode="' + model.taskCode + '" style="background-color:#' + getColor(taskCodeList, model.taskCode) + ';">' + model.title + '</div>';
virtualTaskCount++;
}
} html += '</td>';
}
html += '</tr>';
}
table.html(html); //优化显示
if (true) {
for (var i = 0; i < taskCodeList.length; i++) {
table.find("tr").each(function () {
var tr = $(this); var taskItem = tr.find("div[taskCode='" + taskCodeList[i] + "']");
if (taskItem.length > 0) {
var k = -1;
while (k != -2) {
k++;
var bl = true;
taskItem.each(function () {
var prev = $(this).parent().find("div:eq(" + (k + 1) + ")");
if (!prev || prev.length == 0) k = -2;
if (prev && prev.attr("taskCode") == taskCodeList[i]) k = -2;
if (!$(this).parent().attr("class") || !prev || prev.length == 0 || prev.attr("class").indexOf("div-no-task-item") == -1) {
bl = false;
}
});
if (bl) {
taskItem.each(function () {
var item = $(this);
var prev = item.parent().find("div:eq(" + (k + 1) + ")");
if (prev.length > 0) {
item.after('<div class="div-no-task-item"></div>');
item.wrap("<div></div>");
prev.after(item.parent().html());
prev.remove();
item.parent().remove();
}
});
} }
}
});
} //end for taskCodeList
//去空
table.find("td").each(function () {
var td = $(this);
while (true) {
var div = td.find("div:last");
if (div.attr("class").indexOf("div-no-task-item") != -1) {
div.remove();
}
else {
break;
}
}
});
} //end 优化显示 //日期td单击双击
table.find("td").each(function () {
var td = $(this);
var grayDay = td.attr('class').indexOf('td-gray') == -1;
td.click(function () {
if (grayDay) {
if (td.attr("class").indexOf("td-selected") != -1) {
td.removeClass("td-selected");
} else {
$(".td-selected").removeClass("td-selected");
td.addClass("td-selected");
}
}
});
td.dblclick(function () {
if (grayDay) {
add(td.attr("day"));
}
});
}); //任务单击双击
$(".div-task-item").each(function () {
var taskItemDiv = $(this);
var taskCode = taskItemDiv.attr("taskCode");
taskItemDiv.click(function (evt) {
$(".div-task-item").removeClass("highlight-task");
table.find("div[taskCode='" + taskCode + "']").addClass("highlight-task");
evt.stopPropagation();
});
taskItemDiv.dblclick(function (evt) {
evt.stopPropagation();
});
});
} //创建新计划
function add(day) {
data.list.push({ id: '15', taskCode: '000', title: '测试新增', content: '测试内容', year: 2016, month: 1, day: parseInt(day) });
createTaskCodeList(data, taskCodeList)
var scrollTop = $("#div-days").scrollTop();
$("#month").change();
$("#div-days").scrollTop(scrollTop);
} //今天
function gotoToday() {
var today = new Date();
$("#year").val(today.getFullYear());
$("#month").val(today.getMonth() + 1);
$("#month").change();
var top = $(".td-today").position().top - $(".table-days").position().top;
var div = $("#div-days").scrollTop(top);
var div = $(".td-selected").removeClass("td-selected");
} //上月
function preMonth() {
var year = $("#year").val();
var month = $("#month").val();
if (month == 1) {
$("#year").val(parseInt(year) - 1);
$("#month").val(12);
} else {
$("#month").val(parseInt(month) - 1);
}
$("#month").change();
$("#div-days").scrollTop($(window).height());
} //下月
function nextMonth() {
var year = $("#year").val();
var month = $("#month").val();
if (month == 12) {
$("#year").val(parseInt(year) + 1);
$("#month").val(1);
} else {
$("#month").val(parseInt(month) + 1);
}
$("#month").change();
$("#div-days").scrollTop(0);
} //获取task索引
function getTaskIndex(taskCodeList, taskCode) {
var pos = 0;
for (var i = 0; i < taskCodeList.length; i++) {
if (taskCodeList[i] == taskCode) {
break;
}
pos++;
}
return pos;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div style="padding: 5px;">
<div style="padding: 10px;">
<input type="button" value="今天" onclick="gotoToday()" />
<input type="button" value="<" onclick="preMonth()" />
<select id="year" name="year">
<option value="2017">2017</option>
<option value="2016">2016</option>
<option value="2015">2015</option>
<option value="2014">2014</option>
</select>
年
<select id="month" name="month">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
月
<input type="button" value=">" onclick="nextMonth()" />
</div>
<div style="margin-top: 5px;">
<table class="table-title" cellpadding="0" cellspacing="0">
<tr>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
<td>星期六</td>
<td>星期日</td>
</tr>
</table>
</div>
<div id="div-days" style="height: 350px; overflow: auto; margin-top: -1px; border-bottom: solid 1px #ddd;">
<table id="table-days" class="table-days" cellpadding="0" cellspacing="0">
</table>
</div>
</div>
</form>
<script type="text/javascript">
//获取当月天数
function getDaysOfMonth(year, month) {
var d = new Date(year, month, 0);
return d.getDate();
} //获取前一个月天数
function getDaysOfPreMonth(year, month) {
if (month == 1) {
month = 12;
year = year - 1;
}
else {
month = month - 1;
}
var d = new Date(year, month, 0);
return d.getDate();
} //获取当天星期数(0到6)
function getWeek(year, month, day) {
var d = new Date(year, month - 1, day);
return d.getDay();
} //颜色集合
var myColor = [
'ccddff',
'ccffdd',
'eeccff',
'eeffcc',
'ffccee',
'ffeecc'
]; //获取颜色
function getColor(taskCodeList, taskCode) {
var pos = 0;
for (var i = 0; i < taskCodeList.length; i++) {
if (taskCodeList[i] == taskCode) {
break;
}
pos++;
if (pos > myColor.length - 1) {
pos = 0;
}
}
return myColor[pos];
}
</script>
</body>
</html>
效果图：
JS实现日程安排 日程安排插件的更多相关文章
- Chocolat.js – 响应式的 jQuery Lightbox 插件
Chocolat.js 使您能够显示一个或多个图像在同一页面上.给用户展示一组图片缩略图,可以显示全页或块.Chocolat.js 可以很好地处理所有主要的浏览器.它在下面这些浏览器测试通过:IE7+ ...
- 【原创】cs+html+js+css模式(六):改造ajax.js，从原来的原生态js修改为依赖于jquery插件
由于原有的ajax可能在性能上,对于jquery的支持不够并且不够方便,开发人员使用的时候需要知道我们内部指定的后缀文件的设置,基于这个前提我们进行了js的改造 // 使用闭包开发插件 ( ...
- js 控制Div循环显示 非插件版
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- ImageLightbox.js – 响应式的图片 Lightbox 插件
ImageLightbox.js 是一款很简洁的用于显示图片灯箱效果(Lightbox)的插件,没有字幕,导航按钮或默认背景.如果默认功能不够用的话,你可以很容易地自定义 JavaScript 函数扩 ...
- KoaHub平台基于Node.js开发的Koa 连接支付宝插件代码信息详情
KoaHub平台基于Node.js开发的Koa 链接支付宝插件代码信息详情 easy-alipay alipay payment & notification APIs easy-alipay ...
- baguetteBox.js - 简单易用的 lightbox 插件
baguetteBox.js 是一个简单和易于使用的响应式的图像 Lightbox 插件,支持滑动手势在移动设备上使用.纯 JavaScript 实现,不依赖第三方库和插件,赶紧来体验吧. 在线演示 ...
- jquery.chosen.js下拉选择框美化插件项目实例
由于之前使用的bootstrap-select插件是建立在bootstrap基础上的,实际使用到项目中的时候,与我们使用的ace-admin(基于bootstrap)存在样式冲突,导致下拉框的样式发生 ...
- PHP 多图上传，图片批量上传插件，webuploader.js，百度文件上传插件
PHP 多图上传,图片批量上传插件,webuploader.js,百度文件上传插件(案例教程) WebUploader作用:http://fex.baidu.com/webuploader/gett ...
- 【原创】JS文件替换神器--Chrome ReRes插件
本文仅供学习交流使用,如侵立删! JS文件替换神器--Chrome ReRes插件 ReRes插件安装配置 ReRes项目官方地址:https://github.com/annnhan/ReRes 谷 ...
随机推荐
- ZooKeeper学习第一期---Zookeeper简单介绍
一.分布式协调技术 在给大家介绍ZooKeeper之前先来给大家介绍一种技术——分布式协调技术.那么什么是分布式协调技术?那么我来告诉大家,其实分布式协调技术主要用来解决分布式环境当中多个进程之间的同 ...
- 认识SQLServer索引以及单列索引和多列索引的不同
一.索引的概念 索引的用途:我们对数据查询及处理速度已成为衡量应用系统成败的标准,而采用索引来加快数据处理速度通常是最普遍采用的优化方法. 索引是什么:数据库中的索引类似于一本书的目录,在一本书中使 ...
- Javascript事件模型系列（一）事件及事件的三种模型
一.开篇 在学习javascript之初,就在网上看过不少介绍javascript事件的文章,毕竟是js基础中的基础,文章零零散散有不少,但遗憾的是没有看到比较全面的系列文章.犹记得去年这个时候,参加 ...
- [ZigBee] 1、 ZigBee简介
前言 目前,中国大力推广的物联网是zigbee 应用的主战场,物联网通过智能感知.识别技术与普适计算(我还特意申请了个域名psjs.vip).泛在网络的融合应用,被称为继计算机.互联网之后世界信息产业 ...
- i++ and ++i efficiency
其实这个问题,百度的话,有一大堆的参考资料,但是,在这里,我产生了一些困惑,他们所分析的结果,和我的测试代码不一致,这让我纠结了,所以,再次的写一下这个问题,顺顺思路. 我的测试环境:系统:Windo ...
- C#入门基础三
封装:简化用户接口,隐藏实现细节. get{return 属性值:} set{属性值 = value:} 继承:子类继承父类所有非私有成员.继承具有传递性,单根性. 隐式继承:用引号(:)实现. 显示 ...
- iOS xcode6 设置多语言
1,首先新建一个文件,选中ios模块下Rescource的Strings File 类型.eg:文件 2,选中该文件,右边栏选该文件属性,选中Localizable模块,选中localiz,这时会弹出 ...
- 爱上MVC系列~带扩展名的路由失效问题
回到目录 对MVC中,对URL进行重写变得非常方便,你只要设置相应的路由规则即可完成,但进行MVC3后,发现设置了以下路由,系统具体不认 routes.MapRoute( name: "De ...
- .NetCore~Linux环境下部署
NetCore正式版已经出现有段时候了,Windows下使用vs2015开发.netCore应用程序,然后通过dotnet程序开启WEB服务,用着很像node.js,当然我们不会于只局限于window ...
- MyBatis 环境搭建 （一）
一.MyBatis简介 MyBatis 是支持普通 SQL查询,存储过程和高级映射的优秀持久层框架.MyBatis 消除了几乎所有的JDBC代码和参数的手工设置以及结果集的检索.MyBatis 使用简 ...