I am currently working on a facility booking system. In the process of booking a facility, users can choose a time slot. When the user picks a date and facility to book, an ajax call is made to retrieve all available time slots. The data returned includes the time slots for weekdays and weekends (yes, they have different time slots).
Weekday and weekend and time slots are placed in a table. There is another function to check whether that the chosen date is a weekday or weekend. If it is the former, the weekend time slots will be hidden. If it is the latter, vice versa.
The opening time for weekdays: 08:00 - 21:00
The opening time for weekends: 08:30 - 17:30
To hide said time slots, the following code is used:
if (lastId != end_time_id) {
for (var i = lastId + 1; i <= end_time_id; i++) {
$('#trTimeslot' + i).hide();
}
}
If the code works perfectly, the time slots will be shown like this:
Chosen Date: 27 June 2017, Tuesday (Weekday)
Chosen Date: 1 July 2017, Saturday (Weekend)
However, at times, the code does NOT work. At times, the time slots shown will show BOTH weekdays and weekends:
Chosen Date: 27 June 2017, Tuesday (Weekday)
It must also be noted that 7 - 8 functions, filled with ajax requests, are called before the time slots are shown. The function to hide the "weekend" or "weekday" rows is the 5th function.
The question is, is there anything I can do to make sure the rows will be hidden before the time slots are shown to the user?
I do apologise that I cannot show more codes as the company is pretty sensitive on these kind of stuff.
Any help or suggestions would be greatly appreciated.
The code to hide is running before the code that populates the time table, add the loop to the callback after the data is inserted to the time table and displayed.
This may not be an absolute answer to the problem , I would rather suggest to do the opposite. From the problem description I assume there is an ajax call which return the data & following which the function triggers to hide the irrelevant rows. A minute delay will be there because of DOM traversal
Alternatively
Initially hide the view (weekends & timeslot).
Check for the condition and show only relevant data.
Till that time there can be a spinner in the screen to show work is in progress
Related
I am using the "ListView" view and have not set any options related to minTime or MaxTime. In the array I see the event as
start: 2021-06-21 00:00
end: 2021-06-24 08:00
In the render it ends on June 23rd writing in the first column 00:00 - 08:00 but it should end on June 24th.
If I try to activate the "AgendaWeek" view it draws the event correctly.
This happens with hours less than 09:00. If I put 9 o'clock up it considers me on the right day. Why?
In my opinion in the "ListWeek" view even a single second should end on the correct day, or at least looking at how long the minimum duration slot is set
This option works with v3:
nextDayThreshold: '00:00:00'
I am building a master rota using Daypilot. I only care about Monday -Sunday. I don't care about DATES, just DAYS. E.G a shift created on a Monday between 2-4 will be there every Monday between 2-4.
I am using the TimeRangeSelectedJavaScript to call the modal popup
Is there a way using this javascript to get the selected DAY.
E.G if they try and create a appointment on the weekly calender on a Monday, then "Monday" can be passed through?
TimeRangeSelectedHandling="JavaScript"
TimeRangeSelectedJavaScript="timeRangeSelected(start, end,$('#MainContent_DropDownList_Week').val(), $('#MainContent_DropDownListLocationMasterRota').val());"
You can get the day of week from the start/end variables:
var startDow = start.getDayOfWeek();
var endDow = end.getDayOfWeek();
Both start and end variables hold a DayPilot.Date object. See also DayPilot.Date.getDayOfWeek().
Your example modified:
TimeRangeSelectedHandling="JavaScript"
TimeRangeSelectedJavaScript="timeRangeSelected(start.getDayOfWeek(), end.getDayOfWeek(), $('#MainContent_DropDownList_Week').val(), $('#MainContent_DropDownListLocationMasterRota').val());"
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.
I'd like to add a counter to my website which counts in days. However I'd also like to add a button where this can be reset back to 0.
After searching I found the below code, and all is needed now is the button for it. I'm no Javascript expert so any help would be great.
I used this code to create the counter:
<script type="text/javascript">
//Set the two dates
var startdate=new Date(2013, 11, 16) //Month is 0-11 in JavaScript
today=new Date()
//Get 1 day in milliseconds
var one_day=1000*60*60*24
//Calculate difference btw the two dates, and convert to days
document.write(Math.ceil((today.getTime()-startdate.getTime())/(one_day))+
" days since your last drink!")
</script>
Is there a way I can include a button to reset the start date to the current date (for example if pressed today it would change from 16th of December 2013 to the 19th of December 2013)
Does anyone have any idea how I would do this? I'm fairly new to javascript so just learning the ropes.
Thanks
Gary
#Jonathan has given a good method of achieving this using cookies.This is what most of the sites use to save your preferences.
Another possible way is that you can make use of database to save the startDate for each user and update it accordingly when the reset button is set.The next time you fetch startDate it will be the updated date.You can save it where you are saving his profile information.
If you have small number of users you can also use xml file to store the startDate information and updating it accordingly.
I would go for database or cookies.
Hope it helps
I'd like to have a dropdown (select) menu which has dates (e.g. June 21) as options. When the user selects a date from the dropdown, hours of operation will be displayed (somewhere) for that particular day. Currently the hours of operation are displayed for the present day only; this is accomplished through JavaScript date objects.
I'm wondering if it would be possible to take a selected dropdown menu option, convert it somehow into a proper date format, and then run it through the current function I have now, which takes as its argument only the current month and day.
More importantly, if anyone has any ideas about a better way to do something like this, even a link to some relevant information, I'd greatly appreciate it. Right now, I don't really know of any examples I could try to emulate.
You could generate the data on the server so that the options display the date as '21 June' or whatever and have the opening hours as the value. Or the value can be "21june" or similar with a related object that uses the value as a key and hours as the value:
var openingHours = {
'21June' : '08:00am - 05:30pm',
'22June' : '08:00am - 09:00pm',
...
}
and so on. Then just use the value of the selected option to get the opening hours. There are many other ways to approach this, it depends on how variable the hours are and how many dates you want to cover.
Most businesses just publish weekly hours and special notices for public holidays.
Do the hours of operation vary from week to week? Why not change the drop-down to days of the week (Monday, Tuesday, etc), modify the JS function to take an integer indicating day of the week, and then just modify each <option> element so that it has an onclick event binding, calling the JS function with the appropriate integer day number?
Example:
<select>
<option onclick="showHoursOfOperation(0);">Sunday</option>
<option onclick="showHoursOfOperation(1);">Monday</option>
<option onclick="showHoursOfOperation(2);">Tuesday</option>
[ ... ]
</select>
EDIT:
Perhaps a more graceful solution, stolen from #ibu. (untested, might not work)
<select onchange="showHoursOfOperation(this.selectedIndex);">
<option>Sunday</option>
<option>Monday</option>
[ ... ]
</select>