I'm trying to use the Fullcalendar library to create a business hours timetable.
On the backend I could set an event with those params
start (time)
end (time)
day of week (for the day of the week defined)
when (specific day)
This way, I can set periodic events without specifying "when" or "day of week". That's great. The problem is that I want to be overridden in case of a special day, or special day of week is set.
Below you can find what I'm talking about: the id:1 is a periodic events, but must be override on day dow:6 with the id:2, since is defined as specific for that day of the week only. What I'm looking for is the dow:6 (id:2) shows only the event defined for itself, not the periodic ones. Same behaviour for the specific day, setted with "when" on the id:3
events : [
{"id":"1","playingfield_id":"1","dow":null,"when":null,"start":"10:00:00","end":"14:00:00", rendering:"background"},
{"id":"2","playingfield_id":"1","dow":"6","when":null,"start":"14:00:00","end":"15:00:00", rendering:"background"},
{"id":"3","playingfield_id":"1","dow":null,"when":"2015-05-05","start":"15:00:00","end":"16:00:00", rendering:"background"}
]
You can see the code working at in this JSFiddle.
Someone knows if this is possible? At the moment
Related
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
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
I'm working on a scheduling system for music venues. The basic idea is that there's an "Create new schedule" page, on which there is a DatePicker calendar (using AngularUI Bootstrap). The user selects a Date, then adds performers into timeslots. The built object looks something like this:
{
date: 2017-6-22 00:00:00.000-5:00
venue: VenueID
performances: [
{
performer: performerID,
time: 2017-06-22 22:00:23.231-5:00
},{
perfomer: performer2ID,
time: 2017-06-22 23:00:42.523-5:00
}
]
}
There's a couple of problems here. For the original date selection, I set the time (using myDate.setHours(0,0,0,0)) to midnight because the time doesn't really matter, I only care about the actual date. Likewise for the timeslots, their date doesn't matter (since they belong to the schedule for that day), so I only care about the time. Then in another project, we have a node/mongo app that saves these schedules, and returns them to a page in the angular project that lets you select a schedule for editing/etc. It selects which ones to return by grabbing all the schedules for a specific venue, and doing "if (schedule.date >= new Date().setHours(0,0,0,0)) { add schedule to return list }"
Anyway, on to the actual problem. The angular app does all of the date calculations client side. What I mean is, I'm in CST. If I select a Date on the calendar and save a schedule for that date, then someone in EST selects the same day on the calendar and saves a schedule, they have different dates in the database. For example, when I make the schedule, the date in the DB is "2017-06-22 00:00:00.000-5:00". When the EST friend makes a schedule on the same date, it gets saved as "2017-06-22 00:00:00.000-4:00".
In the "Select a schedule to view/edit" page, I do something like this:
<select ng-model="schedule" ng-options="s.date|date:'fullDate' for s in schedules" ng-show="schedules.length>=1"></select>
Of course this doesn't work because when my EST friend looks at the list, he sees the correct date. But when I look at one that he created, the date is one day off because "2017-06-22 00:00:00.000-4:00" converted to local timezone is "2017-06-21 23:00:00.000-5:00".
I guess TL;DR is I'm not sure how to handle it since the venue and anyone creating/editing the schedules may not share the same time zone. I want all of the dates/times to show up in the timezone of the venue (which I have the address for. I guess I could geolocate to find timezone?). I'm just not sure how to go about it.
The DatePicker gives you a date object. Instead of storing the entire value string just grab the day month and year Date(value).getYear() + '-' + Date(value).getMonth() + '-' + Date(value).getDate(). As for the times do the same as the dates. Store those values in the DB and then when you get them back you will have to convert them back to a date object so that the date picker can understand them.
Ultimately with this solution your just trying to store dates without the timezones. Make sure to state in your app that the times are for those areas.
You have to distinguish between the format the date/time is transported, saved vs. how the date will be shown to the user.
For transportation and saving use UTC in a format that is easy computable (eg. ISO8601).
For visualization to the user convert this value to the timezone and desired user format by using some helper library.
I realize dates can be very tricky in JavaScript, however I am encountering a somewhat strange issue.
Hopefully someone will be able to shed some light on it!
I am taking a date input from webshim datepicker and doing the following
var date = $scope.date;
console.log('date', date);
date.setTime(date.getTime() + date.getTimezoneOffset()*60*1000);
console.log('after set time', date);
Which will log something along the lines of
date "2025-06-19T00:00:00.000Z"
after set time "2025-06-19T12:00:00.000Z"
Notice the hours are different but it's still the same day (the 19th)
However, if I switch to another view and return to this input and log the input again (different date then the one above) I get something like
date "2025-10-22T12:00:00.000Z"
after set time "2025-10-23T00:00:00.000Z"
Again the hours have changed as expected but this time the day is one day off (the 23rd vs the 22nd)
If I change view once more and return again, the logged output will return to being the same day.
Basically this behavior is being switched every time I switch views. Is this very unusual or a typical problem? By views I am referring to Angular partials e.g.
<script>
View 1
</script>
<script>
View 2
</script>
Any thoughts or advice would be really great.
I'm trying to create a recurrence rule with the Google Calendar Api.
[JAVASCRIPT - Google Client Library]
var req = gapi.client.calendar.events.insert({
[...],
"recurrence": [
"RRULE:FREQ=WEEKLY;UNTIL="+date.toISOString()
],
[...]
});
req.execute();
The code above return 400 Bad request, because the recurrence rule is not correctly formatted.
I don't understand how to create a correct date format for the UNTIL field.
I've tried to use a date object and use the ISO conversion but it doesn't work either.
Anyway a single creation for the event works correctly and also a repeat with a COUNT field.
FILE ON GITHUB
There are several rules that apply to UNTIL. First of all, it is not an ISO string but of value DATE or DATE-TIME (https://www.rfc-editor.org/rfc/rfc5545#section-3.3.5). Then you need to pay attention that the DATE value is used if the recurring event start is all-day event and vice versa. At last you need to pay attention to Timezone. The UNTIL must be in the same timezone as your start. I really recommend reading about recurrence rules in the RFC https://www.rfc-editor.org/rfc/rfc5545#section-3.8.5.3