將點擊事件添加到fullcalendar

Question

如何在事件上添加點擊事件並將日期和事件時間作爲網址變量傳遞到另一個頁面？當用戶點擊某個事件時，我想將日期和事件時間傳遞給另一個頁面進行處理。

Answer 1

$('#calendar').fullCalendar({ 
    eventClick: function(calEvent, jsEvent, view) { 
     window.location = "http://www.domain.com?start=" + calEvent.start; 

    } 
}); 

看看這裏的更多信息：http://arshaw.com/fullcalendar/docs/mouse/eventClick/

Answer 2

有事件對象的URL參數。這隻會創建一個<a>標記。您可以在後端自行構建，以通過網址傳遞所需的任何參數。 @ durilai的JavaScript方法也可以。

Answer 3

好吧，看起來我回答了我自己的問題。 Javascript函數escape()有訣竅。

Answer 4

這是我如何調用對話框，並填充它：

$('#calendar').fullCalendar({ 
    dayClick: function (date, allDay, jsEvent, view) { 
     $("#dialog").dialog('open'); 
    }, 
}); 

$("#dialog").dialog({ 
    autoOpen: false, 
    height: 350, 
    width: 700, 
    modal: true, 
    buttons: { 
     'Create event': function() { 
      $(this).dialog('close'); 
     }, 
     Cancel: function() { 
      $(this).dialog('close'); 
     } 
    }, 

    close: function() { 
    } 

}); 

Answer 5

回調點擊日期格：

dayClick: function(date, allDay, jsEvent, view) { 
... 
} 

回調點擊事件：

eventClick: function(event) { 
... 
} 

你可以試試這個真實世界演示：http://www.gbin1.com/technology/jquery/devappwithfullcanlendar/gbin1schedule.htm

Answer 6

我知道這是一個較舊的帖子，但我今天早上正在尋找類似的東西。在查看其他一些解決方案後，我覺得我的解決方案要簡單得多。 One thing is that I use font awesome in the anchor tag.

我想在用戶點擊事件時在日曆上顯示事件。所以我編寫像這樣一個單獨的標籤：

<div id="eventContent" class="eventContent" style="display: none; border: 1px solid #005eb8; position: absolute; background: #fcf8e3; width: 30%; opacity: 1.0; padding: 4px; color: #005eb8; z-index: 2000; line-height: 1.1em;"> 
    <a style="float: right;"><i class="fa fa-times closeEvent" aria-hidden="true"></i></a><br /> 
    Event: <span id="eventTitle" class="eventTitle"></span><br /> 
    Start: <span id="startTime" class="startTime"></span><br /> 
    End: <span id="endTime" class="endTime"></span><br /><br /> 
</div> 

我覺得它更容易在我的jquery，因爲我使用asp.net使用的類名。

下面是我的fullcalendar應用程序的jQuery。

<script> 

    $(document).ready(function() { 

     $('#calendar').fullCalendar({ 
      googleCalendarApiKey: 'APIKEY', 
      header: { 
       left: 'prev,next today', 
       center: 'title', 
       right: 'month,agendaWeek,agendaDay' 
      }, 
      events: { 
       googleCalendarId: '@group.calendar.google.com' 
      }, 
      eventClick: function (calEvent, jsEvent, view) { 
       var stime = calEvent.start.format('MM/DD/YYYY, h:mm a'); 
       var etime = calEvent.end.format('MM/DD/YYYY, h:mm a'); 
       var eTitle = calEvent.title; 
       var xpos = jsEvent.pageX; 
       var ypos = jsEvent.pageY; 
       $(".eventTitle").html(eTitle); 
       $(".startTime").html(stime); 
       $(".endTime").html(etime); 
       $(".eventContent").css('display', 'block'); 
       $(".eventContent").css('left', '25%'); 
       $(".eventContent").css('top', '30%'); 
       return false; 
      } 
     }); 
     $(".eventContent").click(function() { 
      $(".eventContent").css('display', 'none'); 
     }); 
    }); 

</script> 

您必須擁有自己的Google日曆ID和API密鑰。

我希望這有助於當你需要一個簡單的彈出顯示