how to set events width in fullcalendar 4.0 day mode - calendar

I tried to set the events width properly in day mode irrespective of the number of events.
Not able to properly display it as in the attached image .
And another issue is I am using eventlimit:3 in initialization of the calendar, can we set the same attribute with different value for the week mode such as "20" at the time of initialization, though I can set it dynamically with setOption method, Please suggest.

Related

react-big-calendar bug when clicking on show more events

I'm using react-big-calendar (in my next.js project) and as you can see in the image above I'm displaying events on it and I have a bug that I can't understand why its happening.
When I press on the +3 more (which shows me all the events happening on the given day) then the dropdown menu that you can see on the top right image opens and then instantly closes and even if I change page it still gives me the same bug and it happens to all the dropdowns that I have on the website I'm working on.
Now one "hack" is to make the min height of the calendar bigger (I can make it 900px instead of the current 700px) so that all 4 events are shown directly instead of showing the +3 more but the problem with this "hack" is that imagine I have A LOT of events on a given day then I would need to set the min height to really really big number which is undesirable.
Note that the bug disappear if I reload the page but obviously I just can't force the user to reload every time he wants to see more events on a given day.
Which version of React-Big-Calendar are you using? Older versions of RBC used an anchor tag, for the 'more', that had an href="#". I could see that causing issues like this. Current version has replaced this code with a 'button' component styled to look like an anchor.

Dialog close without selecting the value into text fields on on Simulator

I use the dialog to display date range control. On Simulator before selecting the value dialog closes and I'm not able to change or update any value. Please see the code below. Please advise if there is any known issue.
This is probably related to this line:
range.setDisposeWhenPointerOutOfBounds(true);
When you start interacting with the Picker popup, it disposes the dialog because the pointer it outside the bounds of the underlying dialog.
I have made a change to Dialog that will be available in the next update on Friday that will fix this issue.
https://github.com/codenameone/CodenameOne/commit/2c5fbfc9ae06e35911b5832441a685724e9739a0

React Native : Changing Label based on Picker selection

I am trying to create a very simple input screen containing inputs, labels and a picker.
The app that I am trying to build contain a picker, two numeric inputs and two labels (existing side by side along with the input elements) as shown below
When the user makes a selection in the picker (can choose either "Metric" or "Imperial"), the labels (B1 & B2) beside the inputs should also change accordingly as {B1: "Kg", B2: "Cm"} or {B1: "Inches", B2: "Lbs"}
What are some design pattern/strategies to achieve this ?.
Looks like a simple problem but I have run out of ideas as to how change the label based on the selection of picker.
I have thought of creating two different Modals M1 and M2 with visibility toggling but I am not sure that the solution is elegant :(
Would appreciate any tips or guidelines as to how this problem (changing a label based on picker selection) is solved.
I strongly advise you to try creating code yourself first by following the react documentation.
These are some steps to help you get started:
Set an event handler on the picker.
In this handler you set the state to be either metric or imperial.
After that you can render based on state values.
A change in state will re-render components so the label will change automatically.

angularjs ui-calendar events displayed incorrectly on calendar

I am using Angular UI Calendar to display some events on the calendar. Whenever the calendar is loaded for the 1st time, the events extend to next date or shown on some other Date.
However when I change the View(Day/Week) and come back again to Month view, then events are displayed fine. Similarly, after changing month and coming back again to the current month , the events are displayed correctly.
Also, I've noticed that the calendar height also increases by 95px after changing the view(when displayed correctly).
Why is this occuring. How can I render events correctly for 1st time?
The problem was with CSS. Solved it.

Default value for ExtJs Combo box without using emptyText

I'm using ExtJs 4 and in my Web application I have a combo box. Previously I used to set the default value of the combo box using emptyText. It works just fine. But, is there any alternative way of setting the default value for the same?
I looked into different questions here on SO and tried the following -
Ext.getCmp('myComboBoxID').setValue("myValue");
However, this doesn't seem to be working. I also tried the simple value attribute to no avail. How can I the set the default value other than using emptyText?
Also, when the value is set using emptyText, it is displayed in gray color (which is poorly vsible), I was wondering if one can work with the opacity of the ExtJs select box?
Update: I used Ext.getCmp('myComboBoxID').setRawValue("myValue"); to set the value & it worked. What is the difference between setValue() & setRawValue()?
You need to supply the id to getCmp method. Try the following.
Ext.getCmp('#myComboBoxID').setValue("myValue");
I used Ext.getCmp('myComboBoxID').setRawValue("myValue"); to set the value & it worked.
The store needs to be loaded before you call setValue and you use the id of the record you want to select. There is a load event you can listen for if the values are loaded from the server. emptyText is not intended for default values, but to help the user understand what should be done with the field (eg "Select a state" from a list of states)

Resources