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

jquery-simple-datetimepicker change time interval based on current time and date

I am using (jquery-simple-datetimepicker) for a small restaurant application. the restaurant timing is from 6 am to 12 am. My issue is the time interval starts from 00:00 to 23:30 in the dropdown but, it should show the time interval of 1 hour.
for example, if the current time is 10 am the interval should start from after 6 hours that is 4:00, 5:00 till 12:00 am. and if the time is 7: pm or after then it should show time for next day that is 6:00,7:00 till 12: am.
will I able to achieve in this plugin or do you prefer any other customizable plugins?
here is my code
$('#datetimepicker2').appendDtpicker({
todayButton: true,
step: 60,
closeOnSelected: true,
minuteInterval: 30,
onSelect: function() {},
onInit: function(handler) {
var picker = handler.getPicker();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.jqueryscript.net/demo/jQuery-Date-Time-Picke-Plugin-Simple-Datetimepicker/jquery.simple-dtpicker.js"></script>
<link type="text/css" href="https://www.jqueryscript.net/demo/jQuery-Date-Time-Picke-Plugin-Simple-Datetimepicker/jquery.simple-dtpicker.css" rel="stylesheet">
<input type="text" name="date9" id="datetimepicker2">
can anyone help me out, please?

Try minuteInterval 60?
$('#datetimepicker2').appendDtpicker({
todayButton: true,
step: 60,
closeOnSelected: true,
minuteInterval: 60,
minTime: "06:00",
maxTime: "23:59",
onSelect: function() {},
onInit: function(handler) {
var picker = handler.getPicker();
}
});

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
})

Jquery datepicker display all days of month for a year

I'm using jquery datepicker on a textbox to enter user birth date.For validation purposes I set max year to be "-16Y" of the current year, for min year I set year range to yearRange: '1920:c'. The problem is when I display it in the browser datepicker doesn't show all days of the max year (which is 1999). I think jquery set it to the maximum day of the current day (6th of August).So to work around this problem?
Here is my code for the datepicker:
$("#YearOFBirth").datepicker({
maxDate: "-16Y",
//showOn: "both",
// buttonImage: "",
dateFormat: "mm/dd/yy",
changeMonth: true,
changeYear: true,
yearRange: '1920:c'
}).keydown(function (e) {
if (e.keyCode == 8 || e.keyCode == 46) {
$(e.target).val("");
} else {
e.preventDefault();
return false;
}
});
As you can see here in this image all days after 6th is disabled which isn't correct for year 1999
Note: I made a search for this but I found nothing. I don't even know how to ask this question properly

Calculate the maxDate yourself:
var maxDate = new Date(new Date().getFullYear() - 16, 11, 31);
And then give the maxDate to your datePicker. Like this you have all days available of the year which was 16 years before now. As the last day of the year is ALWAYS YYYY-12-31, it's not bad practice to hardcode it.

jQuery datepicker displaying a Buddhist date

Is there any jQuery datepicker plugin to display as Buddhist date?
Currently I use the jQuery UI datepicker to display it, but it's not actually I want. Here is the code:
$(document).ready( function() {
$("#datepicker").datepicker( {
appendText: ' yyyy-mm-dd',
autoSize: true,
buttonImage: 'images/calendar.gif',
buttonImageOnly: true,
changeMonth: true,
changeYear: true,
dateFormat: 'yy-mm-dd',
showOtherMonths: true,
selectOtherMonths: true,
showOn: 'both',
onSelect: function(dateText, inst) {
year = dateText.substring(0, 4);
month = dateText.substring(5, 7);
day = dateText.substring(8);
_year = parseInt(year) + 543 + '';
$(this).val(_year + '-' + month + '-' + day);
},
beforeShow: function(input, inst) {
year = input.value.substring(0, 4);
month = input.value.substring(5, 7);
day = input.value.substring(8);
_year = parseInt(year) - 543 + '';
$(this).datepicker("setDate", new Date(_year, month - 1, day, 0, 0, 0, 0));
}
});
});
What I want is when #datepicker has no value, the calendar pop up is displaying the current date + 543 years. When #datepicker has a value, the calendar pop up is displaying the date in the #datepicker value.
The problem is when the selected year is a leap year, for example, 2008-02-29 AD is valid but we can't display 2551-02-29 (Buddhist date) (which is the same date) on that pop up.
Update 2010-07-30
According to Add support for Thai year format in datepicker module and Datepicker: Support non-Gregorian calendars it seems they plan to create support for non-Gregorian calendars.
Currently I try to use the plugin jQuery Calendars by Keith Wood.

You can find my modified version of jQuery DatePicker here:
http://www.anassirk.com/articles/1
The blog is in Thai so I'll briefly explain it below:
Download the plugin here:
http://www.anassirk.com/files/DatePicker.zip
The usage is quite similar to the standard jQuery DatePicker with one extra boolean option named "isBuddhist" which you can set it to true to render the Buddhist calendar.
$("#datepicker-th").datepicker({ dateFormat: 'dd/mm/yy', isBuddhist: true, defaultDate: toDay });
important: in Buddhist mode you have to set the "defaultDate" option to a date string of the format specified in the "dateFormat" option. Like '19/3/2554' for 'dd/mm/yy'
Cheers!

I've created plugins for jQuery UI datepicker to make it support the Buddhist Era format.
More details in jQuery UI datepicker extension for the Buddhist era