I am using Full Calendar to display some Google Calendars on a webpage. I've added qTip, to display the full event details (location, description, etc.), when the user hovers over an event on the calendar. I'd like the qTip to show the start/end time of the event, formatted as:
Day, Date Month, Start time - End time
with the times in the 24-hour clock.
If I add event.start and event.end to my qTip, then the start and end times appear, but not formatted correctly. I think I need to use the formatdate function, but I can't figure out how. Can anyone help, please? I've pasted my code as it stands below.
<script type='text/javascript'>
$(document).ready(function() {
$('#calendar').fullCalendar({
eventRender: function(event, element) {
element.qtip({
content: '<b>' + event.title + event.start +' - ' + event.end + '</b><br><br>LOCATION: ' + event.location + '<br><br> AVAILABILITY: ' + event.description
})
},
eventSources: {
url: 'my calendar URL'
}
});
});
</script>
The last versions of FullCalendar include Moment.js, you can format your time like this:
var start = moment(event.start).format("DD-MM-YYYY HH:mm");
More info:
http://momentjs.com/docs/#/parsing/string-format/
http://arshaw.com/fullcalendar/docs/utilities/Moment/
Related
I change event time label using this code:
eventRender: function (event, element,view) {
element.find('.fc-time').text(event.start.format('hh:mm a') + ' - ' + event.end.format('hh:mm a'));
},
It will diplayed like : 08:00 am - 09:00 am. It worked but only in month view. When I switch to agendaWeek view, It will display like : 8:0008:00 am - 09:00 am-. How do I make it works in both views? I try to hide the front time but it will hide all.
You can control the displayed time format for all views using timeFormat. To get the end time also displayed, you need to set displayEventEnd, as it defaults to false.
timeFormat: 'h:mm t',
displayEventEnd: true
I am using full calendar v3.0.1, I need to display event title in every day cell in calendar table.
Example:
start: 2017-01-01
end: 2017-01-10
Based on these dates, Expected output in calendar should be displaying event title in within start and end date range. meet5 title should show in each day cell within event range.
Current output:
Required Expected output
Any suggestions, How we can achieve this ?
Maybe you could try something like this:
$('#calendar').fullCalendar({
defaultView: 'month',
events: [{
title: 'Some quite long event description in a day cell',
start: '2017-01-05',
end: '2017-01-09',
rendering: 'background',
allDay: true
}],
eventAfterAllRender: function(view) {
$.each($('#calendar').fullCalendar('clientEvents'), function() {
var event = this;
var $start = $('#calendar').find('td.fc-day[data-date="' + event.start.format('YYYY-MM-DD') + '"]');
var $end = $('#calendar').find('td.fc-day[data-date="' + event.end.format('YYYY-MM-DD') + '"]');
if (event.rendering === 'background') {
for (var d = event.start; d <= event.end; d.add(1, 'day')) {
$('#calendar').find('td.fc-day[data-date="' + d.format('YYYY-MM-DD') + '"]').append('' + event.title + '');
}
}
});
}
});
Check this fiddle.
I noticed that you would like to have an event title below day number. Solution above is a bit different, but it should give you an idea how it could be done I hope.
I have a list of months to the left of my calendar. How can I use these month tabs to navigate through the calendar?
I am using something like this, where each anchor in #months-tab is a different month:
$('#months-tab a').click(function() {
$('#calendar').fullCalendar('next');
});
However, it doesn't matter which month I click it will go to the next month. If the calendar is on October and I click March it won't navigate to March, it will navigate to the next month, which is November.
I know why it doesn't work but I haven't figured out to get it to work they way I need it to. Any ideas?
Update I began doing something along the lines of this:
var date = new Date();
var currM = date.getMonth();
$j('.months-tab a').on('click', function(e){
e.preventDefault();
var newM = $j(this).attr('class');
$j('#calendar').fullCalendar('gotoDate', newM-1);
});
You should use gotoDate instead of next. This way you can display the calendar at the correct date.
The following javascript will work as long as you have the attribute data-month in each <a>.
Notice that months() is a zero based index, so January will have the index 0. If you have any doubts abour momentjs, please visit their documentation.
$('#months-tab a').click(function() {
var month = $(this).attr('data-month');
var m = moment([moment().year(), month, 1]);
$('#calendar').fullCalendar('gotoDate', m );
});
You can check this JsFiddle that provides a working example with the full code.
I have FullCalendar installed and working great, pulling in courses from my database.
You can view different courses based on clicking a button that submits the page again but passes different criteria.
The Issue is that on reloading of the page and the new content it skips back to the current date which is rather annoying when when you are looking at courses 3 months into the future!!
Does anybody know how to make the calendar go back to the page you where on after you have refreshed the page???
I have a feeling it might be something to do with getdate as I got the following code to work but can't seem to pass the result back through the URL and into the calendar setup.
$('#my-button').click(function() {
var d = $('#calendar').fullCalendar('getDate');
alert("The current date of the calendar is " + d);
});
If you use jquery.cookie you can store the currently viewed date in a cookie for the page being viewed and use that value to set the defaultDate when the page reloads. Pass these in as options when you initialise your calendar:
defaultView: Cookies.get('fullCalendarCurrentView') || 'month',
defaultDate: Cookies.get('fullCalendarCurrentDate') || null,
viewRender: function(view) {
Cookies.set('fullCalendarCurrentView', view.name, {path: ''});
Cookies.set('fullCalendarCurrentDate', view.intervalStart.format(), {path: ''});
}
This code also saves the current view (e.g. month, day etc...)
I used a combination of the two above. I set the localStorage value for the start date when creating, moving, or resizing an event as well as viewRender and then assigned that value to the defaultDate.
defaultDate: localStorage.getItem('Default_FullCalendar_Date'),
viewRender: function(view) {
localStorage.setItem('Default_FullCalendar_View', view.name);
...
},
select: function(start, due){
localStorage.setItem('Default_FullCalendar_View', start);
...
},
eventDrop: function(event, delta, revertFunc, jsEvent, ui, view){
localStorage.setItem('Default_FullCalendar_View', event._start._d);
...
},
eventResize: function(event, delta, revertFunc, jsEvent, ui, view){
localStorage.setItem('Default_FullCalendar_View', event._start._d);
...
}
Works like a charm.
You can use gotoDate method:
var d = $('#calendar').fullCalendar('getDate');
$('#calencar').fullCalendar( 'gotoDate', d.getFullYear(), d.getMonth(), d.getDate() )
Here is an updated answer for version 4 and 5 of fullcalendar.
since viewRender is no longer an option in these versions. I came up with a different approach using the loading option.
The loading option will give you a boolean argument stating whether the calendar is done loading or not. Inside that function I check if the calendar is done loading and if so, I set the calendar date to localStorage. Next I created an if else statement before the fullcalendar object to check if the localstorage item exists, and if so I set the defaultDate option in the calendar object to to localStorage date; if not, I just set it to today's date.
Example:
let viewDate;
const savedDate = localStorage.getItem("calDate");
if (savedDate !== null) {
viewDate = new Date(savedDate);
} else {
viewDate = today();
}
const calendarElement = document.getElementById('your_calendar');
const calendar = new FullCalendar.Calendar(calendarElement, {
defaultDate: viewDate,
loading: function(stillLoading) {
if (stillLoading === false) {
// When Calendar is done loading....
localStorage.setItem("calDate", calendar.getDate());
}
},
});
In Google's documentation it is said that an event can be tracked in the following way:
<a onclick="_gaq.push(['_trackEvent', 'category', 'action', 'opt_label', opt_value]);">click me</a>
or older version:
<a onclick="pageTracker._trackEvent('category', 'action', 'opt_label', opt_value);">click me</a>
I was looking with Firebug to the request that are made when a click on a link and I see there aborted request:
http://www.google-analytics.com/__utm.gif?utmwv=4.7.2&utmn=907737223&....
This happens because browser unload all javascript when user navigates to a new page. How in this case event tracking is performed?
Edit:
Since one picture can be worth a thousand words...
When I click a link firebug shows me this sequence of requests (here are shown first four, after follows requests to fill page content)
The problem is that there isn't enough time for the script to finish running before the user is taken to the next page. What you can do is create a wrapper function for your GA code and in the onclick, call the wrapper function and after the GA code is triggered in your wrapper function, set a time out and update location.href with the link's url. Example:
click me
<script type='text/javascript'>
function wrapper_function(that,category,action,opt_label,opt_value) {
_gaq.push(['_trackEvent', category, action, opt_label, opt_value]);
window.setTimeout("window.location.href='" + that.href + "'", 1000);
}
</script>
code will vary a bit based on your link but hopefully you get the idea - basically it waits a little bit before taking the user to the target url to give the script some time to execute.
Update:
This answer was posted several years ago and quite a lot has happened since then, yet I continue to get feedback (and upvotes) occasionally, so I thought I'd update this answer with new info. This answer is still doable but if you are using Universal Analytics then there is a hitCallback function available. The hitCallback function is also available to their traditional _gaq (ga.js) but it's not officially documented.
This problem is answered in Google's documentation:
use
<script type="text/javascript">
function recordOutboundLink(link, category, action) {
try {
var myTracker=_gat._getTrackerByName();
_gaq.push(['myTracker._trackEvent', ' + category + ', ' + action + ']);
setTimeout('document.location = "' + link.href + '"', 100)
}catch(err){}
}
</script>
or
<script type="text/javascript">
function recordOutboundLink(link, category, action) {
try {
var pageTracker=_gat._getTracker("UA-XXXXX-X");
pageTracker._trackEvent(category, action);
setTimeout('document.location = "' + link.href + '"', 100)
}catch(err){}
}
</script>
This more or less the same as the answer from Crayon Violet, but has a nicer method name and is the official solution recommended by Google.
As above, this is due to the page being unloaded prior to the Async call returning. If you want to implement a small delay to allow gaq to sync, I would suggest the following:
First add a link and add an extra class or data attribute:
My Link
Then add into your Javascript:
$("a[data-track-exit]").on('click', function(e) {
e.preventDefault();
var thatEl = $(this);
thatEl.unbind(e.type, arguments.callee);
_gaq.push( [ "_trackEvent", action, e.type, 'label', 1 ] );
setTimeout(function() {
thatEl.trigger(event);
}, 200);
});
I don't really condone this behavior (e.g. if you are going to another page on your site, try to capture the data on that page), but it is a decent stop-gap. This can be extrapolated not just for click events, but also form submits and anything else that would also cause a page unload. Hope this helps!
I had the same issue. Try this one, it works for me. Looks like that ga doesnt like numbers as a label value. So, convert it to string.
trackEvent: function(category, action, opt_label, opt_value){
if(typeof opt_label === 'undefined') opt_label = '';
if(typeof opt_value === 'undefined') opt_value = 1;
_gaq.push([
'_trackEvent',
String(category),
String(action),
String(opt_label),
opt_value
]);
}