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
});
Related
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'
}
})
Arshaw FullCalendar displays the current date in agendaDay view even if I set all headers off. I would like the entire th of that table to disappear. How do I do that in agendaDay view?
$('#calendar').fullCalendar({
defaultView: 'agendaDay',
header: {
left: 'false',
center: 'false',
right: 'false'
},
});
Fiddle
Set header itself to false:
$('#calendar').fullCalendar({
defaultView: 'agendaDay',
header: false
});
Since there is no option to remove the text and, even if you set all header options to an empty string, it still displays the day, you can use viewRender to hide the text.
So, after the calendar has been render, we will find the fc-day-header th and set html to an empty string. See a working JSFiddle. This code works for Fullcalendar 2.*.
$('#calendar').fullCalendar({
defaultView: 'agendaDay',
header: {
left: '',
center: '',
right: ''
},
viewRender: function(view, element) {
element.find('.fc-day-header').html('');
}
});
This will keep the th, but will have an height of 0. If you want to remove the entire thead, you could use element.find('.fc-day-header').parents('table:first').parents('thead').remove()
If you want to use Fullcalendar 1.6.3/1.6.4 the classnames are a bit different, and you should use
element.find(".fc-col0.fc-widget-header").html('');
Check the working fiddle using 1.6.4:
Before 1.6.3
You are using FullCalendar 1.5.3 in your fiddle. This is a really old release and I advice you to update it. I haven't looked for a solution because you didn't specify that requirement. However the one provided won't work, since eventRender was introduced in Fullcalendar 1.6.3.
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
}
],