Develop Reference

Full calendar events default display shows start time

Using Fullcalender.js , i am showing events in calendar .
I added dayclick and event click funtionality. But when i use date.format() in dayClick (), it shows error date.Format() is not the function.
I upgraded my fullcalendar to v3.5.1 , after that i can get dayClick functionality very well. But the events showing Start time as default even if im not giving any title to it.
$(document).ready(function() {
$('#ConfCalendarBlock').fullCalendar({
height:400,
editable: true,
events: modJs.getConfJsonUrl(),
loading: function(bool) {
if (bool) $('#loadingConfCalendarBlock').show();
else $('#loadingConfCalendarBlock').hide();
},
dayClick: function (date, jsEvent, view) {
modJs.getdayclick(date.format());
},
eventClick: function(calEvent, jsEvent, view) {
modJs.getEventClcik(calEvent.id);
},
});
});
in my php code
public function listToEvent($book){
$event = array();
$starttime = date("g:i a", strtotime($book->from_date));
$endtime = date("g:i a", strtotime($book->to_date));
$event['id'] = $book->id;
$event['title'] = $starttime."-".$endtime. " (".$book->type.")";
$event['start'] = $book->from_date;
$event['end'] = $book->to_date;
$eventBackgroundColor = "";
$event['color'] = $eventBackgroundColor;
$event['backgroundColor'] = $eventBackgroundColor;
$event['textColor'] = "#FFF";
return $event;
}
Calendar shows the event as
9:15a 9:15am - 10:30am (Meeting)
The start time shows twice ,but if i refer old version of Calendar, it shows as i want.
Even i didnt give any title to the event, then the calendar shows the start time as 9:15a in blue color event bar.

It seems you need to set displayEventTime to false

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();
}
}
});

Stop Automatic Entry Next / Previous Month Datetimepicker

I'm using Trent Richardson's great Datetimepicker. However, I'm running into a specific issue in which the plugin does not act like the traditional jQuery UI Datepicker.
When you start with a blank date, then press next or previous to change the month, in Datetimepicker it automatically inserts a date and time, where jQuery UI does not. The fact that it adds that is causing issues in my application, and I would just like it not to do that in the first place.
Here's my initialization:
function datepickerAdd() {
$('input[name=valueTextField]').addClass('datepicker');
$( ".datepicker" ).datetimepicker({
dateFormat: 'm/d/yy ',
timeText: '<spring:message code='customMetaData.datetimepicker.time'/>',
controlType: 'select',
timeFormat: "h:mm TT",
ampm: true
});
$('input[name=valueTextField]').attr('onPaste', 'return false')
}
Does anyone have anywhere to start with this?

There's no such option for Date, like alwaysSetTime for Time in this Datetimepicker. So you have to implement it by yourself. Just add these lines in your datetimepicker call:
onChangeMonthYear: function(year, month, dpInst, tpInst) {
if(!tpInst.timeDefined && !dpInst.dateDefined) {
this.value = '';
dpInst.dateDefined = null;
}
},
onSelect: function(date, dpInst) {
dpInst.dateDefined = true;
}
Check working JSFiddle here