將點擊事件添加到fullcalendar

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

2010-03-26 sbekele

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

    } 
});

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

來源

2010-03-26 16:42:36

我沒有從文檔得到它要麼...這是更好+1 – Ropstah 2010-05-27 15:35:45

此外，您還可以使用@Kyle鷓鴣答案，我個人像那樣更好。我使用我的方法，因爲我從業務層獲取一個事件，我不想綁定到一個域，所以我在Web應用程序上構建鏈接。 – 2010-05-27 16:22:53

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

來源

2010-04-09 01:50:44 partkyle

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

來源

2010-12-01 21:06:40

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

$('#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() { 
    } 

});

來源

2012-04-11 07:16:00

你是如何通過日期，全天候和其他變量？ – GDmac 2012-10-29 19:25:03

回調點擊日期格：

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

回調點擊事件：

eventClick: function(event) { 
... 
}

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

來源

2012-09-04 11:47:39 terry

我知道這是一個較舊的帖子，但我今天早上正在尋找類似的東西。在查看其他一些解決方案後，我覺得我的解決方案要簡單得多。 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密鑰。

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

來源

2016-09-01 21:30:06 Roger

將點擊事件添加到fullcalendar

回答

相關問題