i am working on a calendar interaction module. the calendar shows days reserved. a reservation interval is 7 days. i have set up via javascript that hovering a day adds a class and auto-hovers 3 days before and 3 days after this day too to visualize the 7-day-interval setting that class there too. now i stuck with the following problem.
if i hover a day and one of the prev. 3 or next 3 is already part of a reservation i want to prepend the difference to the other end of the 7-day interval. an example:
- i hover day 12
- then the interval looks like xxx12xxx
- i move the cursor to 13
- the interval looks like xxx13xxx
- i开发者_JS百科f i now move the cursor to 14 then 15,16,17 would be marked too, but what if 16 is the starting point of a reservation? then it would look like xxx14x
- In either case i finally need to know the id of the left and right outer end as these are values i have to send via form. how to get these?
- how to make that the difference (16 and 17) is getting prepended on the left end so it would look like xxxxx14x?
the only way i see it to have a 7 cases switch with a huge code block. but somehow i feel there was an easier way.
can you guys probably show me?
many thanks in advance for reading!
regards
When you hover over a day, you obviuosly need to do some analysis of the surrounding days in order to accomplish your task. Here's how I would approach this (in pseudo code):
on day hover{
determine the base starting date.
start day = current day.value - 3
end day = start day + 7
There's several scenerios to deal with:
all seven days are available.
some days between the start day and the current day are reserved, but enough are availabel after the end day to allow for choosing 7 days
some days between the current day and the end day are reserved, but enough are available before the start day to allow for selecting 7 days
There some days are reserved between both the start day and current day as well as the curent day and end day (in which case, no selection can be made).
So, you need to determine which case you're dealing with and adjust the 7 day span accordingly.
set a boolean to handle checking logic.
hasSevenDayAvailablility = true
test the first instance.
iterate over each day and see if any are currently reserved.
for(start day to end day as day){
if(day is reserved){
hasSevenDayAvailability = false
}
}
At this point, you know whether or not you even need to modify the seven day window.
if(!hasSevenDayAvailability){
Check for no availability first (as this is the easiest to check) Since the only reservation options are in blocks of 7, we only have to check the start day and end day.
if(start day is reserved && end day is reserved){
a reservation window is unavailable, so do nothing.
} else {
if(the start day is reserved){
increment the start day until you reach the current day and test for 7 day availability window
for(start day to current day as day){
if(day is available && day + 7 is available){
start day = day
end day = start day + 7
hasSevenDayAvailability = true
break
}
}
} else {
decrement the end day until you reach the current day and test for 7 day availability window
for(end day to current day step -1 as day){
if(day is available && day - 7 is available){
start day = day - 7
end day = day
hasSevenDayAvailability = true
break
}
}
}
}
}
Finally, if there is a seven day availability window, use the calculated start and end days to set classes as needed.
if(hasSevenDayAvailability){
for(start day to end day as day){
day.addClass(highlighted)
}
}
}
精彩评论