페이지에 입력 필드 외부에 jQuery 달력을 삽입하십시오.

Question

1. 내 응용 프로그램에는 jQuery 달력이 있지만 datepicker는 갖고 싶지 않습니다. 그것을 페이지에 삽입 할 수 있습니까?

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

그럼 정말 원하는 것은 캘린더 위젯입니까? Google에서 'jquery calendar'를 확인할 수 있습니다.

다음

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