Am trying to change time format into 24H watch in full-calendar.
I tried to find it here but am unable to figure it out.
Here the code snippet:
jQuery('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: false,
weekends: true,
timeFormat: 'H:mmtt{-H:mmtt }',
Please have look to snap and help me. Thanks...
You can use axisFormat: 'HH:mm' to accomplish this. Let me know if this helps.
Just to complement: in version 2.4.0 this method was renamed to slotLabelFormat.
I use FullCalender V4.2.0 this work for me:
slotLabelFormat: [
{
hour: '2-digit',
minute: '2-digit',
hour12:false
}
],
Related
I am using an old installation of 1.5.3 in a bootstrap-based system.
I am loading a page via ajax, that contains a fullcalendar instance - in weekly view.
This is only the case in Chrome - looks find in Firefox/Explorer.
Note: the ajax page that I bring in does NOT have <!DOCTYPE.... header tags - rather, its just plain INNER HTML code - along with the relevant css/js for fullcalendar
this is my basic code:
$('#calendar').fullCalendar({
defaultView: 'agendaWeek',
theme: true,
weekends: false,
weekendDays: [5,6],
header: {
left: '',
center: '',
right: ''
},
allDaySlot : false,
firstHour: 8,
minTime: 8,
maxTime: 23,
columnFormat: {week: 'ddd'},
editable: false,
events: [
.....
]
});
Chrome: example: https://i.stack.imgur.com/i6tei.png
Firefox example: https://i.stack.imgur.com/bM5Uy.jpg
I have already remove the day from the header of the calendar.
What I cannot figure is how to remove the "link" on the number and the disable of the basicDay view.
I just want the user to have month and week.
This is how my calendar looks like
This is the thing I want to disable
thanks #ADyson
I set the navLinks to false and it fixed it.
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek'
},
firstDay: 1,
navLinks: false
});
I am a new programmer who is trying to build a scheduling site and I am using the latest version. fullcalendar 2.9.0.
How do I show the weekList on the page?
I am trying to add weekList button to show the list of events by weekly.
I simply add "list" under header but nothings shows on the page.
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'list,month,agendaWeek,agendaDay'
},
First of all you have to write listWeek, listDay, listMonth and listYear, not list only. I think are available only on 3rd version.
Add listweek as follows:
$('#calendar').fullCalendar({
header: {
left: 'prev,next, today,,
center: 'title',
right: 'month,agendaWeek,listWeek'
},
views: {
listWeek: {buttonText: 'List week'},
},
....
latest version is 3.1 i believe.
I haven't been able to find out whether the following options exists in Angular UI Calendar (http://angular-ui.github.io/ui-calendar/) or not.
http://fullcalendar.io/docs/event_ui/eventDurationEditable/
Here is the calendar init code
/* configuration */
$scope.uiConfig = {
calendar:{
height: 'auto',
editable: true,
header:{
left: 'today prev,next',
center: 'title',
right: 'month basicWeek basicDay'
},
eventDrop: $scope.onEventDrop,
eventResize: $scope.onEventResize
}
};
If anyone has done it, please suggest the property that I can use to implement.
Thanks!
To be resizable in the Month view, your events should'nt have the time part.
For example, an event with property start: '2015-02-01' will work while start: '2015-02-09T16:00:00' wont. (but it will in the Week or Day view)
I have a fullcalendar implementation with all day events. Is there any way to make these cover a whole day in the agenda views, rather than only being shown in the all day slot?
Example:
http://jsfiddle.net/c1gomowa/
There is a easy way to show only events of the day instead showing all showing blank spaces.
just use this --> basicDay in your header.
header:
{
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,basicDay'
}
You could set the event start to 00:00:00, and end: 23:59:59
that should make it span the whole day (set allDay: false).
$("#FullCalendar").fullCalendar({
defaultView: "agendaWeek",
eventLimit: true,
events: [
{
title: 'Event',
start: '2015-01-19 00:00:00',
end: '2015-01-19 23:59:59'
}
],
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
}
})