jquery를 사용하는 이벤트 캘린더

Question

저는 fullCalendar jquery 플러그인과 백본을 사용하여 약속 캘린더를 만들고 있습니다. 여기에서이 튜토리얼을 읽는 중입니다. enter link description here

모달 상자를 만들고 새 이벤트를 입력하는 방법에 대한 코드는 "대화 상자를 시작합시다"섹션에 나와 있습니다. 코드는 대화 상자 위젯을 기반으로합니다. 내가 뭘하려고 오전

render: function() { 
    this.el.dialog({ 
     modal: true, 
     title: 'New Event', 
     buttons: {'Cancel': this.close} 
    }); 

그 대화에서 더 많은 HTML을 추가 할 수 있습니다 : JQuery와 UI, 여기

enter link description here 특별히 코드입니다. 사용자가 약속 기간을 선택할 수 있도록 예를 들어 select 요소를 추가하고 싶습니다.

http://api.jqueryui.com/dialog/의 jquery 설명서에는이를 수행하는 방법이 나와 있지 않습니다. 내가하고 싶은 일에 대한 더 나은 그림을 얻으려면 outlook.com 일정에 이벤트를 만들 때 표시되는 모달 상자를 살펴 보는 것이 좋습니다.

물론 데이터는 아약스와 함께 전송됩니다 ...하지만 그건 다른 주제입니다.

Answer 1

jqueryui 대화 상자는 플러그인을 적용 할 요소 안에있는 html 콘텐츠를 사용합니다.

외부 리소스에서 콘텐츠를로드하는 기본 제공 기능이 없다고 생각합니다.

그래서 대화 상자를 초기화하기 전에 html을 요소 안에 넣거나 콜백을 사용할 수 있습니다. 예. 당신이 그것으로 아약스를 통해 데이터를로드하려면 :

el.dialog({ 
modal: true, 
title: 'New Event', 
buttons: {'Cancel': this.close}, 
open: function(){ 
    var thisdialog = this; 
    $(thisdialog).html('loading data...'); 
    $.post('external_resouce.html', 
     function(data){ 
      $(thisdialog).html(data); 
     } 
    ); 
}