Develop Reference

Fullcalendar v5 first day in dayGridMonth not working

I want set current date visible first. But it isn't working.
Documentation https://fullcalendar.io/docs/view-object
var calendarAll = new FullCalendar.Calendar(calendarEl, {
headerToolbar: {
left: 'today',
center: 'prev,title,next',
right: 'month30,dayGridMonth,timeGridWeek'
},
initialView: 'month30',
views: {
month30: {
type: 'dayGridMonth',
buttonText: 'month30',
//activeStart: new Date(), //Not working
visibleRange: function(currentDate) {
var startDate = new Date(currentDate.valueOf());
var endDate = new Date(currentDate.valueOf());
startDate.setDate(startDate.getDate() - 1);
endDate.setDate(endDate.getDate() + 29);
return { start: startDate, end: endDate };
}
}
},
});
How can I fix it? Fullcalendar v5, without jquery.

The "month" view provided by fullCalendar does not have this flexibility - it always starts at the beginning of the month, like a traditional paper calendar.
IMHO it would be confusing to many users if it appeared differently.
Other types of view are more flexible - they will respond to the visibleRange setting if you do not specify the time range in the view name, such as if you specify timeGrid rather than timeGridWeek for example.

Change type: 'dayGridMonth' to type: 'dayGrid'

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

How to disable range of time in Kendo datetime picker javascript

How to rage of time in kendo datetime picker exapmle:
disable time range 03.01.2019 10:00am - 03.01.2019 10:30am
$("#datetimepicker").kendoDateTimePicker({
value: new Date(),
dateInput: true,
format: "MM/dd/yyyy HH:mm",
interval: 5,
timeFormat: "HH:mm",
min: new Date(yyyy, mm - 1, dd + 1, HH, MM, 0),
disableDates:[]
});

you might consider using DatePicker instead of DateTimePicker
$(document).ready(function() {
// create DatePicker from input HTML element
$("#datepicker").kendoDatePicker({
value: new Date(),
dateInput: true,
format: "MM/dd/yyyy"
});
});
Hope it helps!

How can I set min max selectable time for Kendo Datetimepicker?

I tried to use Kendo Datetimepicker's configuration to set min time starts at 09:00 AM.
like below:
$("#txtAppt_Date").kendoDateTimePicker({
format: 'ddd M/d/yyyy h:mm tt',
min: new Date(2017, 0, 1, 9, 0, 0)
});
But I am only allow to set 2017-01-01's time only. Not work for 2017-01-02 or any other dates.
I want to have range between 09:00 AM to 11:00 PM for this Kendo Datetimepicker.
Please help.
Thanks.
Update
This question is solved: I referenced Setting DateTimePicker to show specific time range e.g. working hours only

You can set min and max as follows:
<input id="datetimepicker" />
<script>
$("#datetimepicker").kendoDateTimePicker({
value: new Date(2011, 0, 1, 9, 0, 0),
min: new Date(2011, 0, 1, 9, 0, 0),
max: new Date(2011, 0, 1, 23, 0, 0)
});
</script>
Pay attention that you should provide a value within the range of min and max.
See the embedded links above for more information.
Thanks to #Erik, here's a demo fiddle.
UPDATE
If what you want is to restrict the time 9-23 across multiple days, then there's a good answer here that demos it here

accessing minimum and maximum values from date range slider

I am trying to use date range slider taking reference from here
everything went as per the documentation and I got the slider . now I need to access the minimum and maximum values from slider during movement. I tried to use min/max. bind as given in documentation. I couldn't acheive it.
my code is
<div id="slider"></div>
$("#slider").dateRangeSlider({
range: {
min: new Date(2012, 0, 1)
},
bounds: {
min: new Date(2012, 0, 1,00,00,00),
max: new Date(2014, 11, 31, 12, 59, 59)
},
defaultValues: {
min: new Date(2012, 0, 10,00,00,00),
max: new Date(2012, 11, 31,00,00,00)
},
});
how can I access the value as console.log() when the slider moves.

From the API link you posted:
Use the event valuesChanged when you want to intercept events once values are chosen. This event is only triggered once after a move.
$("#slider").bind("valuesChanged", function(e, data){
console.log("Values just changed. min: " + data.values.min + " max: " + data.values.max);
});