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.
Related
I am trying to build a graph based on BTC historical price data from coinbase.
Part of this requires that I make the data retrieved from coinbase usable for chart js.
I am having trouble with this aspect.
function getBitcoinHistory(){
$.ajax({
url: "https://api.coindesk.com/v1/bpi/historical/close.json",
success: function(historicalPrice){
console.log(JSON.parse(historicalPrice))
var dateArray = []
dateToday = year+"-"+month+"-"+day
dataStartDate = year+"-"+month-1+"-"+day-1
console.log("month is "+month+" day is "+day)
//set up month and day first
dataMonth=month-1
dataDay=day-1
console.log("data date starts at 0"+dataMonth+"-"+dataDay)
//loop through all of the dates from oldest to newest
for(var i = 0; i < 31; i++){
//formatting correctly
if(dataMonth<10 && dataDay<10){dateArray[i]=JSON.parse(historicalPrice).bpi["2019-0"+(dataMonth)+"-0"+(dataDay+i)]; console.log("2019-0"+(dataMonth)+"-0"+(dataDay+i))}
if(dataMonth<10 && dataDay>=10){dateArray[i]=JSON.parse(historicalPrice).bpi["2019-0"+(dataMonth)+"-"+(dataDay+i)]; console.log("2019-0"+(dataMonth)+"-"+(dataDay+i))}
if(dataMonth>=10 && dataDay<10){dateArray[i]=JSON.parse(historicalPrice).bpi["2019-"+(dataMonth)+"-0"+(dataDay+i)]; console.log("2019-"+(dataMonth)+"-0"+(dataDay+i))}
if(dataMonth>=10 && dataDay>=10){dateArray[i]=JSON.parse(historicalPrice).bpi["2019-"+(dataMonth)+"-"+(dataDay+i)]; console.log("2019-"+(dataMonth)+"-"+(dataDay+i))}
//if the date does not exist then it must be the next month
if(dateArray[i]==undefined){
dataMonth=dataMonth+1
dataDay=1
if(month>12){
month=1
}
if(dataMonth<10 && dataDay<10){dateArray[i]=JSON.parse(historicalPrice).bpi["2019-0"+(dataMonth)+"-0"+(dataDay+i)]; console.log("2019-0"+(dataMonth)+"-0"+(dataDay+i))}
if(dataMonth<10 && dataDay>=10){dateArray[i]=JSON.parse(historicalPrice).bpi["2019-0"+(dataMonth)+"-"+(dataDay+i)]; console.log("2019-0"+(dataMonth)+"-"+(dataDay+i))}
if(dataMonth>=10 && dataDay<10){dateArray[i]=JSON.parse(historicalPrice).bpi["2019-"+(dataMonth)+"-0"+(dataDay+i)]; console.log("2019-"+(dataMonth)+"-0"+(dataDay+i))}
if(dataMonth>=10 && dataDay>=10){dateArray[i]=JSON.parse(historicalPrice).bpi["2019-"+(dataMonth)+"-"+(dataDay+i)]; console.log("2019-"+(dataMonth)+"-"+(dataDay+i))}
}
console.log("Data at "+i+" is: "+dateArray[i])
//console.log("2019-"+(month-1)+"-"+(day+i))
}
}
})
I am hoping to have the dates be stored in an array in the correct format, but instead everything gets very weird at the point when the month changes. It will skip a few days and then also start adding extra 0s to the front of numbers even when it shouldnt...
I am lost.
Thank you for you time.
As some have noted in the comments, there seems to be a bit of a readability issue, especially with all this date parsing / formatting. I would strongly consider looking into moment.js (or similar), where the primary date format you seem to desire is essentially iso8601 (so parsing too and from this format should be particularly painless!) :)
https://momentjs.com/docs/#/parsing/special-formats/
Nested ifs are generally undesired (if you can split the contents of an if into a separate function, then you should usually do so)
Your code is expecting everymonth has 31 days, you need to contrl that and im sure it will perform different at the moment it goes on for the next month :/
I am using fullcalendar jQuery plugin in our page for create meeting invitation.
Am using dow parameter for weekly meetings . But now i want to create monthly meetings (meeting occurs once on every month of same day). Eg : If I want to create meeting on first Monday of every month. Is there any function/option available for this in fullcalendar.
It turns out to be easier than I thought to patch in monthly events and i couldnt find this anywhere so i wanted to share it.
Create a column in the database called "repeat" then repeat equals 0 is normal, 1 equals weekly, 2 equals monthly.
Then on the event rendering loop through using jQuery:
var calendarData = [];
jQuery.each(jsonData, function(index, item){
if(item.repeat == 0){
//normal
}else if(item.repeat == 1){
//use dow property
}else if(item.repeat == 2){
jQuery.each([-12,-11,-10,-9,-8,-7,-6,-5,-4,-3,-2,-1,0,1,2,3,4,5,6,7,8,9,10,11,12], function(inde, ite){
//normal but change start property
calendarData.push({
id:item.id
,type:item.type
,title:item.title
,start:moment(item.datetime).add(ite,'M').format('Y-MM-DD H:mm')
});
});
}
});
Then pass calendarEvents as the events for the calendar. You can change the array of numbers to reduce or extend how long it repeats for.
(Apologies for the formatting I typed it on a tablet)
I have to calculate X working days before a date in javascript. I have an array of holidays, how can I do this?
I can make a while loop with my date and change it to the previous day and check if it's a business day then increment my variable but is it a good way to do this?
In normal languages you could easily solve this with a hashset. It has vary fast look up times, and random access.
However, Javascript isn't like all the other children. So it has it's own special way of doing this. The easiest way is just an object.
var holidays = {
1:true,
7:true,
18:true
}
I use days since newyear, but there isn't anything wrong with using a date or something else.
Then you can make a little helper function:
var checkDate = function(value){
return holidays [value] === true;
};
Then you just do checkDate(dayOfYear) and it will return true or false if it's a holiday. Then you can easily do
//This is more pseudocode than javascript, since I haven't done javascript in years
while checkDate(--dayOfYear === true)
previousBussinesDay = dayOfYear;
Or something similar to find the actual day.
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.
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.