Develop Reference

How to dynamically disable day in responsive calendar (w3 widgets)?

Situation: Some companies' weekends are Saturdays and Sundays or Fridays and Saturdays. So the calendar should be able to disable those day dynamically as following.
I have some basic idea of how to do it with javascript:
// determine weekends
if(dayType === 'fri' || dayType === 'sat') {
day.append($("<a class='disabled'>" + dayNum + "</a>").attr("data-day", dayNum).attr("data-month", monthNum).attr("data-year", yearNum));
}else {
day.append($("<a>" + dayNum + "</a>").attr("data-day", dayNum).attr("data-month", monthNum).attr("data-year", yearNum));
}
How to make it dynamic and based on companies' weekends after getting data from database using php?

if your javaScript does it, all you have to do is retrieve the information from the database and call a function that disable the days, the query to the database will depend on how it's designed, but you could create a table weekendDays and use the company name as search key (better an id), that way you could do a select days from weekenDays where name='Canonical'; days could be a string with comma separators... days = {"fri,sat"}, then you split the result and call disableDays sending the split text as parameter.
function disableDays(dayToDisable){
// determine weekends
for(idx=0; idx<dayToDisable.length; idx++){
if(dayType === dayToDisable[idx]) {
day.append($("<a class='disabled'>" + dayNum + "</a>").attr("data-day", dayNum).attr("data-month", monthNum).attr("data-year", yearNum));
}
else {
day.append($("<a>" + dayNum + "</a>").attr("data-day", dayNum).attr("data-month", monthNum).attr("data-year", yearNum));
}
}
}
You have to call the function with each result the query to the database returns (the weekends)
well something like that, please check the code I write it as an example and didn't test it, there could be better ways to do it :)

I figured something out: using CSS. Every 'div' for the days has got classes (wed past or sun future). So we have to just specify CSS for them. It's not related to OP but it's just for record.

How do I go about creating an event every hour and everyday?

I was wondering on to have an event every hour on every day in the AgendayDay view. I customized the timeslots to be an hour long. I will be filling the title/description with values from the database. I seen some questions answered for recurring events every monday for an example.
EDIT: I get the recurring event every monday as an example. I'm asking how do you create a different event for every HOUR without creating an event manually.
Something like this but for everyday. Of course, not every event will have the same value.

for(timeIncrement = 0; timeIncrement < 24; timeIncrement++){
$scope.events.push({
title: 'Rooms Available [' + 11 + ']',
start: new Date(yearClicked, monthClicked, dayClicked, timeIncrement)
});
}
Is what I came up with. This is inside a if statement when an available date has been clicked.

SharePoint/Javascript: comparing calendar date times in javascript

I am trying to find the best approach to comparing date/times using Javascript in order to prevent double booking on a SharePoint calendar. So I load an array with items that contain each event, including their start date/time and end date/time. I want to compare the start date/time and end date/time against the start/end date/times in the object, but I am not sure how to ensure that dates will not lapse.
like:
//date that is created from user controls
var startDate = new Date(startDat + 'T' + startHour + ':' + startMin + ':00');
var endDate = new Date(endDat+ 'T' + endHour+ ':' + endMin+ ':00');
for ( var i = 0; i < allEvents.length; i++ ) {
var thisEvent = allevents[i];
//having trouble with the compare
//i have tried silly ifs like
if (thisEvent.startDate >= startDate && thisEvent.endDate <= endDate) {
// this seems like I am going down the wrong path for sure
}
}
I then tried breaking apart the loaded object into seperate values (int) for each component of the date
var thisObj = { startMonth: returnMonth(startDate), startDay: returnDay(startDate), etc
but I am not sure this isn't just another silly approach and there is another that just makes more sense as I am just learning this.

I have a similar requirement in progress but chose to solve it at the booking stage, with jQuery/SPServices.
The code is still in build (ie not finished) but the method may help.
I attach an event handler to a column, then on selection, fetch all the dates booked in the same list to an array, then display that array on a rolling 12 month cal, as below.
I'm not checking to ensure a new booking doesn't overlap but a quick scan through the array on Pre-Save would provide a strict Go/No Go option for me. Relies on client side JS though, so not going to work in a datasheet or web services context.

Add certain number of days to the already selected date (the date that is in the datepicker textbox currently)

I have already looked on several questions on stackoveflow but no one seems to be answering my question.
In my application, users often need to go to +1 or -1 day from the current selected date. For this, I want to make this process more quick by adding two image buttons for +1 and -1 operation on the right side and the left side respectively.
I have tried this:
$('#date').datepicker('setDate', '-1');
But it always set the +1 date from the current date (that is today -1, not the -1 from the selected date).
How can I achieve this..??
Any help would be appreciable.
Tried Later:
function AddDays(arg) {
var d = $('#date').datepicker('getDate');
var d = new Date(d.getYear(), d.getMonth(), d.getDay() + arg);
$('#date').datepicker('setDate', d);
}
And Calling this function as AddDays(1) and AddDays(-1) on onclick event of image but It produces very strage result.
For Example if I set the current date to 25-03-13 that is in dd-mm-y format then clicking on -1 button is setting the date to 28-02-0-87. Clicking it on again will result in no change. And clicking it third time will result 01-02-0-87.
I can't get the point. What kind of behavior is this..??

Finally I have written my solution. Here is the code
function AddDays(arg) {
var d = $('#date').datepicker('getDate');
d.setDate(d.getDate() + arg);
$('#date').datepicker('setDate', d);
}
Where date is the id of my jquery-ui datepicker.
I am still looking for any inline code (single line) that I can put directly in onclick event of my next and previous buttons.

Javascript time helper? -Interesting problem!

I am new to the world of javascript and even trying google search has not really helped me find what I am looking for.
So I have come here in the hope you can point me in the right direction.
RULE= It must not be click! Can be done by tabbing!
I have many text fields which the user will input times that have been recorded.
E.g. Event 1 happened at 11:31am
Event 2 happened at 11:59am
I want to make this process as easy as possible for the user by having the textbox formatted in hours and seconds in 24hr format:
So the textbox value= 00:00 and when the user selects the text box they can enter the hours part. Then it will jump to the seconds part.
Any idea if there is something that can do that if so could you link me. If not could you give me an idea of what the coding will be like and if there are easier alternatives.
I have made some pseudo code to help you understand my implementation goal:
for count = 0 , while count is less than 20, count++
{
create a texbox with name time+count, set the value to ="00:00"
}
when the user enters numbers they go into the hour segment until that is completed
the script then jumps the cursor to the minutes segment
if time+count+1 is lesser thatn time+count message user that time error "An event cannot occur before the previous event"
Thankyou for hearing me out!

I don't really know of any time pickers that would suit your needs, but here's a basic idea of how one would be implemented:
You have two textboxes, or multiple pairs of textboxes
In each textbox, you put an event handler to handle "onkeyup" event
In onkeyup handler, check if lenght of text in box is 2
If length is 2 -> focus the next textbox
This way the user can simply keep on typing the numbers.
You may need to add some additional checks into the event listener, for example to make sure that if the user comes back to the field, they can edit it easily (eg. if they press shift-tab, it won't focus an incorrect field)
If you wanted to be really fancy, you could have a single textbox for times. Then, each time user presses a key, you'd check if it's a number. If user first types two numbers, it would then insert a : as the separator if the third key is a number, and so on.

This might be a beginning. Using jQuery this is not such a painful task.
http://jsfiddle.net/sArjQ/
for(var i = 0; i < 20; i++) {
var input = $("<input>", { name: 'time' + i, // create input element
val: '00:00' });
input.click(function() {
$(this).prop({ selectionStart: 0, // move caret to beginning on click
selectionEnd: 0 });
}).keydown(function() {
var sel = $(this).prop('selectionStart'),
val = $(this).val(),
newsel = sel === 2 ? 3 : sel; // so that it moves two positions for :
$(this).val(val.substring(0, newsel) // automatically set value
+ val.substring(newsel + 1))
.prop({ selectionStart: newsel, // move caret along
selectionEnd: newsel });
});
$('body').append(input);
}