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
Related
I am using datetimepicker with a pair of linked selectors.
Upon the initial load the 'start_date' should show the current date and the 'expiry_date' should show the 'start_date + 30 days. This works as intended. However when a new 'start_date' is selected the expiry should always default to be 30 days ahead.
This is what I have:
$(function () {
function plusCalendarMonthToDate(e) {
return moment(e.date).add(30, 'days').millisecond(0).second(0).minute(0).hour(0)
}
defaultStartDate = new Date();
$('#datetimepicker-start').datetimepicker({
format: 'YYYY-MM-DD 00:00:00',
minDate: defaultStartDate,
defaultDate: defaultStartDate
});
$('#datetimepicker-expiry').datetimepicker({
useCurrent: false,
format: 'YYYY-MM-DD 00:00:00',
minDate: $('#datetimepicker-start').val(),
defaultDate: plusCalendarMonthToDate(defaultStartDate)
});
$("#datetimepicker-start").on("dp.change", function (e) {
$('#datetimepicker-expiry').data("DateTimePicker").minDate(e.date);
// when a start_date is selected, set the expiry to 30 days plus
plusCalendarMonth = plusCalendarMonthToDate(e);
$('#datetimepicker-expiry').data("DateTimePicker").defaultDate(plusCalendarMonth);
});
$("#datetimepicker-expiry").on("dp.change", function (e) {
$('#datetimepicker-start').data("DateTimePicker").maxDate(e.date);
});
});
When I select a new start_date the expiry_date does not update. I think it is because I already set the 'defaultDate' in the initialisation, if I remove it then the feature works but when I lose my initial default value for the expiry_date. How can I over-write the initial defaultDate?
Seems the solution is to use 'date()' not 'defaultDate()':
$('#datetimepicker-expiry').data("DateTimePicker").date(plusCalendarMonth)
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.
My current calendar looks like this :
full-calendar design
What I'm trying to do is change calendar date when I click a date in datepicker ( which is already done using .fullCalendar('gotoDate',date ) ) , the thing is , to get the resources and events I need to re-send the query to the server with the new value of 'date' , otherwise the calendar won't reload the data.
Here's the url I'm using to get the resources :
resources:
{
url: '/general?handler=AllResources',
data: function () {
return {
// must return the new date to display in calendar
};
}
}
'AllResources' method only get a few records depending on the date specificied
as parameter.
BTW : I'm rendering fullCalendar in document.ready , then I have the following function to give my datepicker the 'changeDate' functionality :
$('.fc-center h2').datepicker({
format: "dd/mm/yyyy",
language: "es",
dateFormat: "dd/mm/yyyy",
todayHighlight: true
}).on("changeDate", function (e) {
var date = moment(e.date);
$("#calendar").fullCalendar('gotoDate', date);
});
Im not sure if i unserstand your problem.
So if you change the date, the resources don't get updated?
Have a look at refetchResourcesOnNavigate
[edit]
Try this:
$('.fc-center h2').datepicker({
format: "dd/mm/yyyy",
language: "es",
dateFormat: "dd/mm/yyyy",
todayHighlight: true
}).change(function (e) {
var mydate =moment($(this).val(),'DD/MM/YYYY').format('YYYY-MM-DD');
$("#calendar").fullCalendar('gotoDate', mydate);
});
And then when initializing the calender set 'refetchResourcesOnNavigate: true' to make sure whenever the calendar changes the resources get loaded again
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
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