I have used FullCalendar inside my angular application. I have created a reusable component using the FullCalendar and use it like this,
<app-full-calendar
[building]="selectedBuilding"
[newEvent]="newEvent"
(clickedEvent)="clickedEvent($event)"
(clickedDate)="dateClicked($event)"
[updatedEvent]="updatedEvent"
[deleteEvent]="deletedId"
></app-full-calendar>
when ever necessary.
The issue is there are custom styling necessities such as changing the cursor of events. In order to achieve this, I have to add custom styles inside the component. But so far I was not able to find any solution.
Related
I have just started using ngx-formly and added some dynamic controls to a page. I was wondering if there is a way to add sorting and searching functionality on a table dynamically created using angular ngx-formly? Something like the screenshot.
Perhaps a setting to be put into templateOptions inside the FormlyFieldConfig ?- or adding a wrapper? Would appreciate some suggestions.
As part of a search function in my application, I need to apply a CSS style to a portion of the text present in the editor.
I found this page which seems to show how to do this by using Attributor. However, it demonstrates applying the style by pressing a button which is recognized by Quill and not the actual code to do it programmatically.
formatText seems to be a possibility but it requires defining the style in the function call while the style is in a loaded css file.
In a "regular" context, I would wrap the text in a span and set a class attribute on it.
What is the Quill way to achieve this?
This stackoverflow issue may help you: it allows you to define a new Parchment format to handle custom class through Quill attributes.
This Quill issue too: How to create your custom marker and a way/method to clean all markers
My guess to achieve what you are trying to do is to find the text inside your Quill document and then apply the formatText with your custom attribute to add the right class producing the right color. Clean then properly once search finished
I would like to add an "onclick" attribute in buttons widget generated by Victoire CMS, in order to track click events by GoogleAnalytics. How can I do it ?
Cheers
So I suppose you're talking about a Widget Button here.
It's not planned to allow users to add as many attribute as they want on this widget. However you have multiple solutions.
1 - Use a Render Widget (recommended)
Replace your Button Widget with a Render Widget and call a route from on of your application Controller. You can add as many parameters as you want : in your case it can be useful to change the Google Analytics event name depending on the button you create.
2 - Themes (quickest)
Each Widget view can be overridden by using a custom Theme. For example, here you can create the file app/Resources/VictoireWidgetButtonBundle/views/showGoogleAnalytics.html.twig.
Copy the code from the original view vendor/victoire/button-widget/Victoire/Widget/ButtonBundle/Resources/views/show.html.twig and change it as you want.
Then you just have to edit your Widget in Style mode and select the theme you just added. If your theme doesn't appear here, clear your cache or check that the path is corresponding to the path described above.
However, this method add a new available Theme for all your buttons and it can cause errors if your client try to apply this Theme in another Button. That's why we recommend the first solution.
3 - Use an HTML Widget (quick & dirty)
HTML Widget allow you to add your custom HTML code.
U can use this:
<button onclick="myFunction()">Click me</button>
myFunction() is a function in javascript which will be done when you click on a button.
Every attribute can be added by setAttribute("attribute", "value");
I have an Angular model ng-model="car" I am trying to create a dropdown list, and would like the list items to be populated from objects in the model. I am trying to do this all in the HTML (since it is Angular).
Any thoughts?
If you want a form input: http://angular-ui.github.com/#/directives-select2
If you want a dropmenu: http://angular-ui.github.com/bootstrap/#/dropdownToggle
Checkout the dropmenu source code too to get an idea of how to go about doing it if you rather code up your own solution.
Essentially AngularJS makes it so easy that the ONLY thing you really need to do is toggle the visibility of a DOM element and use some fancy css.
Checkout this example of using pure AngularJS + AngularUI (when necessary) alongside Bootstrap's CSS to create dropmenus (and other widgets) http://plnkr.co/edit/gist:4464334?p=preview
QQ: How can I update an object's property to match the innerHtml of an element in a view when a button is clicked?
I am working on building a content editing interface using EmberJS and the HTML5 contenteditable attribute (via the Hallo editor). This means that valueBinding doesn't do the trick, since we're dealing with the actual page HTML, not input/textarea value attributes. I've built a similar app in Backbone, which lacks dynamic bindings but allows you to set the model object as a property of the view.
What's the best way to get this working with EmberJS? Should I set a property on the view to the entire model? Do I need to create some sort of innerHtml binding and view helper, modeled on valueBinding?
I've set up a fiddle with an example of what I'm trying to do (with basic jQuery handling of the contentEditable attribute, instead of hallo):
http://jsfiddle.net/W6gsW/2/
Thanks!
http://jsfiddle.net/ud3323/nXCvq/
I did change a few things with how you defined the bindings in App.docView to make things cleaner. My solution does feel a litte hackish, but it works with 1 line of code per property.