在页面中嵌入jQuery日历，在输入字段外

Question

1. 我想在我的应用程序中有jQuery日历，但不是日期选择器。可以将它嵌入到页面中吗？

2. 我想为每个日期添加自定义数据。这可能吗？

Answer 1

我有一个例子，我几个星期前给了一个颜色和悬停的日期。您可以根据需要更改此代码！现场示例：http://marc2.nl/workshops.html（此演示确实给它一个背景颜色，并将链接悬停）。为其添加背景色或添加悬停，您可以向其添加图像。

初始化：

var calDates = {"36":{"datetime":"2013-02-18 11:02:22","name":"name1","color":"e8b1b1","url":"url1"},"37":{"datetime":"2013-01-22 11:03:08","name":"name2","color":"9fd69f","url":"url2"}}; 

$("#calendar").datepicker({ 
    onChangeMonthYear : updateDates, 
    onSelect : updateDates 
}); 
updateDates(); 

遍历的日期，并给它正确的颜色：

function updateDates() 
{ 
    // Timeout is needed otherwise jQuery UI has not yet updates the month 
    setTimeout(function(){ 
     for(var k in calDates) 
     { 
      var obj = calDates[k], 
       yearMonthDay = obj.datetime.split(" ")[0].split("-"), 
       time = obj.datetime.split(" ")[1]; 

      $("#calendar [data-month='" + (parseInt(yearMonthDay[1]) - 1) + "'][data-year='" + yearMonthDay[0] + "'] a").each(function(){ 
       if($(this).text() == yearMonthDay[2]) 
       { 
        $(this) 
         .css({ 
          backgroundColor : "#" + obj.color, 
          cursor: "pointer", 
          position : "relative" 
         }) 
         .unbind("click") 
         .attr("href", obj.url) 
         .bind("click", function(){ 
          document.location = $(this).attr("href"); 
         }) 
         .bind("mouseenter", function(){ 
          $(this).find(".hover").show(); 
         }) 
         .bind("mouseleave", function(){ 
          $(this).find(".hover").hide(); 
         }) 
         .append("<div class='hover'><strong>" + obj.name + "</strong><br />" + time + "</div>"); 

       } 
      }); 
     } 
    }, 10); 
} 

Answer 2

那么，你真正想要的是一个日历小部件？你可以检查谷歌的“jquery日历”。这是第一个，我发现：

http://arshaw.com/fullcalendar/

这里的选项相当的大名单：

http://www.tripwiremagazine.com/2012/11/jquery-calendar-date-pickers.html

而且五另一个列表：

http://www.devcurry.com/2010/06/5-jquery-calendar-plugins-that-can-be.html