I am using fullcalendar scheduler and trying to set timeformat on the timeline to be in 24:00 format not in 12am or pm format.
The default timeline view has 12am/pm format and the threeday timeline has an extra row on top for the day http://fullcalendar.io/scheduler/ .
I think that the columnformat could be the key here. but unfortunately when i use slotLabelFormat:'H:mm' to get the timeline show 24:00 format, the columns displaying the date disappear on the 3 day view.
Is this a bug or am i doing something wrong?
This is how it works correctly:
views: {
timelineThreeDays: {
type: 'timeline',
slotLabelFormat: [
'ddd D/M',
'H:mm'
],
columnFormat: 'ddd D.M',
duration: { days: 3 }
}
},
Related
I'm trying to show a calendar for a person that works a night shift. I intend to show a calendar type 'resourceTimeline' from the current day at 6 pm to the next day at 3 am.
I've tried
visibleRange: {
start: '2021-04-13 18:00:00',
end: '2020-04-14 03:59:59'
}
but it only shows the current date until midnight.
I tried using slotMinTime and slotMaxTime but if the slotMinTime is greater then slotMaxTime it crashes.
Here is my view definition:
nightShift: {
type: 'resourceTimeline',
slotDuration: { hours: 1 },
visibleRange: {
start: '2021-04-13T18:00:00',
end: '2020-04-15 03:59:59'
},
buttonText: 'Night Shift',
slotLabelFormat: [
{
day: 'numeric',
weekday: 'short'
},
{
hour: 'numeric',
minute: 'numeric',
hourCycle: 'h23'
}
]
}
Is there any way to achieve what I want?
You can set slotMaxTime to "28:00:00"
Problem: the time in fullcalendar month view is displayed as 12h+am/pm. If you change the locale to spanish, it changes to H (without minutes)
I want to show it always, for all locales, as H:mm. In all the previous answers I found to this same question, the solution is use the option timeFormat: "H:mm", but it doesn't seem to work in fullcalendar v.4.2 (current). This is what I tried:
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'dayGrid' ],
axisFormat: "H:mm",
timeFormat: "H:mm"
}
Here is a fiddle showing the problem: http://jsfiddle.net/mariavilaro/esxrb8mw/2/
Any tip for acomplishing this?
I just found the solution just before hitting the submit button. In fullcalendar v.4 the correct option for the time format is eventTimeFormat, so this would be the correct code for showing the time as H:mm:
eventTimeFormat: {
hour: 'numeric',
minute: '2-digit',
omitZeroMinute: false,
meridiem: false
}
I updated the fiddle.
I'm using Fullcalendar and I need to show all the current year plus the next two month of the next year using a timeline view.
If I use the visibleRange option in this way:
visibleRange: function (currentDate) {
return {
start: currentDate.year()+'-01-01',
end: currentDate.year()+1 + '-02-28',
};}
The calendar show the correct period but the navigation button 'next' stop working.
I also tried to use the duration option instead but I don't know how to set the "start" period.... the calendar start always at current date.
I think there is a solution that not require the writing of a full custom view to do so.
The solution to this involves setting the dateIncrement value - this tells the next/prev buttons how far to increase/decrease the visible dates by when you customise the view range like this.
Here's an example. N.B. I've used momentJS's built-in functions, rather than string concatenation, to provide a more robust and neater way of setting the visible range. It's probably also a good idea to set the slotDuration to something that won't produce a massive long calendar. I've used a 1 month duration as an example, but obviously you can configure it to whatever you need.
$('#calendar').fullCalendar({
schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
defaultView: 'timeline',
header: {
left: 'prev,next today',
center: 'title',
right: 'timeline'
},
slotDuration: { months: 1 },
dateIncrement: { years: 1 },
visibleRange: function (currentDate) {
return {
start: currentDate.clone().startOf('year'),
end: currentDate.clone().startOf('year').add({ years: 1, months: 2}),
};
},
//...etc
});
The dateIncrement setting is documented here: https://fullcalendar.io/docs/current_date/dateIncrement/
In week and day view im getting the time in 24H for the events, but on monthview it showed as AM/PM, so a event in week/day view is showed 22:00 and on/in monthview it showed 10p "Eventname", how do i changes that !?
I have this in my script.
22:00 is showed as 10p
timeFormat: { agenda: 'H:mm{ - HH:mm}' }, dragOpacity: { agenda: 0.5 }, minTime: 0,
and if i use this
timeFormat: { '': 'HH:mm' }, isRTL: false,
Then its right on monthview with 22:00 but then its showing the time in week/day view as 10:00.
You want 24h in all cases? Try: timeFormat: 'HH:mm{-HH:mm}'
how to define custom week range in Full Calendar. For example currently it is given 7 days week like 'Sun','Mon','Tue','Wed','Thu','Fri','Sat'. but i want to display 14 days week like 'SunA','MonA','TueA','WedA','ThuA','FriA','SatB','SunB','MonB','TueB','WedB','ThuB','FriB','SatB'.Is there any property by which i can set my week range days 14 without altering FullCalendar.js??
Apparently this is now possible with Custom Views:
http://fullcalendar.io/docs/views/Custom_Views/
If you'd like to take one of the existing view types, like "basic" or "agenda", but display it with a custom duration, like 4-days instead of the stock 1-week or 1-day, do something like the following:
$('#calendar').fullCalendar({
header: {
center: 'month,agendaFourDay' // buttons for switching between views
},
views: {
agendaFourDay: {
type: 'agenda',
duration: { days: 4 },
buttonText: '4 day'
}
}
});
sounds like this is the issue you'd want to follow (not yet implemented):
http://code.google.com/p/fullcalendar/issues/detail?id=692