您的位置： 首页 >日志>动易系统>详细内容

动易系统

用内容信息列表标签制作日历显示内容功能

来源：本站原创 发布时间：2013-09-02 09:58:00 浏览次数： 次 【字体：小 大】

首先在网上找到了一段比较适合需求的JS日历代码：

 
 
 
博客专用的JS日历控件 

  
  
 
 
   

 
  

  

   <<
  
  

  

   >>
  
  

  2008年 
  8月  

  
  

     

    
  

     日  

     一  

     二  

     三  

     四  

     五  

     六

日历效果如下：

发现可以在有内容的那天加上对应的链接事件。分析JS代码发现关键地方在一下这个地方（180行）。

//标记选择月份有内容的日期。
var flag = [10,15,20];
 
//对有内容的日期加上事件
for(var i = 0, len = flag.length; i < len; i++){ 
this.Days[flag[i]].innerHTML = "" + flag[i] + ""; 
} 

这里可以用内容信息列表来改一下。

将上面代码修改如下：

var tempDate=this.Month;
                                if(this.Month<10){tempDate="0"+tempDate;}
                                var currentDate=this.Year + "-" + tempDate;
                                days = this.Days;
                                $.pe.ajax('accessLabel',{
                                    labelName:'交易日历内容列表',
                                    params: {'bindStyle':'普通式','nodes':'41','selectDate':currentDate},
                                    success:function(xml){
                                        var x = $(xml);
                                        if(x.find("status").text() == "ok"){
                                            $("#displayContent").html(x.find("body").text());
                                            $("#displayContent .con").each(function(){
                                                days[$(this).data("date")].innerHTML = "" + $(this).data("date") + "";
                                            })
                                            $("#idCalendar a").click(function(){
                                                $("#displayContent .con").hide().filter("[data-date=" + $(this).data("date") +"]").show();
                                            })
                                        }
                                    }//end success
                            });//end ajax 

 

说明：“交易日历内容列表” 标签是用”内容信息类表“标签修改的

主要是加上了一个当前日期的参数和月份筛选查询SQL语句

 WHERE CONVERT(varchar(7), CM.UpdateTime, 120)=' '

在 ”交易日历内容列表_普通式“ 标签中输出一个JS需要用的数组数据。

标签主要代码如下：

 
   
     
 
       
     
   
 
最后的步骤就是调整日历的CSS显示样式：
得到效果如下：
 
×

用户登录