I'm trying to change the cursor in our calendar component to cursor: copy while it's being dragged around for duplication, so that there is some user feedback and a visual difference between moving an event and duplicating it.
Currently the cursor is in pointer style for hovering and dragging the ghost.
I already added a placeholder to make it more distinguishable and wanted to round it out with the cursor change.
For that the suggested manual edit from this fullCalendar github issue was adapted:
https://github.com/fullcalendar/fullcalendar/issues/5250#issuecomment-749146976
because the fullCalendar 'selectMirror' flag didn't seem to change anything.
https://fullcalendar.io/docs/selectMirror
I'm using fullCalendar version 5.10.1 and angular 12.2.9.
The calendar is part of an angular project and resides in a wrapper component with some additional stuff around.
So far I tried these things:
add conditional styling to the calendar component via ngClass (works for the calendar itself, not events)
Trying the same thing on the wrapper (the fullCalendar event styling just overwrites everything)
try adding the css class via eventClassNames, 'globally' in the calendar options, more specific in the views option and even more specific on each created event (in v4 this would have probably been done via eventRender)
More to that here: https://fullcalendar.io/docs/classname-input
manipulate styling directly on the HTML element
looked into custom css pseudo-classes and decided it's too convoluted (as distinguishing between moving drag&drop and duplicate drag&drop is difficult in css)
I want to refrain from editing fullCalendar styles as this would easily break on a new npm install or version bump and also don't want to use the deprecated ::ng-deep.
FullCalendar itself offers some customization utilities like color or display style, but none for precise customization
https://fullcalendar.io/docs/event-display
Any further suggestions?
Related
I'm working in Angular project and I use fullcalendar component.
My issue is that I want to remove the table that contains the time in the view week.
I tried to use CSS but it doesn't hide the border table:
It looks like the dayGridWeek (or dayGridDay) view would be suitable for your purposes. This creates a vertical list of events but without a time grid. No need to customise the CSS or anything like that.
See https://fullcalendar.io/docs/daygrid-view-demo for a demo, and https://fullcalendar.io/docs/daygrid-view for documentation.
Our team is working in ServiceNow and trying to make some aesthetic changes to the ootb Form widget. We've cloned that widget and are trying to give the Form Sections a different background and some larger/bolder font. Since the Form layout is buried in some template code in the system, the only way for us to change the look and feel is to manipulate the DOM in our cloned widget. We've read that the best way to do this is to use the Link Function tab, but we are unsure how to begin. After inspecting our console, it looks like we want to manipulate the parent div of a tag. What is the syntax so that we can target that specific div?
We've tried different variations of this without any success:
angular.element('legend').parent().addClass('newDiv');
Depending on how big changes you want to make are, I would just try and add CSS using the page CSS. I don't know how familiar you are with ServiceNow, but if you ctrl + right-click the widget in the portal, click 'Page in designer', and then the 'Page' button with a gear on it in the top right corner, then you can add page specific CSS there. I've used this a lot, and it also saves you from cloning the widget.
this is my first post.
I searched for the problem but I couldn't find any solution.
I work with JavaFX, Scenebuilder and CSS files, where I have 2 Buttons and Textfields and other stuff, that are given style classes.
However, when displaying the view, the button styles are being overwritten.
Everything else gets displayed properly but not the buttons.
I can't explain that to myself, however, I have added random buttons and they get overwritten aswell. So I know that somewhere is said that all buttons receive this certain style.
This is a group project, so not all of the code is written by me.
Is there a method in JavaFX that sets styles for certain element types i.e. buttons without styling a specific button? I suspect that this is being done somewhere or maybe the view is inheriting said styling from some other view, because in our project we load stages into each other.
Say I can't fix the occasions where style overriding happens. Is there a way to protect these two specific buttons or buttons in general from getting their style classes overwritten?
OT: why is "hello there" in the beginning of the post being cut out.
I have a large table that I want to appear in a dialog created by jQuery UI.
The development version I created worked correctly but note that this was not using the default Wordpress versions of jQuery and jQuery UI. I registered versions of both libraries for the purposes of the development version.
Using the same script and dialog contents I attempted to reproduce the dialog for my blog using the default versions of the jQuery libraries.
This produces a result where the dialog opens but in the display the default close button found in the title bar is on the left. When you mouse over this close button the icon moves down, but it still closes on a click.
In addition the resize icon appears in the bottom left as does an additional close button I added.
This led me to suspect that I have a css conflict between my table and the jquery UI css. I've noted posts suggesting that there is a problem with jQuery UI 1.8.16 and dialogs with a large amount of content.
However, I can't locate the css for the default jQuery UI library, I'm assuming that it must exist.
The easy answer to this problem would be to deregister the default versions and register external versions but that seems like a waste when the functionality is already in Wordpress.
Questions:
Where do I find the css in Wordpress for the default jquery UI
Any suggestions as to what may be the cause of this problem
Thanks
1) The CSS files are located at /wp-includes/css/jquery-ui-dialog.css (compressed) & /wp-includes/css/jquery-ui-dialog.css (development).
2) We'd need to see an example to have an idea of what the problem might be.
All the styling for that button is located on line 69 in:
/wp-content/plugins/mailchimp//css/flick/flick.css
I resolved the display issue by simply adding the CSS files from the jquery UI theme. Once that was in place everything displayed correct. Not elegant but it solved the problem quickly.
I am trying to change the default mouse cursor for a list drag and drop.
I was trying to get the COPY cursor using DragMananger and event.preventDefault()- but got a very weird cursor behavior (the items' drop indicator was wrongly presented - etc.) Therefor i am trying to stick to default - this works fine - but my cursor now on copy is a simple arrow, and i would like to get the arrow with the grin plus on it. How can i change the default?
Thanks!
There is lots of documentation on creating and using custom cursors with Flex. Here is my own blog post and podcast on the topic.
If you perform a Google Search, lots more info comes up.
If you need to change the dragImage, you can do so by setting the dragImage property on the DragManager.doDrag event. Google also provides a lot of info on changing the dragImage.