如何实现一个全年日历12个月缩略图在整个页面显示？？？内附图片。。。。。。。。。【标题要长】

牛叔 2010-06-10 05:19:05
每个日期可以点击，日历与星期要对应上。

哪位有思路或实现方法，麻烦提供一下，感激不尽。



...全文
977 24 打赏 收藏 转发到动态 举报
写回复
用AI写文章
24 条回复
切换为时间正序
请发表友善的回复…
发表回复
dudugo 2013-01-20
  • 打赏
  • 举报
 回复
似乎下载的demo没有全年的阿
Hing 2011-12-15
  • 打赏
  • 举报
 回复
什麽情況了？
牛叔 2010-06-13
  • 打赏
  • 举报
 回复
[Quote=引用 20 楼 izard999 的回复:]

引用 10 楼 tangyu477 的回复:
en 这个地址就是楼主要的
http://dhtmlx.com/docs/products/dhtmlxScheduler/sample_basic.html

看这个吧 如果公司非要人手写 我只能说你们公司的老板脑袋坏了.!
[/Quote]
呵呵，调整心态，其实昨天听到不让我用，挺郁闷的。
今天上了个大号，晦气都给放了，O(∩_∩)O。。。
低调，淡定。。。
工作。。。
yangnan2009 2010-06-13
  • 打赏
  • 举报
 回复
<Script LANGUAGE="JavaScript">
var months = new Array("一", "二", "三","四", "五", "六", "七", "八", "九","十", "十一", "十二");
var daysInMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31,30, 31, 30, 31);
var days = new Array("日","一", "二", "三","四", "五", "六");
var classTemp;
var today=new getToday();
var year=today.year;
var month=today.month;
var newCal;

function getDays(month, year) {
if (1 == month) return ((0 == year % 4) && (0 != (year % 100))) ||(0 == year % 400) ? 29 : 28;
else return daysInMonth[month];
}

function getToday() {
this.now = new Date();
this.year = this.now.getFullYear();
this.month = this.now.getMonth();
this.day = this.now.getDate();
}

function Calendar() {
newCal = new Date(year,month,1);
today = new getToday();
var day = -1;
var startDay = newCal.getDay();
var endDay=getDays(newCal.getMonth(), newCal.getFullYear());
var daily = 0;
if ((today.year == newCal.getFullYear()) &&(today.month == newCal.getMonth()))
{
day = today.day;
}
var caltable = document.all.caltable.tBodies.calendar;
var intDaysInMonth =getDays(newCal.getMonth(), newCal.getFullYear());

for (var intWeek = 0; intWeek < caltable.rows.length;intWeek++)
for (var intDay = 0;intDay < caltable.rows[intWeek].cells.length;intDay++)
{
var cell = caltable.rows[intWeek].cells[intDay];
var montemp=(newCal.getMonth()+1)<10?("0"+(newCal.getMonth()+1)):(newCal.getMonth()+1);
if ((intDay == startDay) && (0 == daily)){ daily = 1;}
var daytemp=daily<10?("0"+daily):(daily);
var d="<"+newCal.getFullYear()+"-"+montemp+"-"+daytemp+">";
if(day==daily) cell.className="DayNow";
else if(intDay==6) cell.className = "DaySat";
else if (intDay==0) cell.className ="DaySun";
else cell.className="Day";
if ((daily > 0) && (daily <= intDaysInMonth))
{
cell.innerText = daily;
daily++;
} else
{
cell.className="CalendarTD";
cell.innerText = "";
}
}
document.all.year.value=year;
document.all.month.value=month+1;
}

function subMonth()
{
if ((month-1)<0)
{
month=11;
year=year-1;
} else
{
month=month-1;
}
Calendar();
}

function addMonth()
{
if((month+1)>11)
{
month=0;
year=year+1;
} else
{
month=month+1;
}
Calendar();
}

function setDate()
{
if (document.all.month.value<1||document.all.month.value>12)
{
alert("月的有效范围在1-12之间!");
return;
}
year=Math.ceil(document.all.year.value);
month=Math.ceil(document.all.month.value-1);
Calendar();
}
</Script>

<Script>
function buttonOver()
{
var obj = window.event.srcElement;
obj.runtimeStyle.cssText = "background-color:#FFFFFF";
// obj.className="Hover";
}

function buttonOut()
{
var obj = window.event.srcElement;
window.setTimeout(function(){obj.runtimeStyle.cssText = "";},300);
}
</Script>

<Style>
Input {font-family: verdana;font-size: 9pt;text-decoration: none;background-color: #FFFFFF;height: 20px;border: 1px solid #666666;color:#000000;}

.Calendar {font-family: verdana;text-decoration: none;width: 170;background-color: #C0D0E8;font-size: 9pt;border:0px dotted #1C6FA5;}
.CalendarTD {font-family: verdana;font-size: 7pt;color: #000000;background-color:#f6f6f6;height: 20px;width:11%;text-align: center;}

.Title {font-family: verdana;font-size: 11pt;font-weight: normal;height: 24px;text-align: center;color: #333333;text-decoration: none;background-color: #A4B9D7;border-top-width: 1px;border-right-width: 1px;border-bottom-width: 1px;border-left-width: 1px;border-bottom-style:1px;border-top-color: #999999;border-right-color: #999999;border-bottom-color: #999999;border-left-color: #999999;}

.Day {font-family: verdana;font-size: 7pt;color:#243F65;background-color: #E5E9F2;height: 20px;width:11%;text-align: center;}
.DaySat {font-family: verdana;font-size: 7pt;color:#FF0000;text-decoration: none;background-color:#E5E9F2;text-align: center;height: 18px;width: 12%;}
.DaySun {font-family: verdana;font-size: 7pt;color: #FF0000;text-decoration: none;background-color:#E5E9F2;text-align: center;height: 18px;width: 12%;}
.DayNow {font-family: verdana;font-size: 7pt;font-weight: bold;color: #000000;background-color: #FFFFFF;height: 20px;text-align: center;}

.DayTitle {font-family: verdana;font-size: 9pt;color: #000000;background-color: #C0D0E8;height: 20px;width:11%;text-align: center;}
.DaySatTitle {font-family: verdana;font-size: 9pt;color:#FF0000;text-decoration: none;background-color:#C0D0E8;text-align: center;height: 20px;width: 12%;}
.DaySunTitle {font-family: verdana;font-size: 9pt;color: #FF0000;text-decoration: none;background-color: #C0D0E8;text-align: center;height: 20px;width: 12%;}

.DayButton {font-family: Webdings;font-size: 9pt;font-weight: bold;color: #243F65;cursor:hand;text-decoration: none;}

</Style>


<table border="0" cellpadding="0" cellspacing="1" class="Calendar" id="caltable">
<thead>
<tr align="center" valign="middle">
<td colspan="7" class="Title">
<a href="javaScript:subMonth();" title="上一月" Class="DayButton">3</a> <input name="year" type="text" size="4" maxlength="4" onKeyDown="if (event.keyCode==13)" onKeyUp="this.value=this.value.replace(/[^0-9]/g,'')" onpaste="this.value=this.value.replace(/[^0-9]/g,'')"> 年 <input name="month" type="text" size="1" maxlength="2" onKeyDown="if (event.keyCode==13)" onKeyUp="this.value=this.value.replace(/[^0-9]/g,'')" onpaste="this.value=this.value.replace(/[^0-9]/g,'')"> 月 <a href="JavaScript:addMonth();" title="下一月" Class="DayButton">4</a>
</td>
</tr>
<tr align="center" valign="middle">
<Script LANGUAGE="JavaScript">
document.write("<TD class=DaySunTitle id=diary >" + days[0] + "</TD>");
for (var intLoop = 1; intLoop < days.length-1;intLoop++)
document.write("<TD class=DayTitle id=diary>" + days[intLoop] + "</TD>");
document.write("<TD class=DaySatTitle id=diary>" + days[intLoop] + "</TD>");
</Script>
</TR>
</thead>
<TBODY border=1 cellspacing="0" cellpadding="0" ID="calendar" ALIGN=CENTER ONCLICK="getDiary()">
<Script LANGUAGE="JavaScript">
for (var intWeeks = 0; intWeeks < 6; intWeeks++)
{
document.write("<TR style='cursor:hand'>");
for (var intDays = 0; intDays < days.length;intDays++) document.write("<TD class=CalendarTD onMouseover='buttonOver();' onMouseOut='buttonOut();'></TD>");
document.write("</TR>");
}
</Script>
</TBODY>
</TABLE>
<Script LANGUAGE="JavaScript">
Calendar();
</Script>
<p>查找更多代码，请访问：<a href="http://www.lanrentuku.com" target="_blank">懒人图库</a></p>
izard999 2010-06-13
  • 打赏
  • 举报
 回复
[Quote=引用 10 楼 tangyu477 的回复:]
en 这个地址就是楼主要的
http://dhtmlx.com/docs/products/dhtmlxScheduler/sample_basic.html
[/Quote]
看这个吧 如果公司非要人手写 我只能说你们公司的老板脑袋坏了.!
internetroot 2010-06-13
  • 打赏
  • 举报
 回复
两个帖子都贴了
给分啊
internetroot 2010-06-13
  • 打赏
  • 举报
 回复 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

html,body{ font-size:12px; font-family:"Courier New", Courier, monospace; margin:0px; padding:0px;}

#calendar{margin:50px;width:150px;font-size:12px;}

#calendar table{ border-collapse:collapse;}

#calendar table td{ height:20px; width:20px; border:1px solid #ff6600; text-align:center;}

#calendar .calendarTitle table .threetd{ width:62px;}

#calendar .calendarTitle table .twotd{ width:41px;}

#calendar .calendarTitle table td{ border-bottom:0px;}

.classOver{ background:#000000; color:#FFFFFF;}

.yearContainer{background:#ffffff;border:1px solid #ff6600;position:absolute;width:62px;}

.yearContainer ul{list-style:none;margin:0px;padding:0px;}

.yearContainer ul li{height:18px;line-height:18px;display:block;text-align:center;}

.monthContainer{background:#ffffff;border:1px solid #ff6600;position:absolute;width:41px;}

.monthContainer ul{list-style:none;margin:0px;padding:0px;}

.monthContainer ul li{height:18px;line-height:18px;display:block;text-align:center;}

a{ text-decoration:none; color:#990000;}

</style>

</head>



<body>





<script type="text/javascript">

 var titleTable="<div id=\"calendar\"><div class=\"calendarTitle\">";

 titleTable+="<table width=\"0%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\"><tr><td>";

 titleTable+="<a href=\"javascript:void(0)\" onclick=\"SloppyJs.calendar.getNewTime('b')\"  onfocus=\"this.blur()\" title='上月'><</a></td>";

 titleTable+="<td class=\"threetd\" id=\"currentYear\" onclick=\"SloppyJs.calendar.writeDivString('currentYear','yeartype')\"> </td>";

 titleTable+="<td class=\"twotd\" id=\"currentMonth\" onclick=\"SloppyJs.calendar.writeDivString('currentMonth','monthtype')\"> </td>";

 titleTable+="<td><a href=\"javascript:void(0)\" onclick=\"SloppyJs.calendar.getNewTime('n')\" onfocus=\"this.blur()\" title='下月'>></a></td></tr></table></div>";

 var SloppyJs={};

 (function(){

  SloppyJs.calendar={

   getDateString:function(y,m){

    var DayArray=[];

    for(var i=0;i<42;i++) DayArray[i]=" ";

    for(var i=0;i<new Date(y,m,0).getDate();i++)DayArray[i+new Date(y,m-1,1).getDay()]=i+1;

    return DayArray;

   },

   getConString:function(y,m){

    var DStr="<table width=\"0%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\"><tr>";

    var DateArray=['日','一','二','三','四','五','六'];

    for(var i=0;i<7;i++){

     DStr+="<td>"+DateArray[i]+"</td>";

    }

    DStr+="</tr>";

    for(var i=0;i<6;i++){

     DStr+="<tr>";

     for(var j=0;j<7;j++){

      var CS=new Date().getDate()==this.getDateString(y,m)[i*7+j]?"classOver":"";

      if(this.getDateString(y,m)[i*7+j]==" "){

       DStr+="<td class='"+CS+"' id='dateNum"+(i*7+j)+"'onclick=\"SloppyJs.calendar.alertClick(event)\" >"+this.getDateString(y,m)[i*7+j]+"</td>";

      }else{

       DStr+="<td class='"+CS+"' id='dateNum"+(i*7+j)+"' onclick=\"SloppyJs.calendar.alertClick(event)\">"+this.getDateString(y,m)[i*7+j]+"</td>";

      }

     }

     DStr+="</tr>";

    }

    DStr+="</table>";

    return DStr;

   },

   rewriteConString:function(y,m){

    var TArray=this.getDateString(y,m);

    var len=TArray.length;

    for(var i=0;i<len;i++){

     document.getElementById('dateNum'+i).innerHTML=TArray[i];

     document.getElementById('dateNum'+i).className="";

     if(new Date().getYear()==y&&new Date().getMonth()+1==m&&new Date().getDate()==TArray[i]){

      document.getElementById('dateNum'+i).className="classOver";

                 }

    }

   },

   getNewTime:function(action){

    var YearNO=document.getElementById('currentYear').innerHTML;

    var MonthNO=document.getElementById('currentMonth').innerHTML;

    if(action=="b"){

     if(MonthNO=="1"){

      MonthNO=13;

      YearNO=YearNO-1;

      }

     document.getElementById('currentMonth').innerHTML=MonthNO-1;

     document.getElementById('currentYear').innerHTML=YearNO;

     this.rewriteConString(YearNO,MonthNO-1);

    }

    if(action=="n"){

     if(MonthNO=="12"){

      MonthNO=0;

      YearNO=YearNO-(-1);

      }

     document.getElementById('currentYear').innerHTML=YearNO;

     document.getElementById('currentMonth').innerHTML=MonthNO-(-1);

     this.rewriteConString(YearNO,MonthNO-(-1));

    }

   },

   writeDivString:function(){

    var _element=document.getElementById(arguments[0]);

    _element.style.position="relative";

    var _value=_element.innerHTML;

    //year

    if(arguments[1]=="yeartype"){

     var _containerid="yeardiv";

     if(document.getElementById(_containerid)){

      var _c=document.getElementById(_containerid);

      document.body.removeChild(_c);

     }

     if(document.getElementById("monthdiv")){

      var _cc=document.getElementById("monthdiv");

      document.body.removeChild(_cc);

     }

     var _container=document.createElement("div");

     _container.setAttribute("id",_containerid);

     _container.className="yearContainer";

     var _ul=document.createElement("ul");

     for(var i=0;i<15;i++){

      var _li=document.createElement("li");

      var _text=document.createTextNode(_value-7+i);

      _li.appendChild(_text);

      _ul.appendChild(_li);

     }

     _container.appendChild(_ul);

     _container.style.top=_element.offsetTop+20+"px";

     _container.style.left=_element.offsetLeft+"px";

     document.body.appendChild(_container);

     var _ali=document.getElementById(_containerid).getElementsByTagName("li");

     for(var j=0;j<_ali.length;j++){

      _ali[j].onmouseover=function(){

       this.style.background="#ff0000";

       this.style.color="#FFFFFF";

       this.style.cursor="pointer";

      };

      _ali[j].onmouseout=function(){

       this.style.background="#ffffff";

       this.style.color="#000000";

      };

      _ali[j].onclick=function(){

       document.getElementById("yeardiv").style.display="none";

       _element.innerHTML=this.innerHTML;

       var _alii=document.getElementById(_containerid).getElementsByTagName("li");

       for(var k=0;k<_alii.length;k++){

        _ul.removeChild(_alii[k]);

       }

       _container.removeChild(_ul);

       document.body.removeChild(_container);

       _element.style.position="";

       var _y=document.getElementById('currentYear').innerHTML;

       var _m=document.getElementById('currentMonth').innerHTML;

       SloppyJs.calendar.rewriteConString(_y,_m);

      };

     }

     _container.onmouseout=function(){

      this.style.display="none";

      _element.style.position="";

     };

     _container.onmouseover=function(){

      this.style.display="";

     };

    }

    //month



    if(arguments[1]=="monthtype"){

     var _containerid="monthdiv";

     if(document.getElementById(_containerid)){

      var _c=document.getElementById(_containerid);

      document.body.removeChild(_c);

     }

     if(document.getElementById("yeardiv")){

      var _cc=document.getElementById("yeardiv");

      document.body.removeChild(_cc);

     }

     var _container=document.createElement("div");

     _container.setAttribute("id",_containerid);

     _container.className="monthContainer";

     var _ul=document.createElement("ul");

     for(var i=0;i<12;i++){

      var _li=document.createElement("li");

      var _text=document.createTextNode(i+1);

      _li.appendChild(_text);

      _ul.appendChild(_li);

     }

     _container.appendChild(_ul);

     _container.style.top=_element.offsetTop+20+"px";

     _container.style.left=_element.offsetLeft+"px";

     document.body.appendChild(_container);

     var _ali=document.getElementById(_containerid).getElementsByTagName("li");

     for(var l=0;l<_ali.length;l++){

      _ali[l].onmouseover=function(){

       this.style.background="#ff0000";

       this.style.color="#FFFFFF";

       this.style.cursor="pointer";

      };

      _ali[l].onmouseout=function(){

       this.style.background="#ffffff";

       this.style.color="#000000";

      };

      _ali[l].onclick=function(){

       document.getElementById(_containerid).style.display="none";

       _element.innerHTML=this.innerHTML;

       var _alii=document.getElementById(_containerid).getElementsByTagName("li");

       for(var k=0;k<_alii.length;k++){

        _ul.removeChild(_alii[k]);

       }

       _container.removeChild(_ul);

       document.body.removeChild(_container);

       _element.style.position="";

       var _y=document.getElementById('currentYear').innerHTML;

       var _m=document.getElementById('currentMonth').innerHTML;

       SloppyJs.calendar.rewriteConString(_y,_m);

      };

     }

     _container.onmouseout=function(){

      this.style.display="none";

      _element.style.position="";

     };

     _container.onmouseover=function(){

      this.style.display="";

     };



    }

   },

   alertClick:function(e){

    var e=e||event;

    var targets=e.target||event.srcElement;

    alert(targets.innerHTML);

   }

  };

 })();

 function writeCalendar(){

  document.write(titleTable);

  var _todayYear=document.getElementById('currentYear').innerHTML=new Date().getFullYear();

  var _todayMonth=document.getElementById('currentMonth').innerHTML=new Date().getMonth()+1;

  var _calendarStr=SloppyJs.calendar.getConString(_todayYear,_todayMonth);

  document.write(_calendarStr+"</div>");

 };

 writeCalendar();

</script>



</body>

</html>
牛叔 2010-06-13
  • 打赏
  • 举报
 回复
[Quote=引用 16 楼 shine333 的回复:]

红的那个是什么意思？
[/Quote]
根据日程类型不同，样式不同
shine333 2010-06-13
  • 打赏
  • 举报
 回复
红的那个是什么意思？
牛叔 2010-06-13
  • 打赏
  • 举报
 回复
谢谢各位了
公司有人不乐意让我用控件，哎，杯具，还是得自己写。
埋头苦干吧。。。
weihao9939 2010-06-11
  • 打赏
  • 举报
 回复 


......

scheduler.setLoadMode("year");

......

可直接切换到年视图
tfish2014 2010-06-11
  • 打赏
  • 举报
 回复
[Quote=引用 10 楼 tangyu477 的回复:]
en 这个地址就是楼主要的
http://dhtmlx.com/docs/products/dhtmlxScheduler/sample_basic.html
[/Quote]

要选一下 右上角的 YEAR
tfish2014 2010-06-11
  • 打赏
  • 举报
 回复
en 这个地址就是楼主要的
http://dhtmlx.com/docs/products/dhtmlxScheduler/sample_basic.html
Arthur0088 2010-06-11
  • 打赏
  • 举报
 回复
有很多很好的实用的日期选择器控件
weihao9939 2010-06-11
  • 打赏
  • 举报
 回复
[Quote=引用 6 楼 ymdcr 的回复:]
那个dhx貌似可以试试
不知老兄有没有中文说明文档
[/Quote]
这个很简单的啊
你去看看官方提供的Sample，例子里面写的很详细
http://dhtmlx.com/docs/products/dhtmlxScheduler/sample_basic.html

基本就是html和JS看看源代码，理解起来应该不难
你也可以将插件下载下来，JS源码里面的注释也写的很详细的
zhaobocheng 2010-06-11
  • 打赏
  • 举报
 回复
是啊，使用直接的日历控件即可。我记得当年我做的一个OA的时候，我就是用了一个日历控件，具体名字忘记了。楼主可以搜下。
但是楼主要考虑浏览器的兼容问题。
rttyyu 2010-06-11
  • 打赏
  • 举报
 回复
是呀这个自已写太累了，网上有好多现成的
chinarenzhou 2010-06-11
  • 打赏
  • 举报
 回复
上网搜一下吧！网上很多
牛叔 2010-06-10
  • 打赏
  • 举报
 回复
那个dhx貌似可以试试
不知老兄有没有中文说明文档
牛叔 2010-06-10
  • 打赏
  • 举报
 回复
我可能需要在某些日期中设置id，链接等信息
没发现那个控件能实现。。。
加载更多回复（4）
GruidView日历源码
GridView实现的日历，包含农历算法，
javascript画全年日历
drawDateByYear()方法画出全年的日历，也可以用drawDateByMonth()方法画出某个月的单月日历，默认将日历dom插入到body里，也可以通过传入parent修改日历容器，例如某个div，d.drawDateByYear(2023,5,function(v){高亮显示的是今天的日期和标记要高亮显示的日期，也添加了点击事件的钩子，自己可以实现钩子函数，从而操作点击的日期值。}为点击回调的钩子函数，这个是点击相应日期后alert()以下被点击的日期，这个自己根据业务需要实现。
vue 全年日历显示并且日期批量选择
这是个基于VUE制作的日历组件，vue版本为2.0 ，UI部分支持viewUI、原生表单控件。 由于我司项目需求，需要一个按年的日期选择控件，功能有工作日、非工作日、全选、非全选，行选中/取消、列选中/取消日期选择。 调研之后，发现没有符合要求的日历组件。 只能自己尝试实现, 仅做参考使用，不喜勿喷~。 谢谢！ 附git地址：https://gitee.com/gitbai/vue-calendar.git 主要功能如图： 1. 年份选择 2.工作日选择 3.非工作日选择 4..
【实例】用PHP制作一个简单的日历
实例说明 说到对日期和时间的处理，就一定要介绍一下日历程序的编写。但一提起编写日历，大多数读者都会认为日历的作用只是为了在页面上显示当前的日期，其实日历在我们的开发中有着更重要的作用。例如，我们开发一个“记事本”就需要通过日历设定日期，在一些系统中需要按日期去安排任务也需要日历，等等。 实现过程 将日历类 Calendar 声明在文件 calendar.class.php中，代码如下所示： <?php /* calendar.class.php日历类 声明一个日历类，名称为Calendar，用来显
Magento前台只有产品的缩略图不显示
第一种可能：缓存不足 http://blog.csdn.net/ddjohn/article/details/6648199 最近发现一个怪异的现象，Magento前台只有产品的缩略图不显示。我检查了之前的操作，后台产品图片的选择设置，media文件夹的权限，缓存等一系列可能引发的因素，发现缩略图还是不显示，那就奇怪了，其他服务器上包括本地都是没问题的。缩略图通常是保存在media下类似这样的
Web 开发

81,094

社区成员

341,717

社区内容

发帖
与我相关
我的任务
社区描述
Java Web 开发
社区管理员
  • Web 开发社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章