How to disable previous month in Fullcalendar io? - javascript

How to disable the previous button when the previous month is less than the current month.
For example, this month is March, therefore navigation previous month button must be disable.
I have read the documentation but until now this issue has not been resolved.

What you need is the validRange option. This allows you to set limits on where the user can navigate to, and where events can be placed.
There's an example in that documentation of how you can prevent the user navigating before the current date - you need to make use of the version of the option which provides a callback function, into which fullCalendar will pass the current date. Simply specify the current date as the start of the valid range. If you don't specify an end date, then there will be no future limit on the dates the user can navigate to; it will only restrict dates in the past.
validRange: function(nowDate) {
return {
start: nowDate
};
},
Live demo: https://codepen.io/ADyson82/pen/yLPQYxr

Related

Returning to calendar in month view always goes back one month,

I'm having difficulty getting my users to return to the month they were working in after a change is made.
Currently, I have a function that initializes the calendar.
var iv = localStorage.getItem("fcDefaultView") || 'timeGridWeek';
var id = localStorage.getItem("fcDefaultDate") || new Date;
initialView: iv,
initialDate: id,
datesSet: function (dateInfo) {
localStorage.setItem("fcDefaultView", dateInfo.view.type);
localStorage.setItem("fcDefaultDate", dateInfo.startStr);
},
What is strange is that, when the user is in any view other than monthView, everything works fine. But when in monthView, when they return to the calendar, it displays the previous month.
The issue you've got with the month view is that the "start" date of any month view in fullCalendar is often a day or two before the start of the month. For example if you open fullCalendar month view for the current month (August 2021) you'll see that the first date displayed on the calendar is 27th July. So if you log dateInfo.startStr as you're adding it to the localStorage, you'll see that for August 2021 (again for example) it'll save 27th July 2021.
However if you then set that as the initial date next time you load the calendar, fullCalendar then sets the view to the month which the date occurs in.
To solve this, rather than using the date provided directly in the datesSet callback, you can get the "currentStart" value from the view object, which is the start of the interval the view is trying to represent, rather than the start of the visible time period. This distinction only really applies in month view, so it has no impact on the already-working behaviour other views.
Change the setItem call to this:
localStorage.setItem("fcDefaultDate", dateInfo.view.currentStart);
As this is a JS Date object which then gets serialised, rather than an ISO string, you need to explicitly parse it when reading it out again, so another small change is required:
var id = Date.parse(localStorage.getItem("fcDefaultDate")) || new Date();
Demo: https://codepen.io/ADyson82/pen/JjNrMBd
Documentation: https://fullcalendar.io/docs/view-object
It's because the month starts from 0, not 1. so January is "0" and February is "1".

Material-ui datepickers, how can one disable certain multiple dates

I need to disable multiple dates for the calendar, not just past or future dates, some dates that i provide to the calendar. For example i want to disable, let's say 29 of june, 27 of june and 4 of july.
I understand that you can pass it through shouldDisableDates, although im not so sure how to do this.
im getting dates in this format
const disabledDates = () => {
console.log(exludedDates)
return moment(exludedDates[0].pickup_date);
};
that's the code, it gets data from the screenshot
shouldDisableDates accepts a function in which date is passed.
You could create a function which accepts date as an argument and use that date as per your conditions and returns either true or false from the function. The returned value if true will disable date and vice-versa. I hope you understands and give it a try.

Time series in panda

How do I convert a date index into Time-based indexing?
so that i can later generate a month, weekday and a year
I tried this code
df['TRANS_DATE'] = pd.to_datetime(df['TRANS_DATE'], format='%m/%d/%Y %H:%M:%S')
but after I change it to Index the date revert back to show as object
What happens if you leave out the format option (letting it run to Default)? Also, it would be best if you show your original data.
Additional information -
https://pandas.pydata.org/pandas-docs/stable/reference/api/pandas.to_datetime.html

datepicker add a day to the end date

Appreciate any help. Have searched many pages on this forum about Javascript datepicker dates. They all include two textbox calendars and not a compound bootstrap one.
I have a compound calendar (one input and a popup comes up displaying two boxes for from and to date and an apply button). When I search, it works, as long as the date I am searching for doesn't end on the date I am searching, for example, searching for 06/12/2015-06/18/2015 will not include results from the 18th June (06/18/2015). This is also the case if I enter the same date for start and end dates.
SUMMARY: need a way to set "start" and "end" so that I can add a day to the "end" day:
$('#picup-range').on('apply.daterangepicker', function(start, end) {
submitFilter();
});
function submitFilter() {
$('#filter').submit();
}
Ended up having to change Java database query that provided the data.

jQuery Datepicker previous complete months

I'm using the Datepicker in two input fields to allow users to select a start and end date, respectively. I was curious if there's a setting for jQuery UI's datepicker to initialize the start date field to a period that is two complete months prior to the end date, which defaults to the current date. So when a user opens the page, the end date will be the current date and the start date will display the two complete months prior to the current date, e.g. end date is initialized to 4-3-2012, the start date would be 2-1-12.
I was going to write some custom formula to handle this, but wanted to be sure there wasn't already a setting for this built into the Datepicker.
$( ".selector" ).datepicker({"defaultDate": ((today.getMonth() +11)%12) + "/01/" + today.getFullYear()});​
In order to "subtract 2" from the month, we add 11 and take the remainder because JS months are 0 based and we don't want to end up at -1 month.
edit: algorithm edited as per clarification
JsFiddle

Categories

Resources