How can I add a click event on an event and pass the day and event time as a url variable to another page? When a user clicks on an event I want to pass the date开发者_运维知识库 and event time to another page for processing.
$('#calendar').fullCalendar({
eventClick: function(calEvent, jsEvent, view) {
window.location = "http://www.domain.com?start=" + calEvent.start;
}
});
Look here for more info: http://arshaw.com/fullcalendar/docs/mouse/eventClick/
callback for clicking date grid:
dayClick: function(date, allDay, jsEvent, view) {
...
}
callback for clicking event:
eventClick: function(event) {
...
}
You can try this real world demo: http://www.gbin1.com/technology/jquery/devappwithfullcanlendar/gbin1schedule.htm
There is a url parameter on the Event object. This will just create an <a> tag. You could build this in the back end yourself to pass whatever arguments you need over the url. @durilai's javascript method would work as well.
Okay, looks like I answered my own question. Javascript function escape()
does the trick.
Here's how I call the dialog and populate it:
$('#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 () {
}
});
I know this is an older post but I was looking for something similar this morning. I feel that my solution was much simpler after looking over some of the other solutions. One thing is that I use font awesome in the anchor tag.
I wanted to display an event on my calendar when the user clicked the event. So I coded a separate tag like so:
<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>
I find it easier to use class names in my jquery since I am using asp.net.
Below is the jquery for my fullcalendar app.
<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>
You must have your own google calendar id and api keys.
I hope this helps when you need a simple popup display
精彩评论