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 Now() Indicator positioned wrongly

In Fullcalendar, when setting the parameters
mintime
and
maxtime
the Now() indicators is not positioned properly.
I have a JSFiddle to show the issue.
In this Fiddle I would expect the indicator at the current date and time, however it is positioned at the top of the column of "yesterday"
Below is the code used in the fiddle
HTML
<div id="calendar"></div>
Javascript
$('#calendar').fullCalendar({
defaultView: 'agendaWeek',
height: 600,
nowIndicator: 'true',
minTime: "20:00:00", // this makes the calendar start at 8PM
maxTime: "44:00:00", // this makes the calender end 24 hours later at 8PM ( (8PM => 20) + 24 = 44)
schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives'
})
Removing the
minTime
and
maxTime
parameters, makes the Now indicator position properly, as shown here
https://jsfiddle.net/8jndrp7m/2/
How can I position the Now indicator properly when using minTime and maxTime?
Or is this a bug?

i see multiple problems:
the now indicator doesn't need quotes, change 'true' to true,
If you want to extend the maxtime past midnight you can just put a 1. in front of the time, to set times the next day.So 8 in the morning on next day would be maxTime: '1.08:00:00'
If you start the calendar at 8 in the evening and its not 8pm yet (at least in my timezone) the now indicator will not show properly

The problem look like that you are set maxTime for next day which why it not working
If you like specify date to set max use validRange to set min & max date
$('#calendar').fullCalendar({
defaultView: 'agendaWeek', //agendaWeek
validRange: {
start: '2017-05-01',
end: '2017-06-01'
},
locale: 'nl',
timezone: 'local',
themeSystem: 'bootstrap3',
height: 600,
slotDuration: '00:10:00',
nowIndicator: 'true',
minTime: "17:00:00", // this makes the calendar start at 8PM
maxTime: "20:00:00", // this makes the calender end 24 hours later at 8PM ( (8PM => 20) + 24 = 44)
schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
editable: true, // enable draggable events
droppable: true, // this allows things to be dropped onto the calendar
})

Javascript flipclock countdown generates incorrect date format

I'm working on a website were I'd like to use a countdown to a special event. I've now installed the flipclock.js script and it's up and working. But, it generates incorrect date formats, like attached image:
As you can see, the days, minutes and seconds are working as expected, but the "hour" is showing 93. I've used the following code to implement the flipclock.js:
var date = new Date(2018, 11, 8, 12, 0, 0);
var now = new Date();
var diff = (date.getTime() - now.getTime()) / 1000;
console.log(date);
var clock;
clock = $('.clock').FlipClock({
clockFace: 'DailyCounter',
autoStart: false,
callbacks: {
stop: function() {
$('.message').html('The clock has stopped!')
}
}
});
clock.setTime(diff);
clock.setCountdown(true);
clock.start();
Does anyone know why it's doing like this? I haven't changed anything in the

Just in case someone is still looking for the solution... Here's the content of the link that NoLifeKing refers to in the comments section.
It looks like this issue occurs if you do the following:
clock = $('.clock').FlipClock({
'autoStart': false,
'clockFace': 'DailyCounter',
'countdown': true,
});
clock.setTime(diff);
clock.start();
as opposed to what is done below:
clock = $('.clock').FlipClock(diff, {
'autoStart': true,
'clockFace': 'DailyCounter',
'countdown': true,
});

Vis.js show only business hours in timeline

Not sure how to go about it but I'm using vis.js in my project and I need to display a timeline of the open hours of a business. Is there a way to show only the business hours and not the whole 24 hours as having evening hours is pointless for my application.
I cannot seem to find options in the documentation to make this setting in my code options.

The documentation you are looking for is the 'Hiding Periods' example: http://visjs.org/examples/timeline/other/hidingPeriods.html
To hide weekends you provide any weekend dates per:
To hide a weekend, pick any Saturday as start and the following Monday as end and set repeat to weekly.
To hide times outside of e.g. 9am to 5pm you provide a range of any arbitrary day with a start time of 5pm and a finish time of 9pm:
{
start: '2017-03-04 17:00:00',
end: '2017-03-05 09:00:00',
repeat: 'daily'
}
Here is a small example below:
var container = document.getElementById('timeline');
// sample timeline entry
var items = new vis.DataSet([{
id: 1,
content: 'foo',
start: '2017-06-13 10:00:00',
end: '2017-06-13 16:30:00'
}]);
// Configuration for the Timeline
var options = {
// hide weekends - use any weekend and repeat weekly
hiddenDates: [{
start: '2017-03-04 00:00:00',
end: '2017-03-06 00:00:00',
repeat: 'weekly'
},
// hide outside of 9am to 5pm - use any 2 days and repeat daily
{
start: '2017-03-04 17:00:00',
end: '2017-03-05 09:00:00',
repeat: 'daily'
}
],
// start and end of timeline
start: '2017-06-01',
end: '2017-06-30',
height: '140px',
editable: false
};
// Create a Timeline
var timeline = new vis.Timeline(container, items, options);
<link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.20.0/vis.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.20.0/vis.min.js"></script>
<h3>Mon-Fri 9am to 5pm working hours timeline example</h3>
<div id="timeline"></div>

Zebra datepicker weekly calendar disable running weeks

I have used zebra datepicker weekly calendar. My week starts from monday to sunday. I wanna enable the dates only when the week is complete. So only when sunday(24 Aug 2014) ends date 18(Monday) have to be enable. Below is my zebra weekly calendar code.
$(function () {
$(‘#weekdatepicker’).Zebra_DatePicker({
format: ‘m-d-Y’,
direction: -1,
first_day_of_week: 1,
disabled_dates: [''],
enabled_dates: ['* * * 1'],
show_other_months: true,
select_other_months: true,
onSelect: function (date) {
ngModelCtrl.$setViewValue(date);
scope.$apply();
}
});
});
Kindly tell me solution. Thanks in advance