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.
Related
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?
I am using FullCalendar and I am loving it, however I would like to hide the grid lines in month view so that instead of cells it's more open. Is there a way to do this? I want it to look like this
Calendar without grid lines
I have tried manipulating the css but I'm not having much success since I'm new to it. Can someone please help.
great people from Stack!
I'm having some issues working with Full Calendar I would like to get some help with.
First of all, Full Calendar is an amazing tool. Everything I have had any doubt with has been solved in a breeze just by taking a look at the docs or googling five minutes. However, there is a problem I'm dealing with and can't find (I'm starting to suspect it is virtually impossible, or at least it is for me to imagine how to do it) the way to get it solved.
I'm implementing this library in a project which is meant to be something like an appointments manager, among other things. A (simple) functionality I wanted to add is to open a modal when a calendar cell (agenda week would be the main view) is clicked with a form, allowing to create an appointment for the selected cell. To improve usability, I thought it would be nice if the cells had some kind of hover effect, so that you can feel there is 'something' behind clicking this element. The thing is, the calendar is composed by something like 2 separated overlapping tables, one with rows and the other with columns, that form the grid. The modal system is done and working, dayClick made the trick. Any way to do anything similar to what I am talking about, the hover stuff? (my idea was to make some kind of (+) button appear when hovering, but anything would work.
Thank you!
Seth
Edit: I noticed there is a 'selectable' directive which, given only to the AgendaWeek view, allows me to select cells. The selection is made by the JS code, adding an element just above the cell, with its dimensions. Wouldn't it be any way to call this from hovering a cell instead of just clicking it? I wonder that highlight cell is rendered from the position of the mouse at the time of the click and wouldn't be very efficient to check that all the time...
I am trying to figure out how to design a calender scheduler in adobe flex.
I have seen the flexlibswc, but it is not structured properly to use.
My idea is to get time in vertical as list and scheduler at right all in one panel.
Can anybody suggest what components I need use to design this custom component.
Please see the protoype screen below
I'll use core graphic components/spark to design this screen. The whole calender background will be a relative layout component like a group/canvas surrounded by the scroller. Each of the slot(blue color) will be extending a spark/uicomponent fills color with Graphics(circle rectangle etc,) so they'll be light weight. I've tried these, they work, but, it is a hectic process to get all things right, it may take 2 months - 3 months to get things done. If you find a open source project try digging the code.
I am new to TurboGears2 and by extension ToscaWidgets2. I am following the tutorial given here http://turbogears.readthedocs.org/en/latest/cookbook/datagrid.html
for creating a basic datagrid. When I view the index page, all I see is this:
class 'tw2.core.params.DataGrid_s_s'
I have also tried using a DataGrid for showing data from an existing DB, but I also get the same above result. Shouldn't there be a .css file that would handle the grid generation/display?
I have checked past tutorials for using DataGrid on TurboGears, and when it comes to displaying the grid, they only show this line:
${grid(value=data} ( or ${grid(data)} in older TG versions).
Since there are no errors being shown, I am at a complete loss here. I have searched online for a solution on this, but I haven't been lucky. Any advice on how to get around this?
Cheers,
DM
It changed in recent ToscaWidgets versions, when you want to display a widget (like the DataGrid) you should prefer an explicit call to the display method instead of calling the widget itself.
try to replace ${grid(value=data} with ${grid.display(value=data}
Have a look at the Forms tutorial, it covers some basics on working with forms and TW2 widgets, the DataGrid in the ends it's just a Widget so behaves like forms for some features.