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.
Related
I am trying to add span element before the fc-center class of full calendar so I need to display the month in that span that I want to add, in the eventAfterAllRender i wrote this code
var titleHead = new Date( $('#calendar').fullCalendar('getDate') );
var month_int = titleHead.getMonth();
$(".fc-center").before('<label>' + month_int + '</label>')
and each time I press the prev button or the next button it renders the span again, so if I change the view five times, it renders 5 spans
There is a better way to get the same effect, using the built-in date formatting options:
views: {
month: { titleFormat: 'M - MMMM YYYY' },
week: { titleFormat: 'M - MMM D YYYY'},
day: { titleFormat: 'M - MMM D YYYY'}
},
This adds the month number to the start of the displayed date in each of the regular view types.
See http://jsfiddle.net/sbxpv25p/75/ for a working example.
You can remove the other code you wrote in eventAfterAllRender (as shown in the question).
Also see https://fullcalendar.io/docs/text/titleFormat/ and https://fullcalendar.io/docs/views/View-Specific-Options/ for more information on the syntax above. Also see http://momentjs.com/docs/#/displaying/ to understand what the formatting tokens do.
P.S. It's worth noting that your previous attempt had a number of issues, beyond what you mentioned in the question:
1) It renders multiple times, as mentioned, because you simply kept appending more labels without checking whether there was one already there. eventAfterAllRender runs whenever events are refreshed, which is done automatically when the view or date changes
2) fullCalendar's getDate method (see https://fullcalendar.io/docs/current_date/getDate/) returns a momentJS object, from which you can directly get the current month (http://momentjs.com/docs/#/get-set/month/), so there's absolutely no reason to then turn it into a JS Date object, this was just wasted effort.
3) It fetched the wrong month for display purposes - months in the JS Date objects are zero-based, so for example in December it would display 11 instead of 12. You'd have needed to add 1 to any value you retrieved.
4) It's badly aligned against the date and looks ridiculous. You can use .prepend() to insert it inside the .fc-center element, then it's at the same height.
If you still wanted to implement something like this, in case you want to add other content to the title bar which isn't the month, then you should move your code outside the calendar config, to just after you declare fullCalendar, so that it only executes once. Here is what you should put there - it's different to your code above because it fixes all the points 1-4 above:
var dt = $('#calendar').fullCalendar('getDate');
var month_int = dt.month() + 1;
$(".fc-center").prepend('<label>' + month_int + ' </label>');
See http://jsfiddle.net/sbxpv25p/77/ for a demo of this.
I'm using the fromNow function from moment.js library to display time elapsed from a specific date/time (e.g. '16 hours ago'). I use this within a table on multiple rows within my web app.
This part works fine, but I need the time to count continuously and for several rows (50 - 60 and growing). How do I get the time to count continuously and efficiently? I say efficiently because, I've read that using interval may be a bad idea so I'm not sure and I need help understanding.
This is how I create a cell which holds the elapsed time:
newCell = row.insertCell(++cellIndex);
newText = document.createTextNode(moment(data.checkintime).fromNow());
newCell.appendChild(newText);
Assuming the code you posted is correct, you can save the updated time in a variable and update all the rows. In that way, it's the same time that will display for all the rows and that time would just have to be done in one time:
var updatedTime = moment(data.checkintime).fromNow();
newCell = row.insertCell(++cellIndex);
newText = document.createTextNode(updatedTime);
newCell.appendChild(newText);
If you want the timestamp to continuously update, look into a library such as TimeAgo.
With your current code, simply change the text node to match timaeago's syntax <abbr title='{timestamp}' class='timeago'> and add the following javascript to the bottom of your page
jQuery(document).ready(function() {
jQuery("abbr.timeago").timeago();
});
This will continuously update the timestamp ("a moment ago", "2 minutes ago"....) which I believe is what you're looking for
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 been trying to get the code to work for more then 2 hours, then I tried this site, well there is alot of code here! I have used each of them. Some are in jQuery while some were pure JavaScript.
Here is two of the code that I have tried:
First code: This code was caught from this link: https://stackoverflow.com/a/2725097/1762944
var dateTimeStr = "17:10:03";
var user_time = DateTime.Parse( dateTimeStr );
var time_now = DateTime.Now;
if( time_now > user_time )
{
// your code...
}
Second code: This one is jQuery. It worked for the asker, and was marked as answer too. It works I have checked the fiddle provided by him! But when I tried the code, it didn't work either. Here:
function time_until() {
currentTime = Math.floor(jQuery.now() / 1000);
seconds = eventTime - currentTime;
if(second == 0){
//Stop voting
}
days = Math.floor(seconds / (60 * 60 * 24));
$('#time').html('seconds ' + seconds + '<br/>days ' + days);
}
I have tried to edit them both. But they don't work.
Reason why they work: The reason behind this all, is that what I want to do is,
I have a database table which is storing the time for users. I mean when they made an activity such like posting status updates!
I have created a timestamp. Which shows perfectly like this: few seconds ago.
Now what I want is, to update the time to 1 minute ago without reloading the page, like Facebook does. Or whatever the time is, to get updated to the next minute or hour or corresponding.
What I have tried is almost next to everything. But I guess the only issue with my codes is that when I place the DateTime.Now value from Database in it, it shows an error. The error is hidden so I have created an else statement like this:
if(seconds < 60) {
$("#jstime").html(seconds + "seconds..");
// else if minutes, if hours they are all written..and then an else
} else {
$("#jstime").html("Again an error, try again bud");
}
I have a setInterval which keeps on updating the id with the error text.
Here is the code that I am using.
<span id="timeval" title="#timeStamp">#TimeStamp</span></div>
<input type="hidden" id="time" value="9/23/2013 8:10:40 PM" />
<span>Real time: #TimeStamp</span><br>
<span id="update">Updated time: no update till now;</span><br>
<span id="jstime">Time</span>
The timeval is the real time that is being shown to the users, input is the time from where I get the value of the time on each post, the next span just shows the time to me, I mean I used this to check what was the time when the page was loaded, update is the span to show the updated time, jstime can also be used to show the updated time.
The problem is that you stored currentTime in the function you call every n seconds. As it gets looped it will everytime create a new current time.
Make it a global variable so you can loop through the function without creating the time new and use the old time instead.
Please go to link on stackoverflow and see my answer on how can we compare two dates along with the time in Javascript.
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.