2015-06-30 19 views
0

我嘗試添加完整的日曆。第一次點擊按鈕,它增加了成功。在我使用jquery empty()方法清除我的ScheduleCalender div後。我重新運行完整的日曆代碼。但是完整的壓光機沒有出現。至少沒有內容出現在div內。在這裏我的代碼。我的div選擇器工作正常。我測試了這一點。完全壓光機動態添加不工作

$('#addNewTimeScheduleEntry').click(function() { 
    $('#scheduleCalendar').empty(); 
    var scheduleYear = $('.scheduleYear').val(); 
    var scheduleMonth = $('.scheduleMonth').val(); 

    $('#scheduleCalendar').fullCalendar({ 
     defaultDate: scheduleYear + '-' + scheduleMonth + '-01', 
     header: { 
      left: '', 
      center: '', 
      right: 'title' 
     }, 
     eventRender: function (event, element) { 
      element.qtip({ 
       content: event.description, 
       style: { 
        classes: 'qtip-dark qtip-shadow' 
       }, 
       position: { 
        my: 'top left', // Position my top left... 
        at: 'bottom right', // at the bottom right of... 
        target: $(element) // my target 
       } 
      }); 

     }, 
     height: $('.panel-body').height()-50 

    }); 

}); 

here has full calendar link

這裏我的HTML

<div class="panel-body fixed-content"> 
    <div class="year-month-control"> 
    <select class="selectpicker scheduleYear"> 
    </select> 

    <select class="selectpicker scheduleMonth"> 
    </select> 

     <button type="button" id="addNewTimeScheduleEntry" class="btn btn-default" id="addnewScheduleEntry"><i class="fa fa-plus"></i>&nbsp;Add Entry</button> 
     <button type="button" id="addNewTimeScheduleEntry" class="btn btn-default" id="saveScheduleEntry" ><i class="fa fa-upload"></i>&nbsp;Save Entry</button> 
    </div> 
    <br/> 
    <div id='scheduleCalendar'></div> 

</div> 
+0

你能證明你的HTML –

+0

我添加它@man_luck – GRTZ

回答

1

它運行正常您清空DIV即使經過。唯一的區別是我已經把它放在文檔準備好的事件中,但我不認爲這應該有所作爲。這裏有兩個jsfiddles; http://jsfiddle.net/2qs8tyg1/2/

$(document).ready(function() { 

    $('#addNewTimeScheduleEntry').click(function() { 
     $('#scheduleCalendar').empty(); 
     $('#scheduleCalendar').fullCalendar({}); 
     var scheduleYear = date.getFullYear(); 
     var scheduleMonth = date.getMonth(); 

     $('#scheduleCalendar').fullCalendar({ 
      defaultDate: scheduleYear + '-' + scheduleMonth + '-01', 
      header: { 
       left: '', 
       center: '', 
       right: 'title' 
      }, 
      eventRender: function (event, element) { 
       element.qtip({ 
        content: event.description, 
        style: { 
         classes: 'qtip-dark qtip-shadow' 
        }, 
        position: { 
         my: 'top left', // Position my top left... 
         at: 'bottom right', // at the bottom right of... 
         target: $(element) // my target 
        } 
       }); 

      }, 
      height: $('.panel-body').height()-50 

     }); 

    }); 

}); 

http://jsfiddle.net/justinobney/uaNgR/

jQuery(document).ready(function() { 

     var date = new Date(); 
     var d = date.getDate(); 
     var m = date.getMonth(); 
     var y = date.getFullYear(); 

     $('#calendar').fullCalendar({ 
      header: { 
       left: 'prev,next today', 
       center: 'title', 
       right: 'month,agendaWeek,agendaDay' 
      }, 
      viewDisplay: function(view) { 
       window.location.hash = "month=" + (view.start.getMonth() + 1) + "&year=" +view.start.getFullYear(); 
      }, 
      editable: true, 
      events: [ 
       { 
        title: 'All Day Event', 
        start: new Date(y, m, 1) 
       }, 
       { 
        title: 'Long Event', 
        start: new Date(y, m, d-5), 
        end: new Date(y, m, d-2) 
       }, 
       { 
        id: 999, 
        title: 'Repeating Event', 
        start: new Date(y, m, d-3, 16, 0), 
        allDay: false 
       }, 
       { 
        id: 999, 
        title: 'Repeating Event', 
        start: new Date(y, m, d+4, 16, 0), 
        allDay: false 
       }, 
       { 
        title: 'Meeting', 
        start: new Date(y, m, d, 10, 30), 
        allDay: false 
       }, 
       { 
        title: 'Lunch', 
        start: new Date(y, m, d, 12, 0), 
        end: new Date(y, m, d, 14, 0), 
        allDay: false 
       }, 
       { 
        title: 'Birthday Party', 
        start: new Date(y, m, d+1, 19, 0), 
        end: new Date(y, m, d+1, 22, 30), 
        allDay: false 
       }, 
       { 
        title: 'Click for Google', 
        start: new Date(y, m, 28), 
        end: new Date(y, m, 29), 
        url: 'http://google.com/' 
       } 
      ] 
     }); 

    function setupRouting() { 
     $.jsRouter.mapRoute('Month Change', 'month={month}&year={year}', MonthChanged); 
    } 

    function MonthChanged(args) { 
     var vMonth = args.month; 
     var vYear = args.year; 
     console.log('event trapped:', args); 
    } 
     $.getScript('http://www.tasktrackr.com/js/routing.js',setupRouting); 
    //jQuery.deparam.fragment() 
    //$.getScript('https://raw.github.com/cowboy/jquery-bbq/master/jquery.ba-bbq.min.js') 
    }); 
+0

您是否正確運行呢? – GRTZ

+1

由於某些原因,它僅適用於Jquery 1.7.2或更低版本http://jsfiddle.net/2qs8tyg1/2/。但內容確實出現在原始問題的div中。內容以div格式加載,但高度無法調整以適應日曆。它只顯示日曆標題及其控件。 –

+0

我會明白這是爲什麼 –