FullCalendar:eventColor,eventBackgroundColor, eventBorderColor, and eventTextColor

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>背景色設定</title>
<link href='../fullcalendar.min.css' rel='stylesheet' />
<link href='../fullcalendar.print.min.css' rel='stylesheet' media='print' />
<script src='../lib/moment.min.js'></script>
<script src='../lib/jquery.min.js'></script>
<script src='../fullcalendar.min.js'></script>
<script>
// ver 3.1.2 當前最新版本,塗聚文Geovin Du 註
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listMonth'
},
defaultDate: '2017-04-12',
navLinks: true, // can click day/week names to navigate views
//businessHours: true, // display business hours 默認設置工作時間和日期
businessHours:{    // days of week. an array of zero-based day of week integers (0=Sunday)   true  
dow: [ 1, 2, 3, 4, 5 ], // Monday - Fri    
start: '09:00', // a start time (09am in this example)    
end: '18:00', // an end time (6pm in this example)
overlap: false,
rendering: 'background', //自定背景色
color: '#ffffe0'
},
editable: true,
events: [
{
title: 'Business Lunch',
start: '2017-04-03T13:00:00',
constraint: 'businessHours'
},
{
title: 'Meeting',
start: '2017-04-13T11:00:00',
constraint: 'availableForMeeting', // defined below
},
{
title: 'Conference',
start: '2017-04-18',
end: '2017-04-20'
},
{
title: 'Party',
start: '2017-04-29T20:00:00'
},
// areas where "Meeting" must be dropped
{
id: 'availableForMeeting',
title: 'availableForMeeting',
start: '2017-04-11T10:00:00',
end: '2017-04-11T16:00:00',
//rendering: 'border-color', //自定指定時間段的樣式					
//color: '#ff9f89'
//或
//backgroundColor:'#cccccc',
//textColor:'#ff9f89',
//borderColor:'#9999f89'
},
{
id: 'availableForMeeting',
start: '2017-04-13T10:00:00',
end: '2017-04-13T16:00:00',			
//rendering: 'background-color', //自定指定時間段的樣式
//color: '#ff9f89'
},
// red areas where no events can be dropped
{
start: '2017-04-24',
end: '2017-04-28',
overlap: false,
},
{
start: '2017-04-06',
end: '2017-04-08',
overlap: false,
}
],
//eventColor: '#378006', //
eventTextColor: 'black',
eventBorderColor:'red',
eventBackgroundColor:'green'
});
});
</script>
<style type="text/css">
body {
margin: 40px 10px;
padding: 0;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
font-size: 14px;
}
#calendar {
max-width: 900px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id='calendar'></div>
</body>
</html>

　　https://fullcalendar.io/docs1/event_data/Event_Source_Object/

color,background-color,border-color

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="fullCalendarTimepicker.aspx.cs" Inherits="fullcalendardemo.fullCalendarTimepicker" %>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>ASP.NET FullCalendar</title>
<link href="ajax/libs/jqueryui/1.12.1/themes/cupertino/jquery-ui.min.css" rel="stylesheet" />
<link href="ajax/libs/fullcalendar/3.1.1/fullcalendar.min.css" rel="stylesheet" />
<link href="ajax/libs/qtip2/3.0.3/jquery.qtip.min.css" rel="stylesheet" />   
<link rel="stylesheet" media="all" type="text/css" href="ajax/libs/timepicker/jquery-ui-timepicker-addon.css" /> 
<link rel="stylesheet" href="ajax/libs/formValidator/css/validationEngine.jquery.css" type="text/css"  media="screen" charset="utf-8" />
<style type='text/css'>
body
{
margin-top: 40px;
text-align: center;
font-size: 14px;
font-family: "Lucida Grande" ,Helvetica,Arial,Verdana,sans-serif;
}
#calendar
{
width: 900px;
margin: 0 auto;
}
/* css for timepicker */
.ui-timepicker-div dl
{
text-align: left;
}
.ui-timepicker-div dl dt
{
height: 25px;
}
.ui-timepicker-div dl dd
{
margin: -25px 0 10px 65px;
}
.style1
{
width: 100%;
}
/* table fields alignment*/
.alignRight
{
text-align:right;
padding-right:10px;
padding-bottom:10px;
}
.alignLeft
{
text-align:left;
padding-bottom:10px;
}
</style>
</head>
<body>
<form id="form1" runat="server">  
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">  
</asp:ScriptManager>  
<div id="calendar">  
</div>  
<div id="updatedialog" style="font: 70% 'Trebuchet MS', sans-serif; margin: 50px;display: none;" title="Update or Delete Event">  
<table class="style1">  
<tr>  
<td class="alignRight">  
標題:</td>  
<td class="alignLeft">  
<input id="eventName" type="text" size="33" /><br /></td>  
</tr>  
<tr>  
<td class="alignRight">  
描述:</td>  
<td class="alignLeft">  
<textarea id="eventDesc" cols="30" rows="3" ></textarea></td>  
</tr>  
<tr>  
<td class="alignRight">  
事件類型:</td>  
<td class="alignLeft">                 
<select id="editTypeid" name="editTypeid">
<option value="1">公务</option>
<option value="2">私务</option>
</select>
</td>  
</tr> 
<tr>  
<td class="alignRight">  
是否全天:</td>  
<td class="alignLeft"> 
<input id="editday" type="checkbox"  name="eidtday"/>
</td>  
</tr> 
<tr>  
<td class="alignRight">  
開始時間:</td>  
<td class="alignLeft">  
<input id="eventStart"  name="eventStart" class="validate[required,funcCall[validate12time]]" value="" /></td>  
</tr>  
<tr>  
<td class="alignRight">  
結束時間: </td>  
<td class="alignLeft">  
<input id="eventEnd" name="eventEnd" class="validate[required,funcCall[validate12time]]" value=""/><input type="hidden" id="eventId" /></td>  
</tr>  
</table>  
</div>  
<div id="addDialog" style="font: 70% 'Trebuchet MS', sans-serif; margin: 50px;" title="Add Event">  
<table class="style1">  
<tr>  
<td class="alignRight">  
標題:</td>  
<td class="alignLeft">  
<input id="addEventName" type="text" size="33" /><br /></td>  
</tr>  
<tr>  
<td class="alignRight">  
描述:</td>  
<td class="alignLeft">  
<textarea id="addEventDesc" cols="30" rows="3" ></textarea></td>  
</tr>
<tr>  
<td class="alignRight">  
事件類型:</td>  
<td class="alignLeft">  
<select id="addTypeid" name="addTypeid">
<option value="1">公务</option>
<option value="2">私务</option>
</select>
</td>  
</tr>
<tr>  
<td class="alignRight">  
是否全天:</td>  
<td class="alignLeft"> 
<input id="addallday" type="checkbox" name="addallday"/> 
</td>  
</tr>           
<tr>  
<td class="alignRight">  
開始時間:</td>  
<td class="alignLeft">  
<input id="addEventStartDate" class="validate[required,funcCall[validate2time]]" name="addEventStartDate" value=""/></td>  
</tr>  
<tr>  
<td class="alignRight">  
結束時間:</td>  
<td class="alignLeft">  
<input id="addEventEndDate" class="validate[required,funcCall[validate2time]]" name="addEventEndDate" value=""/></td>  
</tr>  
</table>  
</div>  
<div runat="server" id="jsonDiv" />  
<input type="hidden" id="hdClient" runat="server" />  
</form>  
<script src="ajax/libs/moment.js/2.18.1/moment.min.js" type="text/javascript"></script>  
<script src="ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript"></script>  
<script src="ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" type="text/javascript"></script>  
<script src="ajax/libs/qtip2/3.0.3/jquery.qtip.min.js" type="text/javascript"></script>  
<script type="text/javascript" src="ajax/libs/timepicker/jquery-ui-timepicker-addon.js"></script>  
<script type="text/javascript" src="ajax/libs/timepicker/i18n/jquery-ui-timepicker-addon-i18n.min.js"></script>  
<script type="text/javascript" src="ajax/libs/timepicker/i18n/jquery-ui-timepicker-zh-CN.js"></script>  
<script type="text/javascript" src="ajax/libs/timepicker/jquery-ui-sliderAccess.js"></script>  
<script src="ajax/libs/fullcalendar/3.1.1/fullcalendar.min.js" type="text/javascript"></script>  
<script src='ajax/libs/fullcalendar/3.1.1/locale-all.js' type="text/javascript"></script>  
<script src="ajax/libs/formValidator/js/jquery.validationEngine.js" type="text/javascript"></script>  
<script src="ajax/libs/formValidator/js/languages/jquery.validationEngine-zh_CN.js" type="text/javascript"></script>    
<script src="ajax/libs/jqueryui/1.12.1/ui/i18n/datepicker-zh-CN.js" type="text/javascript"></script>  
<script src="scripts/calendarscriptTime.js" type="text/javascript"></script>  
</body>  
</html>

　　calendarscriptTime.js

var currentUpdateEvent;
var addStartDate;
var addEndDate;
var globalAllDay;
var addtypeid;
var addallday;
var dt;
//修改時,穫取值
// 涂聚文 Geovin Du edit 20170417
//增加是否全天,事件類型
function updateEvent(event, element) {
//alert(event.description);
if ($(this).data("qtip")) $(this).qtip("destroy");
currentUpdateEvent = event;
dt= new Date()
$('#updatedialog').dialog('open');
$("#eventName").val(event.title);
$("#eventDesc").val(event.description);
$("#eventId").val(event.id);
$("#eventStart").val(""   $.fullCalendar.formatDate(event.start, "YYYY-MM-DD HH:mm")); //text $.fullCalendar.formatDate(event.start, "YYYY-MM-DD HH:mm")
$("#eventStart").datetimepicker({ timeInput: true, changeMonth: true, changeYear: true, dateFormat: 'yy-mm-dd', timeFormat: 'HH:mm', hourMin: 5, hourMax: 24, hourGrid: 3, minuteGrid: 15 }); //timeInput: true,
//$("#eventStart").datetimepicker('setDate', (new Date()));
$("#editTypeid").val(event.typeid);    
if (event.end === null) {
$("#eventEnd").val(""   $.fullCalendar.formatDate(dt, "YYYY-MM-DD HH:mm")); //text
}
else {
$("#eventEnd").val(""   $.fullCalendar.formatDate(event.end, "YYYY-MM-DD HH:mm")); //text  event.end.toLocaleString()
$("#eventEnd").datetimepicker({ timeInput: true, changeMonth: true, changeYear: true, dateFormat: 'yy-mm-dd', timeFormat: 'HH:mm', hourMin: 5, hourMax: 24, hourGrid: 3, minuteGrid: 15 }); //
}
$("#editday").prop("checked", event.allDay); //
return false;
}
function updateSuccess(updateResult) {
//alert(updateResult);
}
function deleteSuccess(deleteResult) {
//alert(deleteResult);
}
function addSuccess(addResult) {
// if addresult is -1, means event was not added
//    alert("added key: "   addResult);
if (addResult != -1) {
$('#calendar').fullCalendar('renderEvent',
{
title: $("#addEventName").val(),
start: addStartDate,
end: addEndDate,
id: addResult,
description: $("#addEventDesc").val(),
allDay: $("#addallday").prop('checked'), //  globalAllDay,
typeid: $("#addTypeid").val() //addtypeid
},
true // make the event "stick"
);
$('#calendar').fullCalendar('unselect');
}
}
function UpdateTimeSuccess(updateResult) {
//alert(updateResult);
}
//
$("#addEventStartDate").datetimepicker({
timeInput: true,
changeMonth: true,
changeYear: true,
dateFormat: 'yy-mm-dd',
timeFormat: 'HH:mm', hourMin: 5, hourMax: 24, hourGrid: 3, minuteGrid: 15
});
//
$("#addEventEndDate").datetimepicker({
timeInput: true,
changeMonth: true,
changeYear: true,
dateFormat: 'yy-mm-dd',
timeFormat: 'HH:mm', hourMin: 5, hourMax: 24, hourGrid: 3, minuteGrid: 15
});
//選擇時，穫取值
function selectDate(start, end, allDay, typeid) {
//$('#addEventStartDate').datetimepicker();
$('#addDialog').dialog('open');
$("#addEventStartDate").val(""   $.fullCalendar.formatDate(start, "YYYY-MM-DD HH:mm")); //text //標簽span $.fullCalendar.formatDate(start, "yyyy/MM/dd HH:mm");
$("#addEventEndDate").val(""   $.fullCalendar.formatDate(end, "YYYY-MM-DD HH:mm")); //text $.fullCalendar.formatDate(end, "yyyy/MM/dd HH:mm");
//$("#addEventStartDate").datetimepicker('setDate', $.fullCalendar.formatDate(start, "YYYY-MM-DD HH:mm")); //設置值,日期格式還存在不相符問題
addStartDate = start;
addEndDate = end;
globalAllDay = allDay;
addtypeid = typeid;
//alert(allDay);
}
function updateEventOnDropResize(event, allDay) {
//alert("allday: "   allDay);
var eventToUpdate = {
id: event.id,
start: event.start
};
if (event.end === null) {
eventToUpdate.end = eventToUpdate.start;
}
else {
eventToUpdate.end = event.end;
}
var endDate;
if (!event.allDay) {
endDate = new Date(eventToUpdate.end   60 * 60000);
endDate = endDate.toJSON();
}
else {
endDate = eventToUpdate.end.toJSON();
}
eventToUpdate.start = eventToUpdate.start.toJSON();
eventToUpdate.end = eventToUpdate.end.toJSON(); //endDate;
eventToUpdate.allDay = event.allDay;
PageMethods.UpdateEventTime(eventToUpdate, UpdateTimeSuccess);
}
function eventDropped(event, dayDelta, minuteDelta, allDay, revertFunc) {
if ($(this).data("qtip")) $(this).qtip("destroy");
updateEventOnDropResize(event);
}
function eventResized(event, dayDelta, minuteDelta, revertFunc) {
if ($(this).data("qtip")) $(this).qtip("destroy");
updateEventOnDropResize(event);
}
//隻可輸入數字，字母，中文，中文標點符號 20170417 塗聚文 EDIT
function checkForSpecialChars(stringToCheck) {
var pattern = /[^A-Za-z0-9 |\u4e00-\u9fa5|\u3002|\uff1f|\uff01|\uff0c|\u3001|\uff1b|\uff1a|\u201c|\u201d|\u2018|\u2019|\uff08|\uff09|\u300a|\u300b|\u3008|\u3009|\u3010|\u3011|\u300e|\u300f|\u300c|\u300d|\ufe43|\ufe44|\u3014|\u3015|\u2026|\u2014|\uff5e|\ufe4f|\uffe5]/;  //A-Za-z0-9
return pattern.test(stringToCheck);
}
//判斷是否整天時間(根据開始時間和結束時間)
function isAllDay(startDate, endDate) {
var allDay;
//startDate.format("HH:mm:ss") == "00:00:00" && endDate.format("HH:mm:ss") == "00:00:00"
if (getDiffIntHour(startDate, endDate)) 
{
allDay = true;
globalAllDay = true;
}
else {
allDay = false;
globalAllDay = false;
}
return allDay;
}
//大于二十四小時為大于1天
function getDiffIntHour(startDate, endDate) {
var allDay;
var diffMs = Math.abs(endDate - startDate);
var diffDays = Math.round(diffMs / 86400000); // days
var diffHrs = Math.round((diffMs % 86400000) / 3600000); // hours
var diffMins = Math.round(((diffMs % 86400000) % 3600000) / 60000); // minutes
var diff = endDate - startDate;
var diffSeconds = diff / 1000;
var HH = Math.floor(diffSeconds / 3600);
var MM = Math.floor(diffSeconds % 3600) / 60;
if (HH > 24) {
allDay = true;
globalAllDay = true;
}
else {
allDay = false;
globalAllDay = false;
}
return allDay;
}
///
function getDiffTime(startDate, endDate) {
var allDay;
var diffMs = Math.abs(endDate - startDate);
var diffDays = Math.floor(diffMs / 86400000); // days
var diffHrs = Math.floor((diffMs % 86400000) / 3600000); // hours
var diffMins = Math.floor(((diffMs % 86400000) % 3600000) / 60000); // minutes
if (diffHrs > 24) {
allDay = true;
globalAllDay = true;
}
else {
allDay = false;
globalAllDay = false;
}
return allDay;
}
///
function GetDateDiff(startTime, endTime, diffType) {
//将xxxx-xx-xx的时间格式，转换为 xxxx/xx/xx的格式 
startTime = startTime.replace(/\-/g, "/");
endTime = endTime.replace(/\-/g, "/");
//将计算间隔类性字符转换为小写
diffType = diffType.toLowerCase();
var sTime = new Date(startTime); //开始时间
var eTime = new Date(endTime); //结束时间
//作为除数的数字
var timeType = 1;
switch (diffType) {
case "second":
timeType = 1000;
break;
case "minute":
timeType = 1000 * 60;
break;
case "hour":
timeType = 1000 * 3600;
break;
case "day":
timeType = 1000 * 3600 * 24;
break;
default:
break;
}
return parseInt((eTime.getTime() - sTime.getTime()) / parseInt(timeType));
}
//提示內容
function qTipText(start, end, description) {
var text;
if (end !== null)
text = "<strong>开始:</strong> "   start.format("YYYY-MM-DD hh:mm T")   "<br/><strong>结束:</strong> "   end.format("YYYY-MM-DD hh:mm T")   "<br/><br/>"   description;
else
text = "<strong>开始:</strong> "   start.format("YYYY-MM-DD hh:mm T")   "<br/><strong>结束:</strong><br/><br/>"   description;
return text;
}
$(document).ready(function () {
// update Dialog 修改，刪除
$('#updatedialog').dialog({
autoOpen: false,
width: 470,
buttons: {
"update": function () {
//alert(currentUpdateEvent.title);
//var stest = $("#editday").prop('checked'); //
//alert(stest);
var eventToUpdate = {
id: currentUpdateEvent.id,
title: $("#eventName").val(),
description: $("#eventDesc").val(),
allDay: $("#editday").prop('checked'),
typeid: $("#editTypeid").val()
};
if (checkForSpecialChars(eventToUpdate.title) || checkForSpecialChars(eventToUpdate.description)) {
alert("please enter characters: 可輸入數字，字母，中文，中文標點符號, 空格");
}
else {
PageMethods.UpdateEvent(eventToUpdate, updateSuccess);
$(this).dialog("close");
currentUpdateEvent.title = $("#eventName").val();
currentUpdateEvent.description = $("#eventDesc").val();
$('#calendar').fullCalendar('updateEvent', currentUpdateEvent);
$('#calendar').fullCalendar('refresh');//
}
},
"delete": function () {
if (confirm("do you really want to delete this event?")) {
PageMethods.deleteEvent($("#eventId").val(), deleteSuccess);
$(this).dialog("close");
$('#calendar').fullCalendar('removeEvents', $("#eventId").val());
}
}
}
});
//add dialog 添加
$('#addDialog').dialog({
autoOpen: false,
width: 470,
buttons: {
"Add": function () {
//alert("sent:"   addStartDate.format("dd-MM-yyyy hh:mm:ss tt")   "=="   addStartDate.toLocaleString());
//alert($("#addallday").is('checked'));
var eventToAdd = {
title: $("#addEventName").val(),
description: $("#addEventDesc").val(),
typeid: $("#addTypeid").val(),
start: addStartDate.toJSON(), //addStartDate.toJSON()
end: addEndDate.toJSON(),
allDay: $("#addallday").prop('checked')//isAllDay(addStartDate, addEndDate)  //$('input[name=foo]').is(':checked')
};
if (checkForSpecialChars(eventToAdd.title) || checkForSpecialChars(eventToAdd.description)) {
alert("please enter characters: 可輸入數字，字母，中文，中文標點符號, 空格");
}
else {
//alert("sending "   eventToAdd.title);
PageMethods.addEvent(eventToAdd, addSuccess);
$(this).dialog("close");
}
}
}
});
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var options = {
weekday: "long", year: "numeric", month: "short",
day: "numeric", hour: "2-digit", minute: "2-digit"
};
$('#calendar').fullCalendar({
theme: true,
header: {
left: 'prev,next today customBtn',
center: 'title',
right: 'month,agendaWeek,agendaDay,listWeek' //顯示日程列表
},
customButtons: {
customBtn: {
text: 'Custom Button',
click: function () {
alert('This custom button is hot! ?\nNow go have fun!');
}
}
},
defaultView: 'agendaWeek',
eventClick: updateEvent,
selectable: true,
selectHelper: true,
businessHours: {    // days of week. an array of zero-based day of week integers (0=Sunday)   true  
dow: [1, 2, 3, 4, 5], // Monday - Thursday    
start: '09:00', // a start time (09am in this example)    
end: '18:00', // an end time (6pm in this example)
overlap: false,
rendering: 'background', //自定背景色
color: '#ffffe0'
},
select: selectDate,
editable: true,
navLinks: true, // can click day/week names to navigate views
weekNumbers: true, //顯示第几周
//weekNumbersWithinDays: true,
weekNumberCalculation: 'zh-cn',
locale: 'zh-cn',
events: "JsonResponse.ashx",
eventDrop: eventDropped, //可以拖動
eventResize: eventResized, //可以改變大小
eventRender: function (event, element) {
//alert(event.title);
element.qtip({
content: {
text: qTipText(event.start, event.end, event.description), //提示顯示的內容
title: '<strong>'   event.title   ','   event.typeid   '</strong>'
},
position: {
my: 'bottom left',
at: 'top right'
},
style: { classes: 'qtip-shadow qtip-rounded' }
});
}
});
});
function validate12time() {
//alert("debug");
var start = $("#eventStart").val();
var end = $("#eventEnd").val();
var cresult = 0;
if (new Date(start) < new Date(end)) {
cresult = 0;
}
else {
cresult = 1;
}
//     alert(cresult);
if (cresult == 0) {
return false;
} else if (cresult == 1) {
$.validationEngine.closePrompt("#eventStart");
return true;
}
}
function validate2time() {
//alert("debug");
var start = $("#addEventStartDate").val();
var end = $("#addEventEndDate").val();
var cresult = 0;
if (new Date(start) < new Date(end)) {
cresult = 0;
}
else {
cresult = 1;
}
//     alert(cresult);
if (cresult == 0) {
return false;
} else if (cresult == 1) {
$.validationEngine.closePrompt("#addEventStartDate");
return true;
}
}

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="typedemo.aspx.cs" Inherits="fullcalendardemo.typedemo" %>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>ASP.NET FullCalendar--jQuery MiniColors</title>
<link href="ajax/libs/jqueryui/1.12.1/themes/cupertino/jquery-ui.min.css" rel="stylesheet" />
<link rel="stylesheet" href="ajax/libs/bootstrap/3.3.1/css/bootstrap.min.css"/>
<link rel="stylesheet" href="ajax/libs/minicolors/jquery.minicolors.css"/>      
<script src="ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript"></script>  
<script src="ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" type="text/javascript"></script> 
<!-- Bootstrap 3 -->    
<script src="ajax/libs/bootstrap/3.3.1/js/bootstrap.min.js" type="text/javascript"></script>
<!-- MiniColors -->
<script src="ajax/libs/minicolors/jquery.minicolors.js" type="text/javascript"></script>
<style type="text/css">
dl {
margin: 20px 0;
}
dt {
font-size: 120%;
}
dd {
padding: 10px 20px 20px 20px;
}
dd:last-child {
border-bottom: none;
}
code {
color: black;
border: none;
background: rgba(128, 128, 128, .1);
}
pre {
background: #f8f8f8;
border: none;
color: #333;
padding: 20px;
}
h2 {
margin-top: 50px;
}
h3 {
color: #aaa;
}
.jumbotron {
padding: 40px;
}
.jumbotron h1 {
margin-top: 0;
}
.jumbotron p:last-child {
margin-bottom: 0;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$('.demo').each(function () {
//
// Dear reader, it's actually very easy to initialize MiniColors. For example:
//
//  $(selector).minicolors();
//
// The way I've done it below is just for the demo, so don't get confused
// by it. Also, data- attributes aren't supported at this time...they're
// only used for this demo.
//
$(this).minicolors({
control: $(this).attr('data-control') || 'hue',
defaultValue: $(this).attr('data-defaultValue') || '',
format: $(this).attr('data-format') || 'hex',
keywords: $(this).attr('data-keywords') || '',
inline: $(this).attr('data-inline') === 'true',
letterCase: $(this).attr('data-letterCase') || 'lowercase',
opacity: $(this).attr('data-opacity'),
position: $(this).attr('data-position') || 'bottom left',
swatches: $(this).attr('data-swatches') ? $(this).attr('data-swatches').split('|') : [],
change: function (value, opacity) {
if (!value) return;
if (opacity) value  = ', '   opacity;
if (typeof console === 'object') {
console.log(value);
}
},
theme: 'bootstrap'
});
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<!-- Control types -->
<h3>Control Types</h3>
<div class="well">
<div class="row">
<div class="col-lg-4 col-sm-4 col-12">
<div class="form-group">
<label for="hue-demo">Hue (default)</label>
<input type="text" id="hue-demo" class="form-control demo" data-control="hue" value="#ff6161">
</div>
<div class="form-group">
<label for="saturation-demo">Saturation</label>
<input type="text" id="saturation-demo" class="form-control demo" data-control="saturation" value="#0088cc">
</div>
</div>
<div class="col-lg-4 col-sm-4 col-12">
<div class="form-group">
<label for="brightness-demo">Brightness</label>
<input type="text" id="brightness-demo" class="form-control demo" data-control="brightness" value="#00ffff">
</div>
<div class="form-group">
<label for="wheel-demo">Wheel</label>
<input type="text" id="wheel-demo" class="form-control demo" data-control="wheel" value="#ff99ee">
</div>
</div>
</div>
</div>
<!-- Input modes -->
<h3>Input Modes</h3>
<div class="well">
<div class="row">
<div class="col-lg-4 col-sm-4 col-12">
<div class="form-group">
<label for="text-field">Text field</label>
<br>
<input type="text" id="text-field" class="form-control demo" value="#70c24a">
</div>
<div class="form-group">
<label for="hidden-input">Hidden Input</label>
<br>
<input type="hidden" id="hidden-input" class="demo" value="#db913d">
</div>
</div>
<div class="col-lg-4 col-sm-4 col-12">
<div class="form-group">
<label for="inline">Inline</label>
<br>
<input type="text" id="inline" class="form-control demo" data-inline="true" value="#4fc8db">
</div>
</div>
</div>
</div>
<!-- Positions -->
<h3>Positions</h3>
<div class="well">
<p>
Valid positions include <code>bottom left</code>, <code>bottom right</code>, <code>top
left</code>, and <code>top right</code>.
</p>
<div class="row">
<div class="col-lg-4 col-sm-4 col-12">
<div class="form-group">
<label for="position-bottom-left">bottom left (default)</label>
<input type="text" id="position-bottom-left" class="form-control demo" data-position="bottom left" value="#0088cc">
</div>
<div class="form-group">
<label for="position-top-left">top left</label>
<input type="text" id="position-top-left" class="form-control demo" data-position="top left" value="#0088cc">
</div>
</div>
<div class="col-lg-4 col-sm-4 col-12">
<div class="form-group">
<label for="position-bottom-right">bottom right</label>
<input type="text" id="position-bottom-right" class="form-control demo" data-position="bottom right" value="#0088cc">
</div>
<div class="form-group">
<label for="position-top-right">top right</label>
<input type="text" id="position-top-right" class="form-control demo" data-position="top right" value="#0088cc">
</div>
</div>
<div class="col-lg-4 col-sm-4 col-12">
</div>
</div>
</div>
<!-- RGB(A) -->
<h3>RGB(A)</h3>
<div class="well">
<div class="row">
<div class="col-lg-4 col-sm-4 col-12">
<div class="form-group">
<label for="rgb">RGB</label>
<br>
<input type="text" id="rgb" class="form-control demo" data-format="rgb" value="rgb(33, 147, 58)">
<span class="help-block">
RGB input can be assigned by setting the <code>format</code> option
to <code>rgb</code>.
</span>
</div>
</div>
<div class="col-lg-4 col-sm-4 col-12">
<div class="form-group">
<label for="rgba">RGBA</label>
<br>
<input type="text" id="rgba" class="form-control demo" data-format="rgb" data-opacity=".5" value="rgba(52, 64, 158, 0.5)">
<span class="help-block">
RGBA input can be assigned by setting the <code>format</code>
option to <code>rgb</code> and <code>opacity</code> option to
<code>true</code>.
</span>
</div>
</div>
</div>
</div>
<!-- and more -->
<h3>…and more!</h3>
<div class="well">
<div class="row">
<div class="col-lg-4 col-sm-4 col-12">
<div class="form-group">
<label for="opacity">Opacity</label>
<br>
<input type="text" id="opacity" class="form-control demo" data-opacity=".5" value="#766fa8">
<span class="help-block">
Opacity can be assigned by including the <code>data-opacity</code>
attribute or by setting the <code>opacity</code> option to
<code>true</code>.
</span>
</div>
</div>
<div class="col-lg-4 col-sm-4 col-12">
<div class="form-group">
<label for="keywords">Keywords</label>
<br>
<input type="text" id="keywords" class="form-control demo" data-keywords="transparent, initial, inherit" value="transparent">
<span class="help-block">
CSS-wide keywords can be assigned by setting the <code>keywords</code>
option to a comma-separated list of valid keywords: <code>transparent,
initial, inherit</code>.
</span>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-sm-4 col-12">
<div class="form-group">
<label for="default-value">Default Value</label>
<br>
<input type="text" id="default-value" class="form-control demo" data-defaultValue="#ff6600">
<span class="help-block">
This field has a default value assigned to it, so it will never be empty.
</span>
</div>
</div>
<div class="col-lg-4 col-sm-4 col-12">
<div class="form-group">
<label for="letter-case">Letter Case</label>
<br>
<input type="text" id="letter-case" class="form-control demo" data-letterCase="uppercase" value="#abcdef">
<span class="help-block">
This field will always be uppercase.
</span>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-sm-4 col-12">
<div class="form-group">
<label for="input-group">Input Groups</label>
<div class="input-group">
<input type="text" id="input-group" class="form-control demo" value="#ff0000"/>
<span class="input-group-btn">
<button class="btn btn-default" type="button">Button</button>
</span>
</div>
<span class="help-block">
Example using Bootstrap's input groups.
</span>
</div>
</div>
<div class="col-lg-4 col-sm-4 col-12">
<div class="form-group">
<label for="more-input-group">More Input Groups</label>
<div class="input-group">
<span class="input-group-addon">Color</span>
<input type="text" id="more-input-group" class="form-control demo" value="#ff0000"/>
<span class="input-group-btn">
<button class="btn btn-default" type="button">Button</button>
</span>
</div>
<span class="help-block">
Input group example with addon.
</span>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-sm-4 col-12">
<div class="form-group">
<label for="letter-case">Swatches</label>
<br>
<input type="text" id="swatches" class="form-control demo" data-swatches="#ef9a9a|#90caf9|#a5d6a7|#fff59d|#ffcc80|#bcaaa4|#eeeeee|#f44336|#2196f3|#4caf50|#ffeb3b|#ff9800|#795548|#9e9e9e" value="#abcdef">
<span class="help-block">
Example with swatches.
</span>
</div>
</div>
<div class="col-lg-4 col-sm-4 col-12">
<div class="form-group">
<label for="letter-case">Swatches and opacity</label>
<br>
<input type="text" id="swatches" class="form-control demo" data-format="rgb" data-opacity="1" data-swatches="#fff|#000|#f00|#0f0|#00f|#ff0|rgba(0,0,255,0.5)"  value="rgba(14, 206, 235, .5)">
<span class="help-block">
Example with swatches and opacity.
</span>
</div>
</div>
</div>
</div>
</div>
</form>
</body>
</html>

　　https://github.com/coldicelion/Simple-Web-Crawler （网络爬虫）