I'm using FullCalendar:
http://arshaw.com/fullcalendar/
Is it possible to set the time zone? I'd like to allow my users to select the timezone they'd like to view the calendar. Right now, the event times ONLY change if I change the system time on my laptop computer. I'm using version 1.5.3 and saw this in the documentation:
<script type='text/javascript'>
$(document).ready(function() {
$('#calendar').fullCalendar({
events: {
url: 'http://www.google.com/your_feed_url/',
className: 'gcal-event', // an option!
currentTimezone: 'America/Chicago' // an option!
}
});
});
</script>
I've tried setting currentTimezone and the times don't change. I've also searched through the included javascript files and can't any references of 'currentTimezone'. How is this possible in versions 1.5+?
Try setting ignoreTimezone to false.
<script type='text/javascript'>
$(document).ready(function() {
$('#calendar').fullCalendar({
events: {
url: 'http://www.google.com/your_feed_url/',
className: 'gcal-event', // an option!
currentTimezone: 'America/Chicago' // an option!
},
ignoreTimezone: false
});
});
</script>
Let me know if this helps.
Related
Hello I would like to disable the woocommmerce register page button after one click to avoid multiple clicks.
I have searched the forums and found a bunch of solutions for custom forms and I've tried the following JS code but had no luck. I have a feeling I am setting the wrong selector because I cannot for the life of me figure out what the correct selector for the default register button is.
<script>
function disableButton() {
var btn = document.getElementById('woocommerce-register-nonce');
btn.disabled = true;
btn.innerText = 'Posting...'
}
</script>
I've also tried :
<script>
jQuery('woocommerce-Button.woocommerce-button.button.woocommerce-form-register__submit').live('click', function (e) {
var self = this;
$(this).attr("disabled", "disabled");
do_something();
setTimeout(function () {
$(self).removeAttr('disabled');
}, 10000);
});
</script>
Some guidance would be very much appreciated.
Update!
Based on Onboardmass's suggestion I have corrected the selector and got it partially working using jquery.
<script>
jQuery('.woocommerce-Button.woocommerce-button.button.woocommerce-form-register__submit').click(function(){
jQuery(this).attr("disabled", "disabled");
});
</script>
The button now gets disabled on click however the issue I'm facing now is that the form does not get submitted.
The issue you're facing is because the selector is incorrect. It should be .woocommerce-Button.woocommerce-button.button.woocommerce-form-register__submit.
For anyone else who may need this I was able to figure this one out by reading through the suggestions and other threads I found. Thank you Onboardmass & Martin for the guidance!
The time out function is required for the click to register.
<script>
$(document).ready(function () {
$(".woocommerce-Button.woocommerce-button.button.woocommerce-form-register__submit").click(function () {
setTimeout(function () { disableButton(); }, 0);
});
function disableButton() {
$(".woocommerce-Button.woocommerce-button.button.woocommerce-form-register__submit").prop('disabled', true);
}
});
</script>
I would like to fire a FB pixel AddToCart Event after a user clicked a Woocommerce button. I could use a plugin that works perfectly fine. But I would rather not use a plugin for such a "simple" task. The standard tracking code is implemented and working.
I then used the recommended FB code snippet from the helper tool, but it does not fire:
<script type="text/javascript">
document.getElementById('ToCartButton').addEventListener('click', function() {
fbq('track', 'AddToCart', {
value: 12,
currency: 'EUR',
content_type: 'Produkt',
});
}, false);
<button id="ToCartButton"...
Using onclick, on the other hand, works:
<script>
function myFunction() {
fbq('track', 'AddToCart', {
value: 12,
currency: 'EUR',
content_type: 'Produkt',
});
}
</script>
<button onclick="myFunction()"...
Any ideas? Thanks!
Instead of showing our events, FullCalendar creates elements starting at the current date/time. I've tried this with multiple google calendars (public, custom, etc) and always get the same result.
$('#calendar').fullCalendar({
eventSources: [{
url:'https://www.google.com/calendar/feeds/jcornelius.com_e9lk2eh1p3tdn3v775l0e0v48g%40group.calendar.google.com/public/basic',
dataType : 'jsonp'
}]
});
See this fiddle to reproduce the issue.
http://jsfiddle.net/jcornelius/pba56nf1/
Turns out the permissions issue was an error with the Google calendar. I contacted Google support and they reset the permissions. Now with Richard Hermanson's answer above everything works.
Updated your sources and at least the example data works. Yours on the other hand seem to be invalid data or something? I'll try to help if the problem persists.
http://jsfiddle.net/pba56nf1/2/
$(document).ready(function() {
$('#calendar').fullCalendar({
events: 'http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic',
//events: 'https://www.google.com/calendar/feeds/jcornelius.com_e9lk2eh1p3tdn3v775l0e0v48g%40group.calendar.google.com/public/basic',
eventClick: function(event) {
// opens events in a popup window
window.open(event.url, 'gcalevent', 'width=700,height=600');
return false;
},
loading: function(bool) {
$('#loading').toggle(bool);
}
});
});
I have created a jquery fullcalendar, pulling the feed from a google calendar and would like to open the event details in a colorbox. So far, I am completely lost as to how to achieve this and am looking for help. Everything that I have tried so far causes the calendar not to appear at all, so there is clearly a problem. Here is the latest code that I have tried:
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
events: {
url: 'my feed url'
}
eventAfterRender: function(event, element, view ) {
if(event.url) {
$('a',$(element)).colorbox({
type: 'ajax'
});
}
}
})
});
</script>
I don't think I completely understand what's going on with fullcalendar's event information; so if someone can provide a working code that I can mess with, I would appreciate it. Thanks very much in advance for any help!
Simply add the eventClick property when initializing the fullcalendar object and call colorbox within,
$('#calendar').fullCalendar({
editable: true,
eventClick: function(calEvent, jsEvent, view) {
$.colorbox({html:"<h1>"+calEvent.title+"</h1><br><p>"+calEvent.start+" TO "+calEvent.end+"</p>"});
},
events: [
{
title: 'All Day Event',
start: new Date(y, m, 1)
},
{
title: 'Long Event',
start: new Date(y, m, d-5),
end: new Date(y, m, d-2)
}
]
});
This is a very basic example. You can expand on it as per your requirements. Hope it helps.
I'm trying to include a FullCalendar into a website, synchronized with Google Agenda. I call the function like this:
$(document).ready( function() {
$('#calendar').fullCalendar({
events: { url: "http://www.google.com/calendar/feeds/laporte.julie%40gmail.com/public/basic" }
});
});
The calendar is shown well, but not the data into it. My config in Google Agenda is good. Could someone help me please ?
Do you include: ?
<script type='text/javascript' src='fullcalendar/gcal.js'></script>
You can reference here : http://arshaw.com/fullcalendar/docs/google_calendar/ for more info on the subject.