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
Related
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 am facing an issue with fullcalendar, I am trying to change the color of complete column of specific dates. I have tried this, but it's changing on only day cell color, I want to change complete column color of that specific date
dayRender: function (date, cell) {
var today = moment('2018-12-28T00:00Z');
if (date.isSame(today, "day")) {
cell.css("background", "#EEEEEE");
//cell.addClass('fc-selectable-false');
}
}
By rendering property for event object to "background",
something like this,
$('#calendar').fullCalendar({
defaultDate: '2018-11-10',
defaultView: 'agendaWeek',
events: [
{
start: '2018-12-10T10:00:00',
end: '2018-12-10T16:00:00',
rendering: 'background'
}
]
});
for more information please see fullcalendar documentation: https://fullcalendar.io/docs/background-events
I put the fullCalendar plug-in on my site. It needs to display events from several google calendars. I did it by analogy from the documentation
(Multiple Google Calendars)
But events are displayed only on the week and month intervals, on the day interval, events are not displayed. They are displayed only if I remove the block (array) resources. But without it, the display of events inside the day becomes horizontal, but it needs to be vertical (shaded time zones of the event). When i manually fill events in events, everything works fine, but I need to take them from Google.
How do I get the events from google on the daily interval displayed in a vertical view?
$('#calendar').fullCalendar({
schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
scrollTime: '09:00:00',
minTime: '08:00:00',
googleCalendarApiKey: '<MY API KEY>',
defaultView: 'agendaDay',
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaDay,agendaWeek,month'
},
eventSources: [
{
id: 'k01',
resourceId: 'k01',
googleCalendarId: 'hhug0bdep49rjgq4kk79rrjbgg#group.calendar.google.com', // 1 calendar
color: 'blue',
},
{
id: 'k02',
resourceId: 'k02',
googleCalendarId: 'db1ls6vg0fh9sgqt57fkethens#group.calendar.google.com' //2 calendar
},
{
id: 'k03',
resourceId: 'k03',
googleCalendarId: 'ncvl95m9f8irl6nd3ejm99fvho#group.calendar.google.com' //3 calendar
}
],
resources: [
{ id: 'k01', title: 'calendar 1', eventColor: 'red'},
{ id: 'k02', title: 'calendar 2',},
{ id: 'k03', title: 'calendar 3'}
]
});
Your events coming from Google will not have resource IDs. If there is no resource ID, it is impossible for fullCalendar to know which column to display it in, so it cannot display it at all.
To stop the agendaDay view from displaying with resources, you need to set the option groupByDateAndResource to false:
groupByDateAndResource: false
Although the documentation says this is false by default, it appears you do have to explicitly set this option in your calendar config for it to work.
See http://jsfiddle.net/toytd26b/63/ for a working example (you can fill in your API key to see actual event data, but it shows the layout correctly).
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/
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 }
}
},