2012-12-11 85 views
0

我剛開始使用jQuery fullcalendar http://arshaw.com/fullcalendar/,我遇到了一個奇怪的問題。我從點擊功能啓動日曆,並且第一次打開日曆並且打開一個日曆。但是,如果我再次點擊,它會添加1,我現在有兩個日曆。每次點擊它時都會發生這種情況,每次都會添加一個日曆。是否有一些選項需要添加才能重新初始化日曆。我能看到的唯一選擇是'渲染'選項,但無法解決如何使用它。由於jquery fullcalendar打開多個日曆

UPDATE:新的代碼更新

$(function() { 
    $('#calhead1').on("click", function(){ 

     $("#msgcontent, #msgcontent2, #main, #msgtest").hide(1000); 
     $("#cal").show(); 
    }); 
}); 
    // Start Calendar Script // 

    $(function() { 

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

      $('#cal').fullCalendar({ 

       header: { 
        left: 'prev,next today', 
        center: 'title', 
        right: 'month,basicWeek,basicDay' 
       }, 
       editable: true, 
       theme: true, 
       width: 760, 
       height: 470, 
       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/' 
        } 
       ] 
      }); 

      }); 

    // End Calendar Script // 

回答

2

調用fullCalendar函數旨在創建一個新的日曆,以便您的腳本完全按照它的設想進行操作。你只需要在你的click事件處理程序之外移動該函數。

我也建議從live移動到新的on方法,因爲jQuery現在已棄用live

您的新代碼是這樣:

$(function() { 

    $('#cal').fullCalendar({ 

     header: { 
      left: 'prev,next today', 
      center: 'title', 
      right: 'month,basicWeek,basicDay' 
     }, 
     editable: true, 
     theme: true, 
     width: 760, 
     height: 470, 
     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/' 
      } 
     ] 
    }); 
    $('#calhead1').on("click", function(){ 

        $("#msgcontent, #msgcontent2, #main, #msgtest").hide(1000); 
        $("#cal").show(); 
        var date = new Date(); 
        var d = date.getDate(); 
        var m = date.getMonth(); 
        var y = date.getFullYear(); 
    }); 

}); 
+0

當第一次初始化日曆現在會發生什麼是,所有這些都是可見的是標題。我必須點擊今天才能看到完整的日曆。 – user1532468

+0

這看起來正確,但需要在日曆初始化之前聲明d,m和y變量。把它們移到點擊事件之外,然後再調用$('#cal')。fullCalendar({... – tocallaghan

+0

)如果你看看我更新的代碼,那就是現在的樣子,我該如何更新它。 謝謝 – user1532468

2
  1. jQuery的直播功能已過時,使用。對()
  2. 初始化您的日曆上點擊事件之外,只是顯示和隱藏它點擊。