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.

Change agenda hour from 6 am to 6 am tomorrow

I am trying to set FullCalendar so it shows hours from 6am to 6am the next day. I can set minTime=6, but what should I put as maxTime? Thanks!
This is the full code:
<script>
$(document).ready(function() {
$.ajax({
url: "/getfullcalendar",
cache: false
})
.done(function( retevents ) {
var retevents = retevents;
$('#fullcalendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaDay,listWeek',
},
firstDay: 1,
defaultView: 'agendaDay',
navLinks: true,
minTime: "06:00:00",
// What to put here
// for the same time tomorrow (6am)?
maxTime: "24:00:00",
height: 'auto',
events: retevents,
});
});
});
</script>

maxTime: "30:00:00"
24 hours + 6 hours for the next day

It looks like you can use the
allDaySlot: true
option. https://fullcalendar.io/docs/agenda/allDaySlot/

Fullcalendar and jsp

Good evening everyone!
I need to show the FullCalendar events of my agenda.
I have a list of events in my database and my method returns database data via json (DAO jsp). I'm using dataSet and End date because Java does not support the use of the attributes of reserved words.
my json returns this:
[{"id": 3,"title": "Alexandre Garcia","dataStart": "05/09/2016 20:00","dataEnd": "05/09/2016 21:00"}]
my javascript:
<script type="text/javascript">
$(document).ready(function () {
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultView: 'agendaWeek',
timezone: "local",
ignoreTimezone: false,
editable: false,
selectable: true,
minTime: "07:00:00",
maxTime: "17:00:00",
slotDuration: "00:60:00",
allDay: false,
events: function (start, end, timezone, callback) {
$.ajax({
url: 'app.json',
type: "GET",
datatype: 'json',
success: function (doc) {
var events = [];
if (doc != undefined && doc.length > 0) {
doc.forEach(function (entry) {
events.push({
title: entry.title,
start: entry.dataStart,
end: entry.dataEnd
});
});
}
callback(events);
}, error: function (err) {
alert('Error in fetching data');
}
});
},
eventClick: function (calEvent, jsEvent, view) {
alert(calEvent.title);
}
});
});
</script>
but my calendar is always empty, could help me?

Why FullCalendar doesn't display hours beside?

The calendar doesn't display hours beside .
i have uploaded a picture and put the code to understand the problem more
how can i correct it ?
Code javascript :
$(document).ready(function () {
var date = new Date();
// the code display the calendar
$('#calendar').fullCalendar({
// the header
header:{
left: 'prev,next today',
center: 'title',
right: 'agendaWeek,agendaDay'
},
defaultView: 'agendaWeek',
lang: 'fr',
buttonIcons: false, // show the prev/next text
editable: true, // resize event
eventLimit: true, // allow "more" link when too many events
minTime: '06:00:00',
maxTime: '20:00:00',
eventRender: function (event, element) {
element.find('.fc-title').append(" || " + event.type);
},
dayClick: function (date, jsEvent, view, resourceObj) {
//getting the clicked date from calendar
},
eventClick: function (calEvent) {
// event clicked
},
// events redered in twig template
// I an working with symfony
events:{{ events|raw }}
})
});

thank you very much i'm using fc-time{ display: none;} it's working now