We Keep Coding

Full calendar not display correct date time in week and day view

I have this full calendar code
jQuery(document).ready(function() {
jQuery('#calendar').fullCalendar({
events: function(start, end, timezone, callback) {
$.ajax({
url: baseUrl+"events",
dataType: 'json',
success: function(doc) {
var events = [];
$(doc).each(function() {
events.push({
id: $(this).attr('id'),
title: $(this).attr('title'),
description: "Start time :"+$(this).attr('start')+"End Time:"+$(this).attr('end'),
start: $(this).attr('start'),
end_time: $(this).attr('end'),
});
});
callback(events);
}
});
}, eventRender: function(eventObj, $el) {
var startDate = moment(eventObj.start).format('DD MMM, Y hh:mm A');
var endDate = eventObj.end_time ? moment(eventObj.end_time).format('DD MMM,Y hh:mm A') : '-';
var contentsHtml = '<div class="t2f_popover_event"><ul>';
contentsHtml = contentsHtml+ '<li> <b>Start Time: </b>'+ startDate+'</li><li> <b>End Time: </b>'+endDate+'</li><li><b>Event Type:</b>'+(' Working hours')+'</li>';
'</ul> </div>';
$el.popover({
title: '<div style="color:#fff; text-transform:capitalize;font-weight: 600;padding:5px;">'+eventObj.title+'</div>',
content: eventObj.description,
trigger: 'manual',
placement: 'left',
container: 'body',
content: contentsHtml,
html: true
}).on("mouseenter", function () {
...
...
});
},
eventOverlap : false,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listMonth'
},
changeView : 'agendaDay',
defaultDate: new Date(),
navLinks: true, // can click day/week names to navigate views
selectable: true,
selectHelper: true,
selectConstraint: {
start: jQuery.fullCalendar.moment().subtract(1, 'days'),
end: jQuery.fullCalendar.moment().startOf('month').add(1, 'month')
},
displayEventTime: false,
disableDragging: true,
editable: false,
eventLimit: true,
});
});
Start time is - 2022-12-03T01:00:00 i.e 1:00 AM
End time is - 2022-12-03T11:59:00 i.e 11:59 AM
but on calendar time is not proper of each event.
it should be from 1:00 AM to 11:59 AM but in calendar event start from 1:00 AM.
Any Solution to fix this issue. Thanks

Fullcalendar - Half Hour Event Title Issue

The answer at Fullcalendar event's end time is missing is for an older version of fullcalendar. It's not the answer I want.
In my fullcalendar application, when I create a "half-an-hour" event it just show only event start time and title at week view.
For one hour and longer events, there are no problems I encounter. It only happens at "half-an-hour" events. So, I don't know if this is a feature or not.
I want my events to be displayed like "08:00 - 08:30" (start - end) even for half an hour events.
My code:
var calendar = $('#calendar').fullCalendar({
allDaySlot: false,
eventOverlap: false,
selectOverlap: false,
editable: false,
eventStartEditable: false,
eventDurationEditable: false,
timezone: 'local',
timeFormat: "HH:mm",
minTime: "08:00:00",
maxTime: "20:00:00",
header: header,
selectable: true,
selectHelper: false,
defaultView: "agendaWeek",
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listMonth'
},
view: {
agendaWeek: {
columnFormat: "M/D [(]ddd[)]"
}
},
select: function(start, end, allDay) {
...
}
eventClick: function(calEvent, jsEvent, view) {
...
}
});
ScreenShot (SS):
Note: Sometimes even event titles cannot be seen in the week view of Fullcalendar.

Split day agenda in full calendar into 15-minute slots

$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
buttonText: {
today: 'today',
month: 'month',
week: 'week',
day: 'day'
},
//Random default events
events : <?php echo json_encode($events1);?>,
editable: true,
droppable: true, // this allows things to be dropped onto the calendar !!!
drop: function (date, allDay) { // this function is called when something is dropped
i need to split into 15 minutes interval.the default is 30 minutes slots.how can i achieve it thank u in advance

I think you're looking for slotDuration: http://fullcalendar.io/docs/agenda/slotDuration/

Fullcalendar axisFormat add 2 minutes

I'm trying to create a events calendar using Fullcalendar JS And I'm stuck with axisFormat, its always add 2 minutes. How can i solve this problem?
Picture
Calendar JS from Index
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title'
},
defaultView: 'agendaWeek',
minTime: '09:00',
maxTime: '23:00',
axisFormat: 'HH:MM',
overlap: false,
editable: false,
selectable: true,
slotEventOverlap: false,
selectOverlap: false,
eventOverlap: false,
events: {
url: "<?= URL::to('/data/schedule/futsal') ?>",
beforeSend: function(intervalStart, intervalEnd){
console.log(moment(intervalStart).format('YYYY-MM-DD HH:MM:SS')+'#'+moment(intervalEnd).format('YYYY-MM-DD HH:MM:SS'));
},
error: function() {
alert("error!!!");
},
success: function(index, data){
console.log(data);
}
}
});

You have given wrong axisformat.
Try this
axisFormat: 'HH:mm',
You need to give moment format
This will work for sure.

how to get current date in MOMENT.JS Dynamic

Using Salesforce
apex:includeScript value="{!URLFOR($Resource.Fullcalendarzip,
'/moment.min.js')}"
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
defaultDate: '2015-12-12',
editable: true,
events:[ ]
});
How to get today's date default but defaultDate: '2015-12-12',over here its hard coded how to get the default today's date.

Just use Javascript's new Date() to get today's date.
defaultDate: new Date(),