I have tried various ways to implement it but all I could do is disable specifics days in the calendar. I want to disable future date and disable all previous dates from today.
To disable past dates you declare this function :
const tileDisabled = ({ activeStartDate, date, view }) => {
return date < new Date()
}
and then you pass it to you calandar like this :
<Calendar tileDisabled={tileDisabled} />
if you want to disbale all the dates (past and future) your function have to return true.
const [date, setDate] = useState("");
const disablePastDates = () => {
var today = new Date();
var yyyy = today.getFullYear();
var mm = today.getMonth() + 1;
var dd = today.getDate();
var disableDates = yyyy + "-" + mm + "-" + dd;
setDate(disableDates);
};
useEffect(() => {
disablePastDates();
}, []);
Related
I am using the syncfusion to do the Scheduler calendar in the react code to block specific time intervals or days. Below the code is worked to block specific time intervals or days following by Subject， Doctor，StartTime， EndTime，RecurrenceRule and IsBlock in the return value, But this method just can follow each Doctor to block the date or time.
May I know how to block all doctors following by Subject， Doctor(This one how can choose all the doctor together)，StartTime， EndTime，RecurrenceRule and IsBlock in my existing code? I set all doctor's values as dash -.
Below is my existing code to block specific time intervals or days following by Subject， Doctor，StartTime， EndTime，RecurrenceRule and IsBlock in the return value:
const getOrganizer = useCallback(() => {
getSchedulerOrganizerList().then((response) => {
var data = response.data;
setOrganizerList(
data.map((schedulerBlock) => {
var startDate = new Date(
formatDateStringAsDate2(schedulerBlock.startDate)
);
var endDate = new Date(
formatDateStringAsDate2(schedulerBlock.stopDate)
);
var count = null;
var repeatType = schedulerBlock.repeatType.toUpperCase();
if (repeatType === "DAILY") {
var Difference_In_Days = getDayDiff(startDate, endDate) + 1;
count = ";COUNT=" + Difference_In_Days;
} else if (repeatType === "WEEKLY") {
var Difference_In_Weeks = getWeekDiff(startDate, endDate) + 1;
count = ";COUNT=" + Difference_In_Weeks;
} else if (repeatType === "MONTHLY") {
var Difference_In_Months = getMonthDiff(startDate, endDate) + 1;
count = ";COUNT=" + Difference_In_Months;
} else if (repeatType === "YEARLY") {
var Difference_In_Years = getYearDiff(startDate, endDate) + 1;
count = ";COUNT=" + Difference_In_Years;
} else if (repeatType === "ONE TIME") {
repeatType = "ONE TIME";
}
var formatStopDate = moment(schedulerBlock.stopDate).format("YYYY-MM-DD");
var formatStopTime = moment(schedulerBlock.stopTime).format("HH:mm:ss");
var stopTimeValue = formatStopDate + "T" + formatStopTime;
var recurrenceRule = repeatType === "ONE TIME" ? null : "FREQ=" + repeatType + count;
var endTimeValue = repeatType === "ONE TIME" ? formatDateTimeStringAsDateTime(stopTimeValue) : formatDateTimeStringAsDateTime(schedulerBlock.stopTime);
return {
Id: schedulerBlock.id,
Subject: schedulerBlock.reason,
Doctor: schedulerBlock.doctor,
StartTime: formatDateTimeStringAsDateTime(schedulerBlock.startDate),
EndTime: endTimeValue,
RecurrenceRule: recurrenceRule,
IsBlock: true,
};
})
);
});
}, []);
Below is my sample return value for Dr X:
{
"Id": 19,
"Subject": "Test",
"Doctor": "Dr X",
"StartTime": "15 Aug 2022 09:00 PM",
"EndTime": "15 Aug 2022 11:00 PM",
"RecurrenceRule": "FREQ=WEEKLY;COUNT=8",
"IsBlock": true
}
Below are my current code results, in the calendar view I have 3 doctors which are Dr X, Dr Y, and Dr Z. I have blocked the Dr X at 9PM - 11 PM (August 15, 2022).
Now I am trying to do to block all doctors following by Subject， Doctor(This one how can choose all the doctor together)，StartTime， EndTime，RecurrenceRule and IsBlock in my existing code I set all doctor's values as dash -, below coding is what I am trying, I try to hardcode the value - to test, but it doesn't work.
const getOrganizer = useCallback(() => {
getSchedulerOrganizerList().then((response) => {
var data = response.data;
setOrganizerList(
data.map((schedulerBlock) => {
var startDate = new Date(
formatDateStringAsDate2(schedulerBlock.startDate)
);
var endDate = new Date(
formatDateStringAsDate2(schedulerBlock.stopDate)
);
var count = null;
var repeatType = schedulerBlock.repeatType.toUpperCase();
if (repeatType === "DAILY") {
var Difference_In_Days = getDayDiff(startDate, endDate) + 1;
count = ";COUNT=" + Difference_In_Days;
} else if (repeatType === "WEEKLY") {
var Difference_In_Weeks = getWeekDiff(startDate, endDate) + 1;
count = ";COUNT=" + Difference_In_Weeks;
} else if (repeatType === "MONTHLY") {
var Difference_In_Months = getMonthDiff(startDate, endDate) + 1;
count = ";COUNT=" + Difference_In_Months;
} else if (repeatType === "YEARLY") {
var Difference_In_Years = getYearDiff(startDate, endDate) + 1;
count = ";COUNT=" + Difference_In_Years;
} else if (repeatType === "ONE TIME") {
repeatType = "ONE TIME";
}
var formatStopDate = moment(schedulerBlock.stopDate).format("YYYY-MM-DD");
var formatStopTime = moment(schedulerBlock.stopTime).format("HH:mm:ss");
var stopTimeValue = formatStopDate + "T" + formatStopTime;
var recurrenceRule = repeatType === "ONE TIME" ? null : "FREQ=" + repeatType + count;
var endTimeValue = repeatType === "ONE TIME" ? formatDateTimeStringAsDateTime(stopTimeValue) : formatDateTimeStringAsDateTime(schedulerBlock.stopTime);
var schedulerBlockDoctor = schedulerBlock.doctor;
if (schedulerBlockDoctor === "-"){
var schedulerBlockDoctor = " ";
}
return {
Id: schedulerBlock.id,
Subject: schedulerBlock.reason,
Doctor: schedulerBlockDoctor,
StartTime: formatDateTimeStringAsDateTime(schedulerBlock.startDate),
EndTime: endTimeValue,
RecurrenceRule: recurrenceRule,
IsBlock: true,
};
})
);
});
}, []);
I want the expected result like below the picture if I choose all doctors to need to block at the same time and date (all doctors value is put dash - to declare),
Hope anyone can guide me on how to solve this problem, is possible to get a simple way to edit my existing code? Thanks.
I am using React DatePicker .I want to disable days in date picker. I am able to doing so by passing day number like below so Monday Tuesday and Saturday get's disabled.But how do I achieve this dynamically? I am able to form array like this
var notAvailableDays=[1,2,6] // which should disable these days. How do I return this at once?
const isWeekday = (date) => {
const day = date.getDay(date);
return day !== 1 && day !== 2 && day !== 6;
}
;
You can do an array lookup like this
const notAvailableDays = [1,2,6];
const isDisabled = (date) => {
const day = date.getDay(date);
return notAvailableDays.includes(day);
}
I'm working on a simple calendar on my website, and I'm trying to accomplish the following:
Today's date should be on a dark background color (css class: nyt)
Future days should appear on a lighter background color (css class: tuleva)
Past days should appear with 0.5 opacity (css class: menny)
This is the javascript code that I'm using:
$(function() {
var date = new Date(),
currentDate = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" +
date.getDate();
$(".kalenteripv").each(function() {
var specifiedDate = $(this).data('date');
if (specifiedDate == currentDate) {
$(this).addClass('nyt');} // this day
else if (currentDate > specifiedDate) {
$(this).addClass('menny');} // past days
else {$(this).addClass('tuleva');} // future days
});
});
Today (2017-12-2), for some reason the calendar is showing the dates 10-19 on 0.5 opacity, so the code is adding the "menny" or past dates' css class to those dates, which it obviously shouldn't do. I tried already to write the dates with two digits (e.g. 2017-12-02), but when I do that, the whole code stops working.
Here's an image to clarify the problem with dates 10-19
Any suggestions? It must be some kind of simple mistake that I'm making, but I really can't figure it out myself. I hope I explained the problem clear enough.
Here's the fiddle that shows the problem.
https://jsfiddle.net/vfy1bfnz/
Thank you in advance!
$(function pvmr() {
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1; //January is 0!
var yyyy = today.getFullYear();
if(dd<10) {
dd = '0'+dd
}
if(mm<10) {
mm = '0'+mm
}
today = yyyy + "-" + mm + "-" + dd;
$(".kalenteripv").each(function pvmr() {
var specifiedDate = $(this).data('date');
if (specifiedDate == today) {
$(this).addClass('nyt');
} else if (today < specifiedDate) {
$(this).addClass('tuleva');
} else if (today > specifiedDate) {
$(this).addClass('menny');
}
});
});
Solved it! I thought I should leave the answer here in case someone needs the code some day.
I want to use select "From" and "To" dates from datepicker and display all dates in between, in tabular form using angularjs.
Try this function to calculate no. of days. Hope it helps
function daysCalculator(date1, date2) {
var d1 = new Date(date1);
var d2 = new Date(date2);
var days = d1.getTime() - d2.getTime();
days = parseInt((((days / 1000) / 60) / 60) / 24)
return days;
}
Try using this.
function getDates(fromDate, toDate) {
var dateArray = [];
var nextDate = fromDate;
while (nextDate <= toDate) {
dateArray.push( nextDate );
nextDate.setDate(fromDate.getDate() + 1);
}
return dateArray;
}
I Want to filter event by date but date is pass by normal input type="text" not kendo default datepicker.And display passing date in kendo schduler header But cant not change view date.This is my code.........
$scope.searchEventByDate = function (item) {
var scheduler = $("#scheduler").data("kendoScheduler");
scheduler.view().startDate(item.StartDate);
scheduler.view().endDate(item.EndDate);
scheduler.view(("day"));
$scope.scheduler.dataSource.read();
};
This is my filter param
parameterMap: function (options, operation) {
var popupheight = $(window).height() - 180 + 'px';
$scope.popupWraperForTryout = popupheight;
var scheduler = $("#scheduler").data("kendoScheduler");
if (searchCount != 0) {
if (operation === "read") {
return {
filterByPersonalEvent: $scope._filterParamObj.filterBypersonal,
filterBySignUpRequired: $scope._filterParamObj.filterBySingupRequired,
filterByPaidOrFree: $scope._filterParamObj.filterByPaid,
filterByEventStatus: $scope._filterParamObj.eventStatusId,
filterByEventType: $scope._filterParamObj.eventTypeId,
selectedTeam: $scope._filterParamObj.seasonTeamId,
filterByStartDate: scheduler.view().startDate(),
filterByEndDate: scheduler.view().endDate(),
OrgId: _orgId,
UserTimezone: global.userTimezoneOffset
}
}
}
},
I am so tired.This code is not change in view date.Please help me
Several issues here - the day view shows just one day; you can't set startDate and endDate - just date.
$scope.searchEventByDate = function (item) {
var scheduler = $("#scheduler").data("kendoScheduler");
//scheduler.view().startDate(item.StartDate);
//scheduler.view().endDate(item.EndDate);
scheduler.view("day");
// item.StartDate should be Date object - like scheduler.date(new Date("2013/6/6"));
scheduler.date(item.StartDate);
$scope.scheduler.dataSource.read();
};
If you need to set some explicit date range to filter - you can do it, but still you can't show more than just one day in day view.
$scope.searchEventByDate = function (item) {
var scheduler = $("#scheduler").data("kendoScheduler");
scheduler._myFilterStartDate = item.StartDate;
scheduler._myFilterEndDate = item.EndDate;
scheduler.view("day");
scheduler.date(item.StartDate);
$scope.scheduler.dataSource.read();
};
And in parameter map:
...
return {
filterByStartDate: scheduler.view().startDate(),
filterByEndDate: scheduler.view().endDate(),
myFilterStartDate: scheduler._myFilterStartDate,
myFilterEndDate: scheduler._myFilterEndDate,
OrgId: _orgId,
UserTimezone: global.userTimezoneOffset
};
...