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, "_"));
}
Related
I'm trying to tweak the WordPress plugin https://github.com/algolia/algoliasearch-wordpress to suit our needs. What we want to be able to do is have a search result that will load the data up in the same page.
I have my WordPress posts and its data being indexed successfully. I have added a search box to the page, and autocomplete is being fired.
Out of the box, the WordPress plugin template wraps the result in an anchor tag and assigns it the URL of the found result. When clicked, this navigates you to that post. However, what I want to do is intercept that click and load the result in the same page without navigating away.
I have removed the href from the anchor. I have also edited the supplied autocomplete.php template where the call to autocomplete:selected occurs. In there I have removed the call to navigate away by removing window.location.href.
Now I have two main issues.
1 - When the user clicks the search result I would like the input to be populate with the title of the item they clicked on. I added this in the autocomplete:selected callback by adding $searchInput[0].value = suggestion.post_title. Which seems to change the value of the input correctly, but as soon as I click away from the input, it is re-set back to the original typed value. So if I type 'may' and click the result 'mayonnaise', the result data can be accessed but the input returns back to 'may'. My function looks this:
/* Instantiate autocomplete.js */
var autocomplete = algoliaAutocomplete($searchInput[0], config, sources)
.on('autocomplete:selected', function (e, suggestion) {
console.log(suggestion);
autocomplete.autocomplete.close();
});
2 - It seems that the autocomplete dropdown does not hide when the user clicks away. To resolve this i've had to use what I think is a bit of a nasty hack with jQuery. I was wondering if this is really required? My code just below the autocomplete:selected call looks like this:
jQuery('body').on("click", function(event){
if (!jQuery(event.target).closest($searchInput[0]).length) {
autocomplete.autocomplete.close();
}
});
Found some answers to my questions.
1 - In order to populate the input with the title of the selected search result I added a call to the setVal method of the autocomplete object. I'[m still not sure why this is required.
/* Instantiate autocomplete.js */
var autocomplete = algoliaAutocomplete($searchInput[0], config, sources)
.on('autocomplete:selected', function (e, suggestion) {
autocomplete.autocomplete.setVal(suggestion.post_title);
});
2 - It looks like the config of the autocomplete object uses the value of WP_DEBUG in order to set the debug value. The options available for the autocomplete component can be found here https://github.com/algolia/autocomplete.js#options. This lead me to find that when debug is set to true, the autocomplete box does not hide on selection. This is to allow for easier debugging and styling of the component.
Is there a way to show certain events in my calendar as full background blocks of color? For example, if an event is an all-day event, it's date square will have a background color of red. All other events will look like normal events.
(Im using FullCalendar synched to a google calendar)
To make an event appear as a full block of colour within its slot the way you described, you can use the "background" events feature. Since you're using Google Calendar and don't have full control over the JSON data provided, you'll have to add the necessary property via the eventDataTransform callback, which allows modification of the event data after it's been downloaded but before it's rendered onto the calendar. Something like this I think (as an option in your calendar config):
eventDataTransform: function(event)
{
if (event.allDay == true) event.rendering = "background";
return event;
}
See https://fullcalendar.io/docs/eventDataTransform and https://fullcalendar.io/docs/background-events for details.
use rendering: 'background' in events
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.
I have event populating my full calendar and I'd like to add an icon to some of the events that meet a certain criteria. For example, my calendar events are representations of work orders that will be added to routes. So if a work order is in a route, I'd like the event that represents that work order to have an icon in the title that signifies that it is part of a route.
I could just change the event's color, but I'd like more than just color. Am I asking too much? Is this possible?
eventRender: function(event, element, calEvent) {
element.find(".fc-event-title").after($("<span class=\"fc-event-icons\"></span>").html("<img src=\"images/on1.jpg\" />"));
}
Sure you can. In eventRender you can look for and manipulate .fc-event-title (mind that some "short" events may not have this markup), or just add a class with an image background, or add a dingbat (bullet here), like:
.fcimg .fc-event-title:before {content: "\025cf\00020";}
You may also do a little modification in the plugin that is in DayEventRenderer.js file goto "daySegHTML" function and in that right after the condition if (!event.allDay && seg.isStart) (that is the start of the making of event div itslef) insert the following statement:
if (event.imgSource != '')
html += "<div><img src='" + event.imgSource + "' style='display:inline;width:2.0em;height:2.0em;margin-bottom:0.5em'></div>";
Note that event.imgSource is not the builtin event property but you have to provide it while providing the event data.
So if you dont provide event.imgSource nothing will get included and if you provide the image source it will automatically add it.
Hope this will resolve the issue :)
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");