html:

<div class="dotDate"></div>

<style type="text/css">
		 /* 日期樣式 */
		.datePicker caption{text-align:center;}
		.datePicker caption label{cursor: default;display:inline-block;width:60%;line-height:2.2;}
		.datePicker caption .left,.datePicker caption .right{display:inline-block;width:width: 40px;font-size: 26px;cursor: pointer;}
		.datePicker tr td,.datePicker tr th{width:2.0em;height:2.0em;text-align:center;}
		.datePicker tr td .today{color: #fff;width:38px;font-size:14px;line-height:38px;border-radius:50%;background:#5452CF;}
		.datePicker tr td.beforeMonth,	.datePicker tr td.afterMonth{color:#CCC;}
		.group{text-align:center;}
		.group label{display:block;margin: auto;}
		.group i{display:inline-block;}
		.group i{width:8px;height:8px;border-radius:50%;}
		.dot{background:#FF0000;}
</style>
 

（1）使用 (載入展示日期 和 點)

	$(function(){
			 var date=new Date;
			 var year=date.getFullYear();  //獲取當前年份
			 var month=date.getMonth()+1; //獲取當前月份
			 $(".dotDate").datePicker(year,month,{
				 currentMonthClick:function(e){ },

                              //顯示點 {方法2是：點選左右兩邊切換月份 獲取當前月份的（點資料）回撥函式} begin                    
 

                                 loadSuccess:function(year,month){	

 //console.log(year+","+month);
 addDots(year,month);
 }

                                方法2end
				 beforeMonthClick:function(e){},
				 afterMonthClick:function(e){}
				//alert($(this).data("year")+"-"+$(this).data("month")+"-"+$(this).data("day"))
			 });
                        //顯示點方法1（只獲取當前月份， 點選左右兩邊月份沒有去請求後臺）
                         addDots();
		});
                /* 排班日期  ，顯示點*/
		function addDots(){
			$.ajax({
				url:"url請求介面地址", //排班日期
				type:"post",
				dataType:"text",
				success:function(data){
						//var days = [1,5,18,27];
						//if(data!=null){
							//data = data.substring(1,data.length-1).split(',');
						    $(".dotDate").dotCurrentDays(data);  //新增點在標籤上
						}
				}, error: function() {
					console.log("排班日期接口出錯");
				}
			});
		}
 

（2）引入dotDatePicker.js檔案:

 $.fn.extend({
datePicker:function(year,month,params){
if(params==null)params={};
$(this).find(".datePicker").remove();
var gotoBefore = function(e){
var gotoData = $(this).parent("tr").parent("tbody").parent("table").parent().find(".currentMonth:eq(0)");
if(gotoData.size()==0){gotoData=$(this).parent("caption").parent("table").parent().find(".currentMonth:eq(0)");}
var toDate = new Date(gotoData.data("year"),gotoData.data("month")-1);
gotoData.parent("tr").parent("tbody").parent("table").parent().datePicker(toDate.getFullYear(),toDate.getMonth(),e.data.params);
},gotoNext=function(e){
var gotoData = $(this).parent("tr").parent("tbody").parent("table").parent().find(".currentMonth:eq(0)");
if(gotoData.size()==0){gotoData=$(this).parent("caption").parent("table").parent().find(".currentMonth:eq(0)");}
var toDate = new Date(gotoData.data("year"),gotoData.data("month")+1);
gotoData.parent("tr").parent("tbody").parent("table").parent().datePicker(toDate.getFullYear(),toDate.getMonth(),e.data.params);
};
//params={beforeMonthClick:func1,currentMonthClick:func2,afterMonthClick:func3}
if(params.beforeMonthClick==undefined){params.beforeMonthClick=gotoBefore;}
if(params.afterMonthClick==undefined){params.afterMonthClick=gotoNext;}
var dateArray = new Array();//日6  一0  二1  三2  四3   五4  六5
var beforeDate = new Date(year,month-1,0);
var currentDate = new Date(year,month,0);
var startDate = new Date(year,month-1,1);
var todayDate = new Date();
year = startDate.getFullYear();
month = startDate.getMonth()+1;
var days = new Array();
var position = 0;
var shift = startDate.getUTCDay();
var beforeStart = beforeDate.getDate()-startDate.getUTCDay();
for(var i=0;i<shift;i++){
days.push(++beforeStart);
position++;
}
shift = currentDate.getDate();
for(var i=0;i<shift;i++){
days.push(i+1);
if(++position>6){
dateArray.push(days);
days = new Array();
position=0;
}
}
shift = 42-currentDate.getDate()-startDate.getUTCDay();
for(var i=0;i<shift;i++){
days.push(i+1);
if(++position>6){
dateArray.push(days);
days = new Array();
position=0;
}
}
var dateTable = $("<table class='datePicker' style='width: 100%; height: 100%;'></table>");
dateTable.append("<caption><i class='left icon-angle-left'></i><label>"+year+"年"+month+"月</label><i class='right icon-angle-right'></i></caption>");
dateTable.append("<tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr>");
var dateRow = null,y=0,m=0;
for(var i=0;i<dateArray.length;i++){
dateRow = $("<tr></tr>");
for(var j=0;j<dateArray[i].length;j++){
if(dateArray[i][j]-(i*7+j)>7){m=month-1;}else if((i*7+j)-dateArray[i][j]>7){m=month+1;}else{m=month;}
if(m>=0){y=year;}else{y=year-1;m=11;}
var startDate = new Date(year,month-1,1);
if(m<month){
dateRow.append("<td class='beforeMonth' data-year='"+y+"' data-month='"+m+"' data-day='"+dateArray[i][j]+"'><div class='group'><label>"+dateArray[i][j]+"</label><i></i></div></td>");
}else if(m>month){
dateRow.append("<td class='afterMonth' data-year='"+y+"' data-month='"+m+"' data-day='"+dateArray[i][j]+"'><div class='group'><label>"+dateArray[i][j]+"</label><i></i></div></td>");
}else{
if(todayDate.getFullYear()==y&&todayDate.getMonth()==(m-1)&&todayDate.getDate()==dateArray[i][j]){
dateRow.append("<td class='currentMonth' data-year='"+y+"' data-month='"+m+"' data-day='"+dateArray[i][j]+"'><div class='group'><label class=' today'>"+dateArray[i][j]+"</label><i></i></div></td>");
}else{
dateRow.append("<td class='currentMonth' data-year='"+y+"' data-month='"+m+"' data-day='"+dateArray[i][j]+"'><div class='group'><label>"+dateArray[i][j]+"</label><i></i></div></td>");
}
}
}
dateTable.append(dateRow);
}
$(this).append(dateTable);
$(this).find(".left").click({"params":params},gotoBefore);
$(this).find(".right").click({"params":params},gotoNext);
$(this).find(".beforeMonth").click({"params":params},params.beforeMonthClick);
$(this).find(".afterMonth").click({"params":params},params.afterMonthClick);
$(this).find(".currentMonth").click(params.currentMonthClick);
if(params!=null&&params.loadSuccess!=undefined){
params.loadSuccess(year,month,params);
}
},
dotCurrentDay:function(day){
day = parseInt(day); //轉換int 型別
$(this).find(".currentMonth").filter(function(i){
return $(this).data("day")==day;
}).find("i").addClass("dot");
},
dotCurrentDays:function(days){
if(days==null)return;
//遍歷 轉換int 型別
for(var i=0;i<days.length;i++){ 
days[i] = parseInt(days[i]);
}
$(this).find(".currentMonth").filter(function(i){
return $.inArray($(this).data("day"),days)!=-1;
}).find("i").addClass("dot");
},
getCurrentDate:function(){
var current = $(this).find(".currentMonth:eq(0)");
return {"year":current.data("year"),"month":current.data("month")};
}
});