Hi again,
I was little bit overexcited with the solution to disable date ranges you provided me few post above. It works sort of but not as expected. it disables ranges in manner startdate + 1 -> enddate.
This is how I am fetching data from controller:
This is the result from the controller
And this is renderDayCell piece of code:
So all looks good but startdate disabled is always +1 day.
Here it should be Oct 28 - Oct 31 and Nov 01 - Nov 03 (Reds are disabled dates)
Here Dec 29 - Jan 02
But it is not the case.
Thanks
Jurica
P.S - Cannot post all in one post. I am getting error.
If you are fetching date ranges from a controller and want to disable those fetched date ranges in the DateRangePicker component, you can use the following approach:
|
async function fetchDateRanges() { try { const response = await fetch('https://localhost:7113/home/GetReserved'); if (!response.ok) { throw new Error(`Network response was not ok: ${response.statusText}`); } const reservations = await response.json(); return reservations.map((reservation) => ({ startDate: new Date(reservation.startDate), endDate: new Date(reservation.endDate), })); } catch (error) { console.error('There was a problem with the fetch operation:', error); return []; } }
var dateRanges;
var daterangepicker = new ej.calendars.DateRangePicker({ created: async function () { dateRanges = await fetchDateRanges(); }, renderDayCell: function (args) { var date = resetTime(args.date);
for (var i = 0; i < dateRanges.length; i++) { var startDate = resetTime(dateRanges[i].startDate); var endDate = resetTime(dateRanges[i].endDate);
if (date >= startDate && date <= endDate) { args.isDisabled = true; // Disable the date if it falls within any of the date ranges break; // Exit the loop once a match is found } } }, }); daterangepicker.appendTo('#daterangepicker');
function resetTime(date) { return new Date(date.getFullYear(), date.getMonth(), date.getDate()); } |
[Controller]
|
public class Reservation { public DateTime StartDate { get; set; } public DateTime EndDate { get; set; } }
// Create a list of Reservation objects List<Reservation> reservations = new List<Reservation>(); public async Task<List<Reservation>> GetReserved() { for (int i = 0; i < 100; i++) { Random random = new Random(); DateTime startDate = new DateTime(random.Next(2024, 2025), random.Next(1, 12), random.Next(10, 28)); DateTime endDate = startDate.AddDays(random.Next(1, 3)); reservations.Add(new Reservation { StartDate = startDate, EndDate = endDate }); } return reservations; } |
 |
Sample: Qeargi (forked) - StackBlitz
