I want to show only business hours in a daily agenda view from 8:30 to 17:00,
like below:
Are you asking how to hide hours outside of business hours? If so, use the minTime and maxTime options:
http://fullcalendar.io/docs/agenda/minTime/
http://fullcalendar.io/docs/agenda/maxTime/
for instance, for a 9am - 5pm calendar:
$(document).ready(function() {
$('#calendar').fullCalendar({
...
minTime: "09:00:00",
maxTime: "17:00:00",
...
});
});
Addition to minTime and maxTime setting as #scottysmalls mentioned, adding height: 'auto', will help to remove blank area at the bottom.
For FullCalendar v5, minTime and maxTime are both renamed. So, please use accordingly.
minTime is renamed to slotMinTime
maxTime is renamed to slotMaxTime
For further reference:
Upgrading from FullCalendar to V5
In version 5 the attributes have been renamed from:
minTime to slotMinTime
and
maxTime to slotMaxTime
Related
My Calendar has a specific view : it shows 31 days (display 4 days before the current day, and 27 days after)
Therefore, I have a dynamic visibleRange for my view
let INIT = moment().subtract(4, 'days').format('YYYY-MM-DD');
let INIT_END = moment(INIT).add(31,'days').format('YYYY-MM-DD');
[...]
type: 'resourceTimeline',
visibleRange: {
start: INIT,
end: moment(INIT).add(31,'days').format('YYYY-MM-DD')
},
buttonText: '31 jours'
}
and previous/next don't seem to work when visibleRange is defined for a custom view.
I tried something involving jQuery and it mostly works, except you have to click first twice on prev/next to change the visibleRange (and you also have to click twice when you go from next to previous or vice-versa).
And I wanted for this :
calendar.setOption('visibleRange', {
start: INIT,
end: INIT_END
})
to work, but in my implementation, it only works once and when it's triggered, clicking on buttons doesn't work anymore.
You can find the code on this CodePen
Can you help me ?
Okay so a colleague of a colleague led me to the solution, thanks a lot to him.
Instead of using visibleRange and trying to manipulate FullCalendar's data with jQuery (very gross), I calculate the difference between my two moments in order to have a duration :
const INIT = moment().subtract(4, 'days');
const INIT_END = moment(INIT).add(31,'days');
let duration = INIT_END.diff(INIT, 'days')
Then I use this duration in the settings of my customView :
resourceTimelineRollingMonth: {
type: 'resourceTimeline',
duration: { days: duration },
buttonText: '31 jours'
}
and for my view to start 4 days before the current day, in the Calendar object, I set :
[...]
defaultDate: INIT.format('YYYY-MM-DD'),
[...]
Which now works flawlessly.
I have this agenda view and I want to hide the hours line. What's the solution ? Thanks.
You can use basicWeek instead of agendaWeek view available views
check this: http://jsfiddle.net/e78b944d/1/
$('#calendar').fullCalendar({
defaultView: 'basicWeek' /* 'agendaWeek' */
});
I change event time label using this code:
eventRender: function (event, element,view) {
element.find('.fc-time').text(event.start.format('hh:mm a') + ' - ' + event.end.format('hh:mm a'));
},
It will diplayed like : 08:00 am - 09:00 am. It worked but only in month view. When I switch to agendaWeek view, It will display like : 8:0008:00 am - 09:00 am-. How do I make it works in both views? I try to hide the front time but it will hide all.
You can control the displayed time format for all views using timeFormat. To get the end time also displayed, you need to set displayEventEnd, as it defaults to false.
timeFormat: 'h:mm t',
displayEventEnd: true
I have a list of months to the left of my calendar. How can I use these month tabs to navigate through the calendar?
I am using something like this, where each anchor in #months-tab is a different month:
$('#months-tab a').click(function() {
$('#calendar').fullCalendar('next');
});
However, it doesn't matter which month I click it will go to the next month. If the calendar is on October and I click March it won't navigate to March, it will navigate to the next month, which is November.
I know why it doesn't work but I haven't figured out to get it to work they way I need it to. Any ideas?
Update I began doing something along the lines of this:
var date = new Date();
var currM = date.getMonth();
$j('.months-tab a').on('click', function(e){
e.preventDefault();
var newM = $j(this).attr('class');
$j('#calendar').fullCalendar('gotoDate', newM-1);
});
You should use gotoDate instead of next. This way you can display the calendar at the correct date.
The following javascript will work as long as you have the attribute data-month in each <a>.
Notice that months() is a zero based index, so January will have the index 0. If you have any doubts abour momentjs, please visit their documentation.
$('#months-tab a').click(function() {
var month = $(this).attr('data-month');
var m = moment([moment().year(), month, 1]);
$('#calendar').fullCalendar('gotoDate', m );
});
You can check this JsFiddle that provides a working example with the full code.
Edit to add: Sorry, found the answer here:
http://arshaw.com/fullcalendar/docs/text/timeFormat
timeFormat: {
month: 'H:mm',
'': 'H:mm-{H:mm}'
},
end of edit
I'm using fullcalendar, and I want to include the ending time in the "week" and "day" views. I found an answer by Nico on how to display the ending time:
timeFormat: 'HH:mm { - HH:mm}'
Nico wrote:
Blockquote the time between {} is the end time. If you don't specify the ending time between curly brackets it will just display the start time twice
How could I only show the end time in views other than the full month view? I would like the regular week view to have start and end time. (In month view, it just takes too much space.)
Sorry, found the answer here:
http://arshaw.com/fullcalendar/docs/text/timeFormat
timeFormat: {
month: 'H:mm',
'': 'H:mm-{H:mm}'
},
UPDATE
The above answer no longer works in the newest version of FullCalendar. The correct answer is the use the displayEventEnd option for the view. Like this:
views: {
week: {
displayEventEnd: true
}
}