I want the fullCalendar to redraw itself (all the structure and events) without reloading the page.
Scenario:
I am using a patch of fullCalendar that supports the Resource View. For a few user actions I want to change the resources. But I don't want to reload the page.
You could 'destroy' and 'render' the calendar as a whole. But that might be cumbersome - especially in older browsers.
$('#calendar').fullCalendar('destroy');
$('#calendar').fullCalendar('render');
If you don't actually need to render the table, but just rerender the events again, you could use the 'rerenderEvents' method:
$('#calendar').fullCalendar('rerenderEvents');
Hopefully this helps!
Use refetchResources: .fullCalendar( 'refetchResources' )
This will fetch and freshly re-render the resource data, per the FullCalendar documentation.
The problem:
"...The problem is that the calendar is initialized while the modal or div is not visible... " based on this link enter link description here
In my opinion, destroy is not needed in this case, only with render you can see the calendar.
My solution:
<script type="text/javascript">
$('#objectname').show(0,onObjectShow);
function onObjectShow(){$('#calendar').fullCalendar('render');}
</script>
You must to be sure that the object(container of calendar) is fully visible. For example, my first mistake was to put this code on "onClick" event, and click event is triggered before show the object container and has no effect.
Solution Based on this reference.
You can also redraw calendar on the fly using below command-
$(window).trigger("resize");
Related
I'm trying to create a trigger in GTM that would trigger a chat widget (ex: Zendesk) only after 60 seconds on the landing page but that would trigger on window loaded for all consecutive pages.
I've been able to create the first page of the trigger using the built-in timer trigger but I'm not sure how to implement the second part.
Chat widget is something that I would suggest doing through front-end. It's not generally expected to see something like this residing in a tag manager since it has no relation to analytics.
Make a customHTML tag, attach your trigger to it.
Find out how the chat widget is supposed to be envoked. There's likely a line of JS code to open it.
Test that JS code in your console first to make sure it actually makes the chat pop up.
Paste the JS code in your customHTML tag make sure it's within like so:
<script>
your code here
</script>
Test it out.
Yet another question about the angular calendar directive. I need to display multiple calendars on one page and am using the jquery tabs widget. However, only one calendar will render properly. In normal jquery fullCalendar, you use the 'render' method to ensure that the calendar shows when the tab is selected. However, this doesn't seem to be working with the angular-ui calendar directive.
Here is a plunker showing what I mean. Delete the $().tabs() and the three angular calendars display just fine. Wrap them in tabs, and it no longer works:
http://plnkr.co/edit/HEEX4iqb8kFAsjwdGmkM
Any ideas on why this is not working and how to fix it?
Thanks!
PS. I will cross-post this question in Google Groups. Thanks.
It appears that despite the fullCalendar documentation, "show" is not the place to trigger a fullcalendar('render'). I should say, at least not when working with Angular. I don't know if that is correct under normal jQuery usage. Use the "Activate" event instead:
$("#tabs").tabs({
activate: function(){
("#calendar").fullCalendar('render');
}
});
http://plnkr.co/edit/HEEX4iqb8kFAsjwdGmkM
Use timeout while rendering.
<tab heading="{{tabs[0].title}}" active="tabs[0].active" select="renderCalendar()" disabled="tabs[0].disabled">
$scope.renderCalendar = function() {
$timeout(function(){
$('.calendar').fullCalendar('render');
}, 0);
};
I am using FullCalendar to embed a Google Calendar into this webpage
Since the colours of the Google Calendar events aren't being brought into Full Calendar, I'd like to style each of the events locally with different background colours.
Easiest solution would be to add a class name to each event. I would like the event title to be generated into the class name.
I have tried to use ClassName, but can't get it working.
Hope to hear from someone with some advice.
The className has to come back in the JSON, so you will need a proxy PHP/ASHX that you will call, pass parameters to it, that it will call the Google Cal, transfomr it and return something like this..
[{"title":"News that will blow you away!","url":"news.aspx?i=1657","start":"2011-11-22T00:01:00","end":"2011-11-22T23:59:00","color":"rgb(232,157,0)","className":"data-newsevent clickable","newsEvent":"True","EventName":null,"description":null,"EventCompTypeMSP":null}]
Proxy-Req: your request to the proxy
Proxy-Res: response from your proxy to you
Notice color, you can use that to define the colour of the event directly.
Notice my classNames data-newsevent and click able, i used those with jQuery to do certain special click events- they don't actually contain any colour styles, but you can do it, you might have to use !important because fullCaldner applies a default colour.
I first load the page with empty feed, then request the feed using client side, it seems more dynamic, using cache it can be quick enough if they navigate allot.
I would like the event title to be generated into the class name.
So you may use the eventRender callback like this :
eventRender: function(event, element) {
/**
* #params
* event : fullcalendar event
* element : jQuery container
*/
// be aware of whitespaces !
element.addClass("fc-" + event.title.replace(/\s+/g, "_"));
}
It is possible to add multiple reCAPTCHAS in one form? I tried doing so, even giving the multiple reCAPTCHAS different IDs, but when I load the page in the browser, only one of them is shown.
Is this by design? I need the two reCAPTCHAS because one is for Login, and the other one is for the Register form, which will be shown on the same page.
Thanks!
WT
Only one Cpatcha is supported in a page at any time. What you can do is use AJAX and lod captcha after the form is loaded.
This might of some help.
After a quick google search, it appears that it's not currently possible. One suggestion I saw was to pop up a modal recaptcha just as the user submits the form. ondemandcaptcha for Ruby.
I was initially lead by this thread to believe there is no simple answer, but after digging through the Recaptcha ajax library I can tell you this isn't true! TLDR, working jsfiddle: http://jsfiddle.net/Vanit/Qu6kn/
It's possible to overwrite the Recaptcha callbacks to do whatever you want with the challenge. You don't even need a proxy div because with the overwrites the DOM code won't execute. Call Recaptcha.reload() whenever you want to trigger the callbacks again.
function doSomething(challenge){
$(':input[name=recaptcha_challenge_field]').val(challenge);
$('img.recaptcha').attr('src', '//www.google.com/recaptcha/api/image?c='+challenge);
}
//Called on Recaptcha.reload()
Recaptcha.finish_reload = function(challenge,b,c){
doSomething(challenge);
}
//Called on page load
Recaptcha.challenge_callback = function(){
doSomething(RecaptchaState.challenge)
}
Recaptcha.create("YOUR_PUBLIC_KEY");
It is now possible to do this easily with explicit recaptcha creation. See my answer here:
How do I show multiple recaptchas on a single page?
It's not too difficult to load each Recaptcha only when needed using the Recaptcha AJAX API, see my post here:
How do I show multiple recaptchas on a single page?
the captcha has an img element #recaptcha_challenge_image element , so after you set the recaptcha in one div say "regCaptch",get that img src attr
,set your other captcha div html to the old one html and then set the #recaptcha_challenge_image src to the src you get , here is a working example
var reCaptcha_src = $('#recaptcha_challenge_image').attr('src');
$('#texo').html($('#regCaptch').html());
$('#recaptcha_challenge_image').attr('src',reCaptcha_src);
I have rather a complex UI. However, for the purpose of this question, let's say that there is a HTML table that renders UILayout1 by default (say default mode). There is a button that a user can use to toggle between the default mode and a preview mode (UILayout2)
When in preview mode, there are some columns in the table that are invisible and there are reordering of rows. I am using JS (jquery) on load to check the mode and change it accordingly.
The table and the toggle button are in UpdatePanels.
Functionally, everything works as expected. However, when a user toggles between default and preview mode or vice versa, there is this short time interval in which the the table renders in default and then JS runs to make changes.
This results in degraded UI experience. Are there any creative ways to avoid this "flicker"?
you can use DIVs or don't use update panel in your UI generation use any concept else
The problem is likely to be that your code is running on load. I'm assuming that you're doing this using the standard jQuery method of running code on load, and not using the window's onload event. In any case, even using jQuerys $(document).ready(...) will be too slow if you have a lot of other javascript files to load, as the .ready event isn't fired on the document until all javascript includes have loaded.
You should be able to work around the issue by including your code that modifies the table just after the html for the table in your page and not running it on load i.e. make sure you don't wrap it in $(document).ready(...);
For this approach to work, you will need to have all javascript required by the code which is modifying the table included earlier in the page.
If you have other non-essential javascript files included, you should try to include them later in the page.
I'm not 100% sure how being inside an update panel will affect it - you will need to make sure that your code is being re-triggered when the updatepanel updates, but I believe this should all happen automatically.
Presumably your UI is controlled by CSS? You might be able to get rid of the flickering by adding something like this at the start of your JavaScript or in the <head> of your HTML:
if (previewMode) {
document.documentElement.className = 'preview';
}
Then if you modify your CSS rules that apply to your preview mode to reflect the HTML element having the class="preview" to something like:
.preview table .defaultMode {
display:none;
}
hopefully your table should render correctly first time and will not need to be re-drawn.