I have set up my fullcalendar to display a mixture of 1 day events (shown in one color) and week-long events(shown in diff color). I wanted to improve the visibility of events as it can get confusing with lots of overlapping events, so i set it up so that an event is highlighted with yellow border on mouseover.
This all works ok, except when i have an event that spans over a weekend - ie. starts on wednesday, ends on following wednesday - on mouseover the event is only highlighted for the current week - the portion of the event that falls after the weekend, is not highlighted,
any help would be greatly appreciated !
Ok,
I got this working.
fullcalendar.js generates a unique id for each event -> event._id (_fc1, _fc2...etc)
Each event is represented by an anchor tag (). An event that spans over a weekend is represented by 2 anchor tags. The unique id for each event is not outputted in the html by fullcalendar.js so it is impossible to see which anchors are associated with which events.
I made a small change to fullcalendar.js which adds the unique id of each event to the anchor being generated (as an additional css class name)
This means that all anchor tags associated with an event can be selected in the mouseover event using the JQuery class selector.
eventMouseover: function (event, jsEvent, view) {
$("." + event._id).each(function (index) {
$(this).css('border-color', 'yellow');
});
},
works for me !
There could be a better way, but I found a way that does not touch the source:
Add a unique css class for each event.
When rendering, even if the event stretches across weekends, the class is applied to all segments.
When user clicks an event:
$("." + calEvent.className).addClass('red');
Side note: When you drag an event, the other segments, belonging to the same event, are hidden, so fullCalendar is aware of the other segments, but I have not found a way to access them through the API.
Related
I'm wracking my head here. Slider works, that's not the issue. I've been ask to add event tracking to the arrow. So not on a slide change as the KPI is which arrow. So did the user click left or right.
This does't work:
$('.slick-arrow').on('click', function () {
var $this = $(this),
$ariaLabel = $this.attr('aria-label');
console.log('button');
});
The arrows are default, though I changed the css. Is there another way to track arrow clicks?
I think this will help you track your button.
In GTM, create a user-defined variable of "auto-event variable" type and value would be the "aria-label" attribute like so:
Then create a trigger for the arrow clicks, you already have the right idea for targetting the element using the CSS classes, but this can be done in GTM, like so:
Note, if you don't see the "Click XXXX" variables, you can enable them under the "built-in variables" section in the variables screen.
Next create the event tag, you'll go to the tags page and create a new tag of type Google Analytics, then pick "event" for track type and fill in the category, action and label as you wish. Note, here I'm using the variable we created in the first step as the label, but you can put it anywhere to identify what kind of arrow it was. Make sure to also pick the trigger we created earlier as the trigger for this tag as well.
After this is all done, put the container in debug mode and you should see the tag fire and register an event in GA.
A scenario has risen where I am trying to track button clicks. (There are several on the page as they are toggable filters).
Each button has a class relevant to it IE .filter .Dogs , .filter .Cats
When someone toggles a filter, the button's parent element gains the class "selected". I tried to track this, using the match css selector option of .selected>.filter
Unfortunately GTM doesnt seem to detect the "selected" class appearing, so I thought would it be possible to disregard the event click if the element was clicked twice and also limit the amount that the element could be clicked.
Thank you
I am having trouble tracking a click using Google Tag Manager.
I have set up a click event, and a click trigger. The click trigger's conditions are: Click Class- Equals - next-step`
Screenshots:
This is how I created the tag. This is the trigger
Currently the problem is that the trigger is not firing.
Your problem is occuring because there are two different elements that are able to be clicked: next-step and ng-binding.
If you click on the text itself, it will have the class ng-binding.
Whereas, if you click anywhere else on the button, it will have the class next-step.
Because your ng-binding is not a unique attribute to fire this event from, I would create a DataLayer variable (lets call it Parent Node Class) with the following selector:
gtm.element.parentNode.className
This will return the className of the parent node, reletive to the element clicked. This means that users clicking on ng-binding will have the Parent Node Class of 'next-step'.
Using this, you can have two triggers for your tag.
1) Click Classes equals next-step
2) Parent Node Class equals next-step
Because triggers work with an 'or' condition, this means that if either of these results are satisfied, then it will fire the tag.
Can't seem to find an answer to this - so thought I'd give this a shot.
I have read several answers on how to detect a click of a background event. Such as this: Detect click on background event
What I've found, however, is that when two ore more background events are on the same row, only the last day rendered as a background event will contain the proper CSS target to allow detection. All the previous days on that row (month view is what I'm working in) will act as regular "dayClick" events, even though they are actually rendered as background events.
For example, in this image, clicking on the 25th is detected, while clicking on that 22nd is not:
Looking at the source of the page, the first three days (the 22nd through the 24th) all appear in this image on the line marked "1". It's a TD with a colspan of 3. The line marked "2" is the line that has the TD containing the 25th:
Effectively anything before the 25th is cut off from being targeted using fc-bgevent.
It should be noted that a single background event that spans days works as expected. So if I was to simply extend the end date of the event that starts on the 22nd to the 25th, it will all work - except of course the "start" date that you receive in the click event will be the 22nd, no matter which day you click on.
Has anyone found a way around this?
What I want to do is render background events and also detect the date when they are clicked.
Thanks, in advance, for the help.
Use selectOverlap to detect click on background events
selectOverlap: function(event) {
// Here you will get all background events which are on same time.
console.log(event);
return event.rendering === 'background';
}
I want to make three changes to the fullcalendar Agenda view.
Remove start time from events, essentially I just want to display the title in each slot.
Change the height of timeslots, I have tried adjusting the contentHeight but that had no apparent effect.
Show 30min slots on Y-axis, I know about axisFormat option but it still only displays the full hours.
If anyone can give me any suggestions on how to accomplish these 3 changes?
Fullcalendar have rich callback set to configure:
You should use eventRender to modify it (hide title in already constructed is best way of it). Do not try construct new element and replace original
The same eventRender where you can add CSS or class and then change per event or direct from CSS
Agenda view does not have time slots at all, it is time-ordered list which does not represent proportion of time-lenght between events. If you wan't time based view, then try singe day view and set slotDuration as close as you want, even on the fly with buttons or keybind. + when setting slotDuration, if you wan't support adding events, change also snapDuration