I want to add multiple FullCalendars (selectable) on same page for scheduling different kinds of events and save information in database but looking the demo/sample code it seems I can add only single calendar per page as it is rendered by the <div id='calendar'></div>. Can you plesae let me know if there is way to acheive this, so that when user schedules events on different calendars on same page then calendar source/id can be identified?
No, the fullcalendar is not rendered simply by <div id='calendar'></div>
It is rendered by the .fullCalendar call you will make on that div.
<div id="calendar"></div>
$("#calendar").fullCalendar({
// Options
}
Is how a FullCalendar is initialized. If you make another div and call it something else, it'll still work.
<div id="other-calendar"></div>
$("#other-calendar").fullCalendar({
// Options
}
Since each calendar is created separately, you can define your handlers for each calendar.
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.
I've got a list of menu items and each is an a tag. Inside those, I've got notification bubbles insides a div. When the notification div is clicked, I'd like to first follow the a tag (the hash is always to a Meteor route, using Iron Router) before it executes the click event attached to the div. Since reverse-propagation hasn't existed since the netscape days, I thought maybe that click event could store a function as a callback when the route changes? Has anyone tried to do something similar? Couldn't find anything in the Iron Router docs about it. I'm currently mitigating the problem with a few Session vars, but would like to clean it up.
Without seeing what your code is currently doing (or even better, a simplified example), I am guessing a bit at what you are trying to do. Maybe you have something like this:
<div id="bubblething">Click Me!</div>
With a click event:
'click #bubblething': function() {
// Do the bubble thing.
}
But the problem is you'd like to trigger the click event after you route but the click is happening to early. Would it be possible to change it to something more like this:
<div id="bubblething">Click Me!</div> //no <a> tag.
With the click event handling the actually routing first then moving on:
'click #bubblething': function(){
Router.go('/yourroute'); // First you route
{ ... } // Code to handle the notification bubble.
}
You may have to update your styling a bit do to the lack of am <a> tag but that should be pretty simple. The routing is handled by the click and then other things happen. You can parameterize this so that instead of calling an id you call a class and inject the route.
According to Create.js' integration guide, it should be possible to create editable collections of blocks.
Relationships between entities allow you to communicate structured
content to Create.js, which will turn them into Backbone collections.
For example, to annotate a list of blog posts:
<div about="http://example.net/blog/" rel="dcTerms:hasPart">
<div about="http://example.net/my-post">...</div>
<div about="http://example.net/second-post">...</div>
</div>
This dcTerms:hasPart doesn't seem to be present explicitly in Create.js; it's probably from a vocabulary. How can one show to Create.js that this content is a collection and make it show the "Add" button? In my case, I simply have sections which contain <h2>, <h3> and <article>s.
EDIT: Using rel="hasPart" in my <section>, the button appears. Problem is Create always uses the first element as a template. In this case, it uses my <h2> as template, which is not what I intended. So my question now would be how to trigger the "add" event in my section?
Hackish solution:
Using javascript, I created a new section or article in the DOM, then restarted Create calling $('body').midgardCreate({...}) again. Create will now recognize the new block. When I edit some fields in the block, the "Save" button is enabled and I can submit the new block.
I'm creating a new application using ASP.NET MVC.
I'd like to use a series of jQuery tabs at the top of my window to allow the user to access the various modules of the application.
I want to put the tabs in my shared layout view so that I don't replicate them throughout the app.
I'm running into two conflicting issues that I can't seem to find a coherent solution for:
When I click on a tab, I'd like the whole window to navigate to that page, rather than just loading the content into a div. I'm doing this to allow for bookmarking of a particular module. (I'd like the address bar to contain the URL of the current content, rather than just a "main page" URL.)
Currently when I call $("#tabs").tabs(); jQuery creates a div for each of my tabs and attempts to load the content of my href into the div. That ends up creating a copy of the page I'm on nested within itself.
Here are my tab definitions (from the default layout page):
<section class="tabs">
<div id="tabs">
<ul>
<li>Instructions</li>
<li>Questions</li>
<li>Finish</li>
<li>FAQ</li>
</ul>
</div>
</section>
And here's the script I'm using to set them up:
function SetupTabs(sel) {
$("#tabs").tabs();
$("#tabs").tabs("select", sel); // Selects the tab
$('#tabs').tabs({
select: function (event, ui) {
location.href = ui.tab.rel;
}
});
}
This actually gets my page navigating correctly, but nests the pages within themselves (issue #2 above). If I re-arrange it so that I have a main page, and load the content from the tabs using partial views, then I don't have a usable URL in the address bar (issue #1 above).
Any ideas would be greatly appreciated. I know this isn't the design paradigm for the jQuery tabs, but we're using them elsewhere in the app and we use a lot of jQuery UI-themed elements, so I'd like to stick with them for this element, too, if I can make it work.
Thanks
Since you want each tab click to act as navigation, you may want to consider not using the JQueryUI Tabs, instead use a <ul> styled to look like tabs with the click events set to navigate to the pages you'd like.
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");