将点击事件添加到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

回答

相关问题