I'm writing an app that employs Fullcalendar. I need to have two view/edit modes:
one typical - Regular edit - with regular and background events, where regular events are editable through clicking and background ones are only drawn as informative areas
and another - Background edit - where regular events are hidden (return false), and the background events are rendered as regular ones, with editing capability through clicking.
Something along these lines:
eventRender: function(event, element) {
if($('#background-edit-chk').is(':checked')) {
if (event.rendering == EVENT_RENDERING.NORMAL) return false;
else event.editable = true; // here: render background as editable
}
}
What would be the code in the else line - obviously the above code does not render event as regular.
I mean, I could re-fetch the events and use separat transformation function for each mode, but I'm hoping that there's a way to just act on the rendering layer.
i have exactly 30minutes experience with fullcalendar,
but perhaps
event.rendering = ""
(making the rendering property empty should render the event as a normal event)
Related
Question
I'm working with Adobe Scene7 BasicZoomViewer and I'm looking for a way to tell the ZoomViewer to reset the zoom so that the user is no longer zoomed in on an image but instead will show the default "zoom" level.
What I've found
The closest thing I found to what I need is this reset property ZoomView.reset which "Resets the viewport when the frame (image) changes. If set to 0 it preserves the current viewport with the best possible fit while preserving the aspect ratio of the newly set image".
This looks close to something I need but it states that it will reset or preserve the aspect ratio when a new image has been inserted but I am not inserting new images.
Demo from Adobe
There is a button on the image that the API inserts into the page that resets the zoom level. Adobe provides a demo page that shows what I'm working with. If you look at the bottom left, the right-most button is the reset button. When clicked, it has to make some kind of API call and I need to figure out which one it is.
Edit
I've been able to find a minified version of the BasicZoomViewer and I am currently attempting to make sense of the code.
There is an event listener placed on the "Zoom Reset Button" that just simply calls a reset() method on line 274 in the uglified version of the file. Currently, I am trying to make sense of the file and figure out how to access this method.
c.zoomResetButton.addEventListener("click", function () {
c.zoomView.zoomReset()
});
I will be answering my own question. If someone finds a better way please feel free to answer as well.
tldr;
Create a variable to hold the instance of your s7viewers.BasicZoomViewer() and inside of that you can access the event handlers and much more.
Example of calling the reset zoom handler
// instantiate the s7viewers class and save it in a variable
var s7BasicZoomViewer = new s7viewers.BasicZoomViewer({
containerId: 's7viewer',
params: {
asset: assetUrl,
serverurl: serverUrl
})
// example of how to call the "zoomReset()" method
s7BasicZoomViewer.zoomResetButton.component.events.click[0].handler()
Explanation
After digging through the minified code that was uglified I found an event listener on the s7zoomresetbutton DOM class name, or perhaps it's watching for the ID of that DOM element which is the same ID as the container div for your S7 BasicZoom Viewer plus some added text to make this ID unique. For example, if the container div is s7viewer then the reset zoom button will have an ID of s7viewer_zoomresetbutton.
Now, going through the code I found this event listener which let me know there must be some way to call the zoomReset() method.
c.zoomResetButton.addEventListener("click", function () {
c.zoomView.zoomReset()
});
In the code above, the value of c is this or in other words it's the instance of your S7 BasicViewerZoom and in my case I have multiple depending on how many images I need to zoom on.
When instantiating the s7viewers class you can then reference that instance later and access the event handlers on each button and other properties and methods.
From there it was just looking through the object returned from the instance and calling the handler for the reset button.
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
Is there a feature in Xamarin Forms which will point to (scroll up) to a label which became visible after validation? What I am trying to do is: if required field is blank I display label under it - saying that it needs to be filled out, I have a scrollable page and when label becomes visible I want to make it show that label by scrolling the page to desired location, so user will know what is missing.
Thank you.
You have two distinct points to implement:
first, your entry validation: there are many ways to do it, but you can take a look at this fully documented sample from Xamarin: Entry validation sample
Then next, you have to scroll to the (first) invalid entry control. That means that all your entries must be embedded into a parent Scrollview control. Then you have to find the first invalid UI element to scroll to (make your own "business" method to find this control).
Then just call the Scrollview scroll method. An example sample code could be:
// in your xaml.cs
//
public Task FocusInvalidEntryAsync()
{
var firstInvalidEntry = FindInvalidEntries().FirstOrDefault();
if(firstInvalidEntry != null)
{
return parentScrollView.ScrollToAsync(firstInvalidEntry, ScrollToPosition.MakeVisible, true);
}
return Task.FromResult(true);
}
The FindInvalidEntries() method is your own method to determine wich UI entry is invalid (maybe it needs your ViewModel).
Then ScrolltoAsync() is a method that will scroll the parent scrollview to the desired control. The last parameter indicates if you want to display the scroll animation.
Tell me if it's clear !
Google Tag Manager (GTM) has a built in Click trigger that allows you to trigger GTM tags when the user clicks on stuff.
I believe it does this by adding a 'click' listener on document and then pushing a special 'gtm.click' event into the dataLayer when clicks are made.
In the 'gtm.click' object that is pushed into dataLayer GTM includes certain data pulled from the event.target property, including attributes of the target element such as id/class/href.
Issue is...
If you're using shadow-dom in your html the target/data will be wrong. This is due to the fact that when events bubble up through shadow-dom boundaries they "are re-targeted to look like they've come from the component rather than the internal elements within your shadow DOM".
This can be problematic if you're creating tags/triggers/variables in GTM based on the event target data and you're expecting that target to be the element which the user is actually clicking on (which seems normal).
Is there a solution for this that already exists?
Ideally GTM would fix this internally; until then, here is the solution I've come up with...
Create a document level click listener (just like GTM would) and fire custom click events but with data pulled from the original event target (rather than the re-targeted one).
So, listen for 'click' on the document and then get the original target using event.composedPath()[0] or one of the fallbacks for the browsers that don't support composedPath. I just cobbled this together looking at different documentation and trying things in different browsers, so not sure if it's perfect.
function getOriginalTarget(ev) {
if ('composedPath' in ev) return ev.composedPath()[0]; // Standard
else if ('path' in ev) return ev.path[0]; // Old Chrome
else if ('originalTarget' in ev) return ev.originalTarget; // Firefox
else if ('srcElement' in ev) return ev.srcElement; // Old IE & Safari
else return ev.target; // Fallback to normal target.
};
document.addEventListener('click', function (ev) {
var target = getOriginalTarget(ev);
dataLayer.push({
'event': 'MyClick', // some custom event
'targetId: target.id || '' // some custom data (from original target)
// etc...
});
}, false);
I initially thought about simulating the GTM built-in click event using 'event': 'gtm.click' but I've since concluded that it is probably not the best idea.. hacky, would cause duplicate events that need filtering, and would be confusing to someone who didn't know what was going on. Though I think one could use built-in GTM variables, like 'gtm.elementClasses': target.className || '', 'gtm.elementId': target.id || '', 'gtm.elementTarget': target.target || '', 'gtm.elementUrl': target.href || target.action || '', etc.
I am trying to capture the click event of a row using a column of "use" buttons. This is similar to the "selectable" feature in the Kendo grid, but having a button makes it more obvious for the user in our case.
Because there are multiple buttons (and I don't know if you can dynamically assign button id values), I tied a CSS class to the button, and I will use that to determine what row I am on when the user clicks the USE button.
Here is a dojo of what I am trying to accomplish, but for some reason, the click event (alert statement) is never executed.
http://dojo.telerik.com/UkIW/2
Can anyone spot the problem?
As far as I can see you're using jQuery and no Dojo code so far. But there are some mistakes here, first of all, you should put the event handler for hte buttons in the ready() handler as well, so move it inside:
$(document).ready(function() {
// ...
});
And then second, if you're binding to dynamic elements with jQuery, the preferred way of doing so is by adding it to a parent element (for example the <body>) and then adding a second parameter as shown below:
$(document).ready(function() {
// ...
$("body").on("click", ".use", function() {
// ...
});
});
I created a milestone in your example: http://dojo.telerik.com/UkIW/5