Develop Reference

FullCalendar Resource View - Week View w/Previous 3 Days Shown

I have provided a TimelineResourceView below as a reference as an example current setup.
Example: If Week View Sun-Sat Then anytime navigating forward/backward, always show week view with previous 3 days from week range. Then anytime navigating forward/backward, always show week view with previous 3 days from week range.
FullCalendar Example Timeline ResourceWeekView
https://codepen.io/motogeek/pen/yLLpjLV
I tried many different things from docs such as "visiblerange" and forcing dates with no success.
https://fullcalendar.io/docs/visibleRange
[Sun Oct 27 – Sat Nov 2] but they want to see [Thurs Oct 24 – Sat Nov 2] to show the previous 3 days.
calendar.setOption('visibleRange', {
start: '2019-10-24',
end: '2019-11-02'
});

Persistence paid off. I achieved a custom view using VisibleRange and with Moment javascript library. I answer this myself knowing this could be helpful for others formulating a custom view. Mine was focused on the timelineResourceViewm but should be able to apply to the other day/week views etc.
See CodePen:
Working Example Week View with Previewing Last 3 days (10 Day View)
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'interaction', 'resourceTimeline' ],
timeZone: 'UTC',
header: {
left: 'today',
center: 'title',
right: 'resourceTimeline'
},
defaultView: 'resourceTimeline',
views: {
resourceTimeline: {
visibleRange: function (currentDate) {
// Generate a new date for manipulating in the next step
var startDate = new Date(moment(currentDate).startOf('week').format("YYYY-MM-DD"));
var endDate = new Date(moment(currentDate).startOf('week').format("YYYY-MM-DD"));
// Adjust the start & end dates, respectively
//10 Day WeekView PREV Thurs -> Sun-Sat
startDate.setDate(startDate.getDate() - 3); //Set Past (show back Thur)
endDate.setDate(endDate.getDate() + 7); // Set Future (standard week from Sun)
return { start: startDate, end: endDate };
}
}
},
slotLabelFormat: [{ weekday: 'short', month: 'numeric', day: 'numeric', omitCommas: true }],
slotLabelInterval: { days: 1 },
editable: true,
resourceLabelText: 'Rooms',
resources: 'https://fullcalendar.io/demo-resources.json?with-nesting&with-colors',
events: 'https://fullcalendar.io/demo-events.json?single-day&for-resource-timeline'
});
calendar.render();
document.getElementById('prev').addEventListener('click', function() {
calendar.incrementDate({ days: -7 });
});
document.getElementById('next').addEventListener('click', function() {
calendar.incrementDate({ days: 7 });
});
});

For anyone else coming across this. v5 now supports this as visible range.
https://fullcalendar.io/docs/visibleRange

fullCalendar - Properties not being applied on first load

I have started looking at the fullCalendar package but am seeing some unusual behavior when I first load.
I have it setup as follows:
<div id='calendar'></div>
<script>
// Create FullCalendar Object
$j('#calendar').fullCalendar({
height: 650,
nowIndicator: true,
defaultView: 'agendaWeek',
columnHeaderFormat: 'ddd D MMM',
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
businessHours: businessHours,
selectable: true,
select: function (startDate, endDate) {
AddWorkHours(startDate, endDate);
}
});
</script>
However when I first launch the calendar it appears as follows:
Where some of the properties do not appear to have been fully implemented:
Height seems to be being ignored.
Now Indicator is visible, but is stuck at the first moment of the current day.
Business Hours only seem to show in all-day, none of the times are shown.
The rest of the properties seem to have been picked up.
The strange thing then however is that if I navigate to the previous week (or any other place in fullCalender, it then renders correctly as follows:
Has anyone else experienced this behavior or have any suggestions on where to start looking. I am trying to implement this on quite a large system but am pretty sure I have all my JQuery loading before the fullCalendar.js file.

do you have moment.js loaded before fullcalendar.js?
and check the versions are compatible.
the code snippet you have is working fine, I need to take a look at the businessHours var and AddWorkHours function to confirm that everything is fine.
if you check the example below you will see highlighted area (Monday - Friday start at 10AM to 6PM) that's the business hours in the example.
jQuery(document).ready(function($){
var businessHours = {
// days of week. an array of zero-based day of week integers (0=Sunday)
dow: [ 1, 2, 3, 4, 5 ], // Monday - Friday
start: '10:00', // a start time (10am in this example)
end: '18:00', // an end time (6pm in this example)
};
$('#calendar').fullCalendar({
height: 666,
nowIndicator: true,
defaultView: 'agendaWeek',
columnHeaderFormat: 'ddd D MMM',
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
businessHours: businessHours,
selectable: true,
select: function (startDate, endDate) {
AddWorkHours(startDate, endDate);
}
});
function AddWorkHours(startDate, endDate){
alert('Selected Start Time is: ' + startDate);
alert('Selected End Time is: ' + endDate);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script>
<div id="calendar-container">
<div id="calendar"></div>
</div>

How to get the events of current week in fullcalendar?

I've implemented the fullCalendar in week view. I have added few events in it. Now I am trying to duplicate those events in other weeks, on click of some external button. Follow is the screenshot of currently implemented fullcalendar:
As you can see that there is a button of duplicate, on top-right corner of fullcalendar. On click of it I need to get all the event of the week that is being displayed in this week.
Following is how I have initialized the fullcalendar:
$('#calendar').fullCalendar({
header: {
left: options["is_staff"] == true ? 'today prev,next' : '',
center: '',
right: '',
},
firstDay: 0,
editable: true,
selectable: true,
defaultView: 'agendaWeek',
weekNumbers: true,
eventOverlap: false,
events: events_data
})
Following is my script for button click:
$("#dup-week-schedule").click(function(){
var currentWeek = $.fullCalendar.formatDate($('#calendar').fullCalendar('getDate'), "W");
var currentWeekArray = [];
var currentWeekTitleArray = []; $.each($('#calendar').fullCalendar('clientEvents'), function(i,v){
if ((v['start'].isoWeek()) == currentWeek){
currentWeekArray.push(v);
currentWeekTitleArray.push(v['title']);
}
});
}
The issue is according the fullcalendar that is displayed in image, 22/04 should be included in current week. But it is being excluded from current week and the next sunday is being included in current week.

How can I change background color only for selected days in fullcalendar?

This is my code for fullcalendar. Here how can I change background-color only for feb 14.
dayRender: function (date, cell) {
var Xmas = new Date('2017-02-14');
var weekday = Xmas.getDate();
console.log(weekday);
if (weekday) {
cell.css("background-color", "red");
}
}
fiddle:http://jsfiddle.net/z8Jfx/617/

in base of your demo here is mine, the idea is to use getTime, to obtain the milliseconds time to compare with xmash day.
var $calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
defaultView: 'month',
dayRender: function (date, cell) {
console.log(date.getTime())
var Xmas = new Date('2017-02-14');
var weekday = Xmas.getTime();
console.log(weekday);
if (weekday===date.getTime()) {
cell.css("background-color", "red");
}
}
});

Here's the sample of your request but this is the CSS only.. i make a code for feb 14 only.
.fc-day[data-date^="2017-11-14"] {
background: blue !important;
}
maybe you can change the data date what do you want. but i created for you is not dynamic. i hope you appreciate it.
Or if you want a dynamic get all holidays or what date you want to highlight then use addClass.

Fullcalendar Moment: Getting current time plus 2 hours

This should be simple... using moment.js with Fullcalendar, I need to get the current time and add two hours to it.
In the select: method (or whatever you call it), I have:
select: function(start, end) {
The 'start' param contains the current time. End appears to contain the same thing. If I click to add an event, it details to current time to current time + 30 minutes. What I need to do is have the ending be current time + 2 hours. I've looked at the various docs and haven't found any references to doing something like that... so I'm blind (likely) or it's missing. Help please? :)

You can clone the start date and add 2 hours
http://jsfiddle.net/0fuhhh7v/1/
var end = start.clone().add(2,'hour');
For the select in fullCalendar
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaWeek,agendaDay'
},
defaultView: 'agendaWeek',
defaultDate: '2015-11-01',
selectable: true,
select: function (start, end) {
end = start.clone().add(2, 'hour');
alert('Time block is between ' + start.format() + ' and ' + end.format());
$('#calendar').fullCalendar('unselect');
},
editable: true
});