Skip to content

Instantly share code, notes, and snippets.

@backsapce
Created August 16, 2014 13:18
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save backsapce/af3f6b7dec3a74531414 to your computer and use it in GitHub Desktop.
Save backsapce/af3f6b7dec3a74531414 to your computer and use it in GitHub Desktop.
js copy
//日历JS部分
var da=new Date();
var index_calendar_year=da.getFullYear();
var index_calendar_month=da.getMonth() + 1 ;//当前月份
var index_calendar_date=da.getDate();//当前日期,0为全部
var m_old = index_calendar_month;
var y_old = index_calendar_year;
function DaysInMonth(iYear,iMonth)
{
var dDate = new Date(iYear, iMonth, 0);
return dDate.getDate();
}
//var index_calendar_date_arr=new Array(list_count);
function calendarShowMonth(m_ing,y_ing,news){
var d=da;
iy=Math.abs((y_ing-y_old)*12)+(m_ing-m_old);
// alert(m_old);
i=m_old;
if(iy<0)
{
m_old=i=m_ing;
if(i==1)
{
m_old=i=12;
y_old--;
y_ing--
}
news=true;
}
else
{
ie=iy-7;
//alert(iy);
//alert(ie);
if(ie>=0)
{
m_old=i=i+ie+1;
if(i>12)
{
m_old=i=1;
y_old++;
}
news=true;
}
}
//if(m_ing)
if(news){
count=i+7;
mmi=i;
var dateHtml="<table width=\"860\" cellpadding=\"0\" cellspacing=\"0\"><tr><td class=\"arrow\"><div class=\"arrow-wrap\"><a href=\"javascript:calendarGo(-1);\" class=\"l\">←</a></div></td>";
for( i ;i<count;i++)
{
dateHtml=dateHtml+'<td width=\"98\" class=\"month\"><a href=\"javascript:calendarMonth('+mmi+','+y_ing+');\" id=\"calendar_month_'+mmi+'\">'+y_ing+'年'+mmi+'月</a></td>';
mmi++;
if(mmi>12)
{
mmi=1;
y_ing++;
}
}
dateHtml=dateHtml+'<td class=\"arrow\"><div class=\"arrow-wrap\"><a href=\"javascript:calendarGo(1);\" class=\"r\">→</a></div></td></tr> </table>';
// alert(dateHtml);
$(".month-table p").html(dateHtml);
}
}
//选择月份
function calendarMonth(m,y){
index_calendar_year=y;
index_calendar_month=m;
index_calendar_date=0;//日期设为0
$(".month a").removeClass("on");
$("#calendar_month_"+m).addClass("on");
calendarShowDate(y,m);
calendarLoading();
calendarGetEvents();
}
//alert(DaysInMonth(index_calendar_year,index_calendar_month));
//选择日子
function calendarDate(d,aObj){
index_calendar_date=d;
$(".date-div a").removeClass("on");
$("#cd_"+d).addClass("on");
calendarLoading();
calendarGetEvents();
}
//显示Loading提示
function calendarLoading(){
$(".loading-div").show();
$(".event-div").html('');
$(".event-div").hide();
}
//列出月份
//列出日子
function calendarShowDate(y,m){
var dateHtml="";
//
month=DaysInMonth(y,m);
for(var i=1;i<month;i++){
dateHtml=dateHtml+'<a href="javascript:calendarDate('+i+')" id="cd_'+i+'">'+i+'</a> / ';
}
dateHtml=dateHtml+'<a href="javascript:calendarDate('+i+')" id="cd_'+i+'">'+i+'</a>';//最后一天,没有斜杠
$(".date-div p").html(dateHtml);
}
//上一月下一月
function calendarGo(mm){
console.log('move + ' + mm)
var newMonth;
var new_year;
if(mm==1&&index_calendar_month==12){
newMonth=index_calendar_month=1;
new_year=index_calendar_year=index_calendar_year+mm
}else if(mm==-1&&index_calendar_month==1){
newMonth=index_calendar_month=12;
new_year=index_calendar_year=index_calendar_year+mm
}else{
newMonth=index_calendar_month+mm;
new_year=index_calendar_year;
}
calendarShowMonth(newMonth,new_year,false);
// alert(new_year);
// if(index_calendar_date_arr[newMonth]!=null){
calendarMonth(newMonth,new_year);
// }
}
//读取活动数据
function calendarGetEvents(){
var eventHtml="";
$.ajax({
url: 'http://www.veryevent.com:8001/calendars/'+index_calendar_month+'/'+index_calendar_date+'/'+index_calendar_year,
success: function (data) {
var result = eval('('+data+')');
$(".loading-div").hide();
$(".event-div").show();
$.each(result, function(_i, _json){
eventHtml=eventHtml+'<div class="event"><h5><a title="'+_json[0]+'" href="'+_json[4]+'">'+_json[0]+'</a></h5><div class="info">'+_json[1]+' '+_json[2]+' '+_json[3]+'</div></div>';
});
$(".event-div").html(eventHtml);
},
cache: true
});
}
$(document).ready(function(){
//页面加载完成就读取默认月份的数据
calendarShowMonth(index_calendar_month,index_calendar_year,true);
calendarShowDate(index_calendar_year,index_calendar_month)
//calendarMonth(index_calendar_month);
//calendarDate(index_calendar_date);
$(".month a").removeClass("on");
$("#calendar_month_"+index_calendar_month).addClass("on");
$(".date-div a").removeClass("on");
$("#cd_"+index_calendar_date).addClass("on");
calendarLoading();
calendarGetEvents();
});
<html>
<head>
<style>
#unit{
float:left;
background:red;
width:100px;
height:100px;
margin-left :10px
}
#pre,#next{
float:left;
background:blue;
width:50px;
height:100px;
margin-left :10px
}
</style>
<script src='http://www.veryevent.com:8001/js/jquery.min.js'></script>
<script src='cal.js'></script>
</head>
<body>
<div class="calendar">
<div class="calendar-title">
活动日历
</div>
<div class="calendar-body">
<div class="month-table"><p><table width="860" cellpadding="0" cellspacing="0"><tbody><tr><td class="arrow"><div class="arrow-wrap"><a href="javascript:calendarGo(-1);" class="l">←</a></div></td><td width="98" class="month"><a href="javascript:calendarMonth(8,2014);" id="calendar_month_8" class="on">2014年8月</a></td><td width="98" class="month"><a href="javascript:calendarMonth(9,2014);" id="calendar_month_9">2014年9月</a></td><td width="98" class="month"><a href="javascript:calendarMonth(10,2014);" id="calendar_month_10">2014年10月</a></td><td width="98" class="month"><a href="javascript:calendarMonth(11,2014);" id="calendar_month_11">2014年11月</a></td><td width="98" class="month"><a href="javascript:calendarMonth(12,2014);" id="calendar_month_12">2014年12月</a></td><td width="98" class="month"><a href="javascript:calendarMonth(1,2015);" id="calendar_month_1">2015年1月</a></td><td width="98" class="month"><a href="javascript:calendarMonth(2,2015);" id="calendar_month_2">2015年2月</a></td><td class="arrow"><div class="arrow-wrap"><a href="javascript:calendarGo(1);" class="r">→</a></div></td></tr> </tbody></table></p>
</div>
<div class="date-div">
<h5>选择日期</h5>
<p><a href="javascript:calendarDate(1)" id="cd_1" class="on">1</a> / <a href="javascript:calendarDate(2)" id="cd_2">2</a> / <a href="javascript:calendarDate(3)" id="cd_3">3</a> / <a href="javascript:calendarDate(4)" id="cd_4">4</a> / <a href="javascript:calendarDate(5)" id="cd_5">5</a> / <a href="javascript:calendarDate(6)" id="cd_6">6</a> / <a href="javascript:calendarDate(7)" id="cd_7">7</a> / <a href="javascript:calendarDate(8)" id="cd_8">8</a> / <a href="javascript:calendarDate(9)" id="cd_9">9</a> / <a href="javascript:calendarDate(10)" id="cd_10">10</a> / <a href="javascript:calendarDate(11)" id="cd_11">11</a> / <a href="javascript:calendarDate(12)" id="cd_12">12</a> / <a href="javascript:calendarDate(13)" id="cd_13">13</a> / <a href="javascript:calendarDate(14)" id="cd_14">14</a> / <a href="javascript:calendarDate(15)" id="cd_15">15</a> / <a href="javascript:calendarDate(16)" id="cd_16" class="">16</a> / <a href="javascript:calendarDate(17)" id="cd_17">17</a> / <a href="javascript:calendarDate(18)" id="cd_18">18</a> / <a href="javascript:calendarDate(19)" id="cd_19">19</a> / <a href="javascript:calendarDate(20)" id="cd_20">20</a> / <a href="javascript:calendarDate(21)" id="cd_21">21</a> / <a href="javascript:calendarDate(22)" id="cd_22">22</a> / <a href="javascript:calendarDate(23)" id="cd_23">23</a> / <a href="javascript:calendarDate(24)" id="cd_24">24</a> / <a href="javascript:calendarDate(25)" id="cd_25">25</a> / <a href="javascript:calendarDate(26)" id="cd_26">26</a> / <a href="javascript:calendarDate(27)" id="cd_27">27</a> / <a href="javascript:calendarDate(28)" id="cd_28">28</a> / <a href="javascript:calendarDate(29)" id="cd_29">29</a> / <a href="javascript:calendarDate(30)" id="cd_30">30</a> / <a href="javascript:calendarDate(31)" id="cd_31">31</a></p>
</div>
<div class="loading-div" style="display: block;">
载入中,请稍后...
</div>
<div class="event-div" style="display: none;"></div>
<!--event-div-->
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment