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.
Related
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.
So after doing some reading (and not quite understanding a few things) I'm wanting to find out more about derived columns in APEX reports.
The page has a tabular form which shows the tasks they have selected and they can select the time in hours (1-12) and minutes (15min intervals). What they input displays on a report which summarises the time they've allocated to a task from Monday to Friday and also gives a total down the bottom.
A request has been made to be able to not only see the totals for the day down the bottom but also the weekly total for each task on right so I've inserted a derived column.
In the page attributes under Javascript - Function and Global Variable Declaration, I have the following simple function:
var htmldb_delete_message = '"DELETE_CONFIRM_MSG"';
function sum_values(mon, tues, wed, thurs, fri, sat) {
// pass page item names into the function
// $v will get the value from the item name
result = $v(mon) + $v(tues) + $v(wed) + $v(thurs) + $v(fri) + $v(sat);
return result;
}
and then in the derived column HTML attributes I have:
<script>
sum_values(#MONDAY#, #TUESDAY#, #WEDNESDAY#, #THURSDAY#, #FRIDAY#, #SATURDAY#)
</script>
This is not displaying anything and I'm not sure what I'm doing wrong.
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 a function that return an array of objects that is used as parameter for a bootstrap calendar. The problem is when i create event_data.start. If i use start_date.year() in the end the calendar will not work because of invalid date. If I put 2013 (or any integer), then it works.
I used a breakpoint at that line, start_date.year() always return 2013.
var start_date = moment(reminder.start_date);
var stop_date = moment(reminder.stop_date);
var reminder_time = moment(reminder.time, 'HH:MM:ss');
while (start_date.unix() < stop_date.unix()) {
start_date = moment(start_date.year()+ '-' + start_date.month().toString() +'-'+start_date.add('days', 1).date());
event_data.start = new Date(parseInt(start_date.year()), 9, 25 - 3, 16, 0);
events_array.push(event_data); //events_array then used for calendar
}
I am thinking the start_date object is used as some kind of reference and the actual value is not passed or something. Hope you can give me an idea.
You are doing entirely too much manual string manipulation in this code. If you're using moment.js, then you should work with the API instead of working against it. Try something like this:
while (start_date.isBefore(stop_date)) {
start_date.add('days', 1);
event_data.start = start_date.clone().toDate();
events_array.push(event_data);
}
I used .clone() because I'm uncertain how you will be using the date in your object. You may find that it is not necessary depending on what you are doing.
Then there's some weirdness in your code to deal with. First, you define reminder_time but don't use it for anything, so I'm not sure why it is there.
Then, you had this line:
event_data.start = new Date(parseInt(start_date.year()), 9, 25 - 3, 16, 0);
That would be only using the year part of the start_date and hard-coding the rest to October 22 16:00. I'm not sure why at all you would do that, so I omitted it from the above code. If that's actually what you wanted to do, then do it like this instead:
event.start = start_date.clone().month(9).date(22).startOf('day').hour(16).toDate();
Here you definitely need to use .clone() because otherwise the manipulation of value would interfere with your loop logic.
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.