Develop Reference

Get date of selected slot using fullCalendar control

I have some code where I am trying to grab the date as it relates to the slot selected by a user. I have tried this code and it doesn't work:
$('.fc-agenda-axis.fc-widget-header').on('mousedown', function (e) {
var clickedTime = $(this).parent().find('th').html();
// line below returns undefined
var clickedDate = $('#calendar').fullCalendar('getDate');
// and so does this
var clickedDate2 = $('calendar').fullCalendar('getDate');
someOtherCoolMethod(clickedDate, clickedTime);
});
Any idea why the first attempt to get the date doesn't work?
Additional Info: I am using the agendaDay view, and the version of fullCalendar is 1.5.4 - we will be upgrading to a later version this year.

You have to use eventClick.
$('#calendar').fullCalendar({
eventClick: function(calEvent, jsEvent, view) {
alert('Event start: ' + calEvent.start);
}
});
If it's no event you can use dayClick.

Laravel Full calendar 5 - Clicking event takes me to URL/undefined

My calendar loads just fine with all events. This is how I'm constructing it:
$events = [];
foreach($CalendarClasses as $Q){
$events[] = Calendar::event(
$Q->Classes->UserCourse->Course['code'],
true,
new \DateTime($Q->date),
new \DateTime($Q->date)
);
}
$calendar = \Calendar::addEvents($events);
Here's a sample event:
"events":[{"id":null,"title":"CSC 422","allDay":true,"start":"2018-09-16T00:00:00+02:00"}]
Whenever I click an event or attempt to trigger the eventPopover (https://fullcalendar.io/docs/event-popover), I get redirected to http://127.0.0.1:8000/dashboard/undefined
I tried to use a callback as in
$calendar = \Calendar::addEvents($events)->setCallbacks([
'eventClick' => 'function(event) {
event.preventDefault(); }'
]);
But it's just not working. I don't need any eventClick events, I just want the popover to display and no events to be triggered when an event is clicked. What do I do?
I'm using fullcalendar/2.2.7.

How do I get fullcalendar to read date/time?

I am using fullcalendar on my project. My user will enter event information such as event name, date, and location. everything works but the date/time.
when the user enters date and time it appears like this: 06/28/2016 10:00 AM
FullCalendar reads the date but doesn't read the time.
What do i need to do so that it can read the time?
Here is my js for fullcalendar:
$(document).ready(function() {
// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
// put your options and callbacks here
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
weekends: true,
events: 'http://www.familyevent.comli.com/events.php',
eventRender: function(event) {
if (event.allDay === 'true') {
event.allDay = true;
} else {
event.allDay = false;
}
},
eventClick: function(event) {
alert("event start " + moment(event.start).format('MM/DD/YYYY hh:mm a') + " event end " +
moment(event.end).format('MM/DD/YYYY hh:mm:ss'));
}
});
});
I put in eventClick to see what fullCalendar was reading. it gets the date but the time is always 12:00 AM

Use moment.js that is already bundled with fullCalendar to convert the date to a format that fullcalendar will understand.
event.start = moment("06/28/2016 10:00 AM");
If it still doesn't work even after removing space before AM, and if your date format is well-defined, you can create the moment object step-by step, by adding the hours and minutes manually:
var time = ("06/28/2016 10:00 AM").split(" ")[1].split[":"];
event.start = moment("06/28/2016 10:00 AM").hours(time[0]).minutes(time[1]); //also add AM/PM handling

Fullcalendar combined with bootstrap-datepicker

I'm try to update fullcalendar event after user change date from bootstrap-datepicker: http://bootstrap-datepicker.readthedocs.org/en/latest/events.html
I'm following the (only) solution found here: How to combine jquery date-picker and jquery full calendar
which for bootstrap-datepicker would be:
$('#fullcalEventEnd').datepicker().on('changeDate', function(evt){
var endDate = evt.date;
list.eventUpdated.end = moment(endDate).format("DD-MM-YYYY");
$(cal).fullCalendar('renderEvent', list.eventUpdated, true);
});
What it should do is, update an event created once the user selects the calendar, so on my select function i have:
select: function(start, end) {
$('#fullcalEventFrom').datepicker('setValue', start);
$('#fullcalEventTo').datepicker('setValue', end);
list.eventUpdated = {
title: eventTitle,
start: start,
end: end
};
$(cal).fullCalendar('renderEvent', list.eventUpdated, true); // stick? = true
$(cal).fullCalendar('updateEvent', event);
},
....
list is my global object: var list = {}
But so far nothing, I'm not able to update the event and this line
$(cal).fullCalendar('renderEvent', list.eventUpdated, true); is giving me an error and I don't understand why
Anyone already face this problem?

updating an event by dragging/dropping fullcalendar- Javascript

I'm using Fullcalendar for a project I'm developing ... I have only one feature left to be implemented, which is when an existing event is dragged from it's original position to another time or date. I would like to know how I get the current object information (title, new start time, old start time, id, url, etc), so I can update the database with the newer information ... which property from the Fullcalendar object do I use?
I implemented the drop property;
drop : function(date, allDay) {
// retrieve the dropped element's stored event object
var originalEventObject = $(this).data('eventObject');
// we need to copy it, so that multiple events don't
// have a reference object
var copiedEventObject = $.extend({}, originalEventObject);
// assign it the date that was reported
copiedEventObject.start = date;
copiedEventObject.allDay = allDay;
// render the event on the calendar
// the last `true` argument determines if the event `sticks`
$('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
// if the 'remove after drop' checkbox checked?
if ($('#drop-remove').is(':checked')) {
// if so remove the element from the "Draggable Events"
$(this).remove();
}
},
but it's not doing what I wanted ...

Take a look at the Event Dragging and Resizing http://arshaw.com/fullcalendar/docs/event_ui/
I think what you are looking for the eventDrop callback.
Triggered when dragging stops and the event has moved to a different
day/time.
http://arshaw.com/fullcalendar/docs/event_ui/eventDrop/
Example from arshaw's site:
$('#calendar').fullCalendar({
events: [
// events here
],
editable: true,
eventDrop: function(event,dayDelta,minuteDelta,allDay,revertFunc) {
alert(
event.title + " was moved " +
dayDelta + " days and " +
minuteDelta + " minutes."
);
if (allDay) {
alert("Event is now all-day");
}else{
alert("Event has a time-of-day");
}
if (!confirm("Are you sure about this change?")) {
revertFunc();
}
}
});