jQuery UI Datepicker : 특정 날짜에 클릭 가능한 이벤트를 추가하는 방법은 무엇입니까?

Question

내가 에 이벤트가 첨부 된 곳의 jquery datepicker에 날짜를 강조 표시합니다. (js 이벤트는 아니지만 실제 이벤트는 D입니다.)

1. 일정 날짜를 캘린더에 전달하는 방법은 무엇입니까?
2. 작은 팝업 팁에 URL이있는 이벤트를 표시하거나 이벤트 페이지로 이동하는 방법을 클릭 할 수있게하려면 어떻게해야합니까?

이미 달성 할 수 있도록 플러그인 또는 리소스 (예 : 튜토리얼)가 있습니까?

감사합니다.

PS : 가 난 단지 날짜에 부착 된 이벤트에 액세스 할 날짜를 선택하기 위해 날짜 선택기를 사용하지 않는

PS2 : 나는 (FR 및 영어) 다국어 웹 사이트에서 사용할 수 있습니다, 그래서 나는 datepicker를 생각했다.

Answer 1

이것은 분명히 가능하며 나의 의견으로는 datepicker 위젯을 남용하지 않는다. 위젯을 인라인으로 초기화하는 옵션이 있습니다.이 옵션은 위에서 설명한 시나리오에 정확히 사용할 수 있습니다.

당신이해야합니다 몇 가지 단계가 걸릴 있습니다

1. 인 - 라인 날짜 선택기를 초기화합니다. 항상 나타납니다 있도록 <div>에 날짜 선택기 위젯을 연결하고 당신은 input에 첨부 할 필요가 없습니다 :

   $("div").datepicker({...}); 
   

2. 탭을 beforeShowDay 이벤트에 특정 이벤트와 날짜를 선택합니다.

   이

   이벤트 배열 :

   var events = [ 
       { Title: "Five K for charity", Date: new Date("02/13/2011") }, 
       { Title: "Dinner", Date: new Date("02/25/2011") }, 
       { Title: "Meeting with manager", Date: new Date("03/01/2011") } 
   ]; 
   

   이벤트 핸들러 :

   beforeShowDay: function(date) { 
       var result = [true, '', null]; 
       var matching = $.grep(events, function(event) { 
        return event.Date.valueOf() === date.valueOf(); 
       }); 
   
       if (matching.length) { 
        result = [true, 'highlight', null]; 
       } 
       return result; 
   }, 
   

   이 보일 수 있습니다 또한, 당신이 채우고 클라이언트로 내려 보낼 수있는 배열에 이벤트를 정의 조금 복잡하지만, 위에서 정의한 events 배열의 항목을 가진 datepicker의 날짜를 강조 표시하는 것뿐입니다.

   onSelect: function(dateText) { 
       var date, 
        selectedDate = new Date(dateText), 
        i = 0, 
        event = null; 
   
       /* Determine if the user clicked an event: */ 
       while (i < events.length && !event) { 
        date = events[i].Date; 
   
        if (selectedDate.valueOf() === date.valueOf()) { 
         event = events[i]; 
        } 
        i++; 
       } 
       if (event) { 
        /* If the event is defined, perform some action here; show a tooltip, navigate to a URL, etc. */ 
        alert(event.Title); 
       } 
   } 
   

   을 다시는 많은 코드처럼 보이는,하지만 모두가 일어나고 우리가 '이다 : 당신은 하루에 클릭 할 때 무엇을해야 하는지를 날짜 선택기를 말할 수있는

3. 는 onSelect 이벤트 핸들러를 정의 클릭 한 날짜와 관련된 이벤트를 찾습니다. http://jsfiddle.net/Zrz9t/1151/ : 우리가 그 이벤트를 찾은 후, 당신은 당신이 원하는대로 행동

여기에 전체 작업의 예입니다 (예를 들어, 툴팁을 표시) 걸릴 수 있습니다. 2 월/3 월으로 이동하여 이벤트를 확인하십시오.

앤드류 휘태커 솔루션에 추가

Answer 2

(아마도 제목이나 날짜가 항상 좋은 식별자가 아니기 때문에 실제로는 해킹하지만 다른 사람에 대한 사실은 어쩌면 완벽)

그것을 할 수있는 또 다른 방법이있다 참고 : 첫 번째 앤드류 휘태커 솔루션을 읽어 보시기 바랍니다 및

// date picker 
$("div").datepicker({ 
    // hook handler 
    beforeShowDay: function(tdate) { 
     var mydata = $(this).data("mydata"); 
     var enabled = false; 
     var classes = ""; 
     var title = date; 
     $.each(mydata, function() { 
      if (this.date.valueOf() === tdate.valueOf()){ 
       enabled = true; 
       classes = "highlight"; 
       title = title + '" data-id ="'+this.id;// my hack to add additional attributes ;) 
      } 
     });   
     return [enabled,classes,title]; 
    }, 
    // event handler 
    onSelect: function() { 
     var id = $(this).find(".ui-datepicker-current-day").attr("data-id"); 
     mydata = $(this).data("mydata"), 
     selectedData = null;   
     /* search for data id */ 
     $.each(mydata,function(){ 
      if (this.id == id){ 
       selectedData = this; 
      } 
     }); 
     if (selectedData) { 
      /* If the event is defined, perform some action here; show a tooltip, navigate to a URL, etc. */ 
      alert(selectedData); 
     } 
    } 
}).data("mydata", 
    // your data 
    [{ 
     id:1, 
     title: "Five K for charity", 
     date: new Date("02/13/2011") 
    }, 
    { 
     id:2, 
     title: "Dinner", 
     date: new Date("02/25/2011") 
    }, 
    { 
     id:3, 
     title: "Meeting with manager", 
     date: new Date("03/01/2011") 
    }]);