I m getting some dates from the database which are of interest to the user
(they are then dates where the user is going to take days off in the future or has taken days off in the past from his or hers job).
I have the dates in the database and i need to retrive them for each cell and color the calendarjs cells in red.
Im currently using ASP.NET MVC but i can handle any examples in any languages on how to pre-render fullcalendarjs cells.
Im more interested in how to handle the frontend.I dont need "events" i need to make the entire day cell red, the top part aka the th and the bottom part of the cell aka the td.
Very easy, use firebug and you'll see that there is an fc-bg class used to mark the calendar squares area and each cell is marked with data-date="YYYY-MM-DD".
So you can use jQuery to find each cell and change its style.
$('*[data-date="'+ dateVar + '"]').addClass('some-class');
you can even check what other classes are set to see if its in the past, what day of the week it is, etc.
get Firebug :)
Related
I have a fullCalendar plugin connected to Google Calendar and it shows all days, including days that don't have an event. I need it to show just days with an event. Is it possible?
I can't give a full answer since I am still chewing on this myself, but you might has well know what I've done. I work in a custom basic Day view called vertWeek, which looks like an agenda view. In dayRender, I have tried looping (.each) over fc-row and using freight trains of .has and .hasClass to try to hunt down those rows that have a td cell with .fc-container-event. The existence of this should be enough but no matter what I try I can't isolate a specific day-row. All rows get a green border or in the negative they get a red border.
I know my each works coz if I use .html on the index each row prints out its index number neatly. I don't have code handy, am away and tired, but go look for a post about squishing box calendar rows without events in them to get a gist of my efforts.
Hope this helps.
I have in my application a larger textbox and offer user the possibility to enter text on several rows like this:
first piece of text
second piece of text
and so on...
Each row is a distinct piece of data that has a significance. The thing is I would like to use ajax auto complete extender functionality after the user types a certain character on a row, such as #, and filter the records in the database according to the first letter the user typed after #, moment when the auto complete suggestion list would appear. For example, third piece of text #Action1, means that after the user typed A he would be prompted with a list of values to choose from.
There are several items of concern for me: first, it is possible to use autocomplete extender only for part of the text in the textbox, and second does it work like this for multiple rows (i.e. one time - in each line behaviour)? Regarding its position, I guess I have no other choice than at the bottom of the textbox it refers to, despite I would have liked it to appear below the # symbol.
Thank you very much.
Update: I found something similar to what I am looking for here: Twitter-style autocomplete in textarea, but the author only explained briefly his solution. Any help much appreciated, thx!
Each row is a distinct piece of data that has a significance.
Why are you using a textarea then, and not multiple <input> fields?
Sounds to me like your error in UI design lies right there already, so the rest of my answer is rather theoretical; I probably won’t go into more details as the sensible fix for your problem is the one above.
first, it is possible to use autocomplete extender only for part of the text in the textbox,
Why shouldn’t it be? Cursor position in a textarea for example is readable (although it requires some working around cross-browser issues).
and second does it work like this for multiple rows (i.e. one time - in each line behaviour)?
So long as the line breaks are “hard” ones (made by the user themselves, using enter/return), splitting the actual textarea content by "\n" to have each row as a single value is no problem.
Regarding its position, I guess I have no other choice than at the bottom of the textbox it refers to, despite I would have liked it to appear below the # symbol.
You could try to roughly measure the #’s position, by line and col number it is on, and match that to the character width and line height, when using a monospace font. For other fonts, some more “magic” might be required to measure the actual width of the previous text before the # character.
I have created a Meteor package for this, which allows both free text and multiple autocomplete sources. Meteor's data model allows for fast multi-rule searching with custom rendered lists. If you're not using Meteor for your web app, (I believe) you unfortunately won't find anything this awesome for autocompletion.
https://github.com/mizzao/meteor-autocomplete
See the link for pictures of how it works. Fork, pull, and improve!
I come from the Delphi school. I was really used and pleased with Delphi grids with the plus features of InfoPower. Not just me, my users loves all features that include grids. Some motives for that are:
With grids they have the ability to insert detail information using only the keyboard. Input, Tab, Input, Tab, Input Tab (automatically insert new row), input, tab, etc.
They were able to simply click in a row and edit it´s data.
They could navigate between records using only arrow keys.
In my flex apps I´ve being working arround this quite often, sometimes using a popup to insert data, sometimes using repeater instead of grid. But now I really really need some intuitive, fast way for my users to insert this data.
I am trying to use DataGrid (or AdvancedDataGrid) with inline editors and I am living a real hell to do that. For the last 3 days I am struggling, tweaking and workarrounding in order to try to mimic the features that I had with Delphi.
Main problems are:
DateField simply don´t work as an inline editor. It gets focus but never looses, only with pressing ESC, wich makes me loose the inputed data.
AdvancedAutoComplete: I have a component descendant from AdvancedAutoComplete with a custom browser. The custom browser is a popup, when I try to PopupManager.remove flex raises an exception of a null pointer inside it´s focus managing engines.
I couldn´t get to insert a new line focused in it´s first column when TABing in the last column of last row.
Having all these problems and not getting substantial material to solve them makes me think the (now obvious) fact that it is just not the way grids are intended to work in flex. My question is: what are the patterns used in flex applications to make sequencial, intuitive, fast, keyboard only insertions in a detail?
To answer your question bluntly, there are no specific established patterns to make editing or inserting data in the DataGrid fast and easy. Not being able to Tab between fields is one of the things I really wish Adobe had added to the DataGrid by default.
In order to get the functionality you want, you'll have to do some custom coding and extend/override the DataGrid's default functionality. Switch On The Code has an example up on tabbing between fields, but you would have to build upon their sample a bit further to include features like adding a new row when pressing tab in the last field of the last row in the DataGrid.
You may also want to consider Flexicious. Based on the Flexicious Ultimate demo, it looks like they have the functionality you're looking for (and then some!).
I now need to design a chemistry periodic table. I will have a set of few elements that have been chosen by the user,and that should be reflected on the periodic table by making these few elements clickable.
So when the user clicks on these few elements,corresponding explanation text will pop up on the text area outside the periodic table.
Could anyone suggest me a good way of doing this?I now have two approaches:
Making all the elements of the periodic table buttons,so only the buttons that are within the set are enabled(clickable),while others are disabled.
Embedding a static periodic table picture,and do things there(don't know exactly how yet).
Please feel free to comment on and suggest, thanks.
Buttons would probably be the easiest route. If you just have a clickable image, you have to manually calculate the boxes of each element in the table to figure out what they clicked on. With buttons, you only have to position the buttons, you don't have to do hit testing.
I've written a simple calendar control to allow for selecting single days, weeks, months and so on. The simplicity comes from the fact that I don't really do any drawing myself, opting instead to create a bunch of boxes and labels to act as date cells for the calendar.
When a date or a date range is selected, I need to highlight that range. It's easily done by iterating through the cells and switching their style. [edit:] However, this seems to cause a delay during which the cells are first drawn as if the style name was blank, and then re-drawn with the correct style, despite the fact that I never explicitly set the style to null -- I alternate between "CalendarCell" and "CalendarCellSelected".
If this were Windows Forms, I'd call SuspendLayout on the parent container to make sure the controls are repainted only after I've finished the updates. What I'm looking to know is whether or not a similar solution exists for Flex. I'd like to avoid drawing the entire calendar "manually", so to speak, if that's at all possible.
edit: changed the problem description to more accurately reflect what I'm seeing.
Are you using callLater() at all?
If you use callLater() it may impove your visuals as it batches up changes until it needs to draw a frame or you force a frame draw with validateNow() or similar. It might be enough in your case.
Is your calendar control a UIComponent? Is it using the standard invalidation methods like commitProperties(), updateDisplayList(), etc?
What you might want to do is keep a private array of the cells that will have their styles changed, but then do the actual style switching in your commitProperties() override. I'm just not sure if setStyle() fires an validateNow() because the flickering is a bit surprising.
This may not be exactly what you're looking for, but David Coletta at Adobe has posted a video explaining an EventCoalescer that they use in Buzzword for deferring events that update specific areas of the app UI until the user has stopped moving the insertion point in the text, for example.
This blog post by Hans Van de Velde also has a similar solution, and actual code for it as well.