jQuery fullcalendar視圖修改和彈出事件

Question

有沒有人使用過jQuery Full Calendar？下面是修改的點點我找

下面是一個獲取日曆代碼：

$('#calendar').fullCalendar({ 

     events : http://someurl, 

     eventClick: function(event) { 
      // opens events in a popup window 
      window.open(event.url, 'gcalevent', 'width=700,height=600'); 
      return false; 
     }, 

     loading: function(bool) { 
      if (bool) { 
       $('#loading').show(); 
      }else{ 
       $('#loading').hide(); 
      } 
     } 

    }); 

我期待有它在三個不同的觀日，周，月如下面的代碼：

$(document).ready(function() { 

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

    var calendar = $('#calendar').fullCalendar({ 
     header: { 
      left: 'prev,next today', 
      center: 'title', 
      right: 'month,agendaWeek,agendaDay' 
     }, 
     selectable: true, 
     selectHelper: true, 
     select: function(start, end, allDay) { 
      var title = prompt('Event Title:'); 
      if (title) { 
       calendar.fullCalendar('renderEvent', 
        { 
         title: title, 
         start: start, 
         end: end, 
         allDay: allDay 
        }, 
        true // make the event "stick" 
       ); 
      } 
      calendar.fullCalendar('unselect'); 
     }, 
     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/' 
      } 
     ] 
    }); 

}); 

但

1. 我不知道怎麼給我的第一代碼與第二個集成？
2. onclick事件顯示彈出式警報

在此先感謝

Answer 1

這應該這樣做:)

$(document).ready(function() { 

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

var calendar = $('#calendar').fullCalendar({ 
    header: { 
     left: 'prev,next today', 
     center: 'title', 
     right: 'month,agendaWeek,agendaDay' 
    }, 
    selectable: true, 
    selectHelper: true, 
    select: function(start, end, allDay) { 
     var title = prompt('Event Title:'); 
     if (title) { 
      calendar.fullCalendar('renderEvent', 
       { 
        title: title, 
        start: start, 
        end: end, 
        allDay: allDay 
       }, 
       true // make the event "stick" 
      ); 
     } 
     calendar.fullCalendar('unselect'); 
    }, 
    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/' 
     } 
    ], 

    eventClick: function(event) { 
     // opens events in a popup window 
     window.open(event.url, 'gcalevent', 'width=700,height=600'); 
     return false; 
    }, 

    loading: function(bool) { 
     if (bool) { 
      $('#loading').show(); 
     }else{ 
      $('#loading').hide(); 
     } 
    } 

    }); 

});