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"
Related
In my calendar, I would like to not see the events but instead have the range of the event greyed like what is not in the businessHours range.
For example, if I have those businessHours:
businessHours: {
start: '08:00',
end: '12:00'
}
and an event which starts at 10:00 and finishes at 11:00, I would like to have the exact same render as :
businessHours: [
{
start: '08:00',
end: '10:00'
},
{
start: '11:00',
end: '12:00'
}
]
Is there a way to add unavailable range of time like this ?
Thanks.
I'm using FC 2.0 and was searching for an option to localize 'AM' 'PM' text on the axis, which is being set with the option:
axisFormat: 'h(:mm) A',
is there a way to overwrite these values like we do for monthNames, dayNames etc?
Thanks in advance!
Edit:
This is how I'm localizing some other elements of full calendar:
('#calendar-wrapper').fullCalendar({
header: {
left: 'agendaDay,agendaWeek,month, today',
center: 'prev,title,next',
right: 'publish_info'
},
titleFormat: {
month: 'MMM YYYY',
agendaDay: 'dddd, MMM D YYYY',
agendaWeek: 'MMM D, YYYY',
},
columnFormat: {
week: 'ddd D'
},
axisFormat: 'h(:mm) A',
buttonText: {
day: I18n.t('day_button'),
week: I18n.t('week_button'),
month: I18n.t('month_button'),
today: I18n.t('today')
},
lang: I18n.locale,
monthNames: I18n.t('date.month_names'),
monthNamesShort: I18n.t('date.abbr_month_names'),
dayNames: I18n.t('date.day_names'),
dayNamesShort: I18n.t('date.abbr_day_names'),
...
// rest of the code..
The I18n.t('day_button') will contain the day text for selected language.
Likewise I'd like to set something like I18n.t('am') and I18n.t('pm') to show the localized AM PM text on the axis.
Thanks
I needed to override moments i18n meridiem function.
moment.lang(I18n.locale, {
meridiem : function (hours, minutes, isLower) {
return hours < 12 ? I18n.t('date.am') : I18n.t('date.pm');
}
});
// I18n.locale is the current user's local
// and specified calendar locale to
// lang: I18n.locale
// date.pm, date.pm are placed in rails yaml files and will be loaded for selected language
Thanks
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 }
}
},
Is there any way to set multiple business hours, or grey out certain time ranges in FullCalendar's agenda view? I'm searching the google for hours, but I didn't find any working answer.
Here's what I've tried:
businessHours:
[
{
start: '08:00',
end: '17:00',
dow: [ 1,2,3,4,5 ]
},
{
start: '10:00',
end: '16:00',
dow: [ 6 ]
}]
This is not working. The fullcalendar recognizes this array as a true value, and sets the default value of businesHours.
This works:
businessHours:
{
start: '08:00',
end: '17:00',
dow: [ 1,2,3,4,5 ]
}
But I want to be able to customize every day's opening hours. Is there any way to solve this? If I could add somehow a css class to certain time ranges that would do it, but I don't know how to grab these time ranges. Render doesn't work, because of agenda view.
I figured out a solution. It is not the best way, to solve this problem, but it is easy to understand and implement, until we don't get a more customizable businessHours() function in an upcoming update.
The code:
events: [
{
start: '00:00:00+02:00',
end: '08:00:00+02:00',
color: 'gray',
rendering: 'background',
dow: [1,2,3,4,5]
},
{
start: '16:00:00+02:00',
end: '24:00:00+02:00',
color: 'gray',
rendering: 'background',
dow: [1,2,3,4,5]
},
{
start: '00:00:00+02:00',
end: '8:00:00+02:00',
color: 'gray',
rendering: 'background',
dow: [6]
},
{
start: '12:00:00+02:00',
end: '24:00:00+02:00',
color: 'gray',
rendering: 'background',
dow: [6]
}
]
This will put background events in the Calendar, which are not clickable, and looks like businessHours()'s gray out, and will change the background color of every slot in agendaWeek and agendaDay from 00:00 to 08:00, 16:00 to 24:00 (from Mondays to Fridays - dow:[1,2,3,4,5]), and from 00:00 to 08:00, 12:00 to 24:00 (On Saturdays - dow:[6]).
You can add each business hour as an event. FullCalendar works with the same structure to populate businessHours option:
{
...
events: [
// business hours 1
{
className: 'fc-nonbusiness',
start: '09:00',
end: '17:00',
dow: [1, 2, 3, 4], // monday - thursday
rendering: 'inverse-background'
},
// business hours 2
{
className: 'fc-nonbusiness',
start: '10:00',
end: '15:00',
dow: [6], // saturday
rendering: 'inverse-background'
}],
...
}
Note: The important options in this events are className:'fc-nonbusiness and rendering:'inverse-background'.
Good Luck.
I've implemented fullcalendar api to show all business/working days of the company.
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
allDaySlot:false,
events: evtObj, //evtObj contains list of working days in JSON
editable: false,
height: 630
});
For example : From 1st June 2015 to 31st Oct 2015. Now I've a business holiday list, say : 25th June, 31st August......
Now how can I remove these dates from being shown. As event object contains only start date and end date as parameters
{
title: event name,
start: start time,
end : end time
}
You can't do that in fullcalendar. However there is some kind of workaround.
You can add background events for those dates with the same CSS class as the business hours.
Let's assume you have these dates:
var start = new Date(2015, 5, 1), //1st of June 0:00
end = new Date(2015, 5, 2); //2nd of June 0:00
Now create 2 events for 1 particular day, 1 event for the allDay slot & 1 event for the rest of the day.
The events look like this:
{
start: moment(start),
end: moment(end),
rendering: 'background',
className: 'fc-nonbusiness'
},
{
start: moment(start),
allDay: true,
rendering: 'background',
className: 'fc-nonbusiness'
}