I've mixed a couple of examples (CustomView, Moment JS localization) in order to create a view that only shows each Wednesday and Thursday. However, the events are not displayed.
The events are transferred from the parent to the child component (including the Calendar component). However, simply hardcoding events also does not work.
I feel like it's a problem within the custom view, but I cannot find what exactly.
See codesandbox.
The first thing I notice, looking at your codesandbox, is that you forgot to include the stylesheet. This is mentioned in the Getting Started section of the documentation. Your min and max props are being passed moment objects, rather than true js Date objects. And the hardcoded event date you included wasn't in the displayed date range.
Related
The antd tables work well with Input components. I have been using the editable cell example at https://ant.design/components/table#components-table-demo-edit-cell and it works well with undo / redo functionality.
The Select / Options and Date Picker components however do not have any documentation in the context of a table that's hooked up to a state. I have gotten the Options / Date Picker to work but when implementing undo / redo logic, it looks like their state does not by default update like the Input fields. If you Google this, it is a tricky part of React in general to get these components to update automatically with state changes in a Form.
Is there an example of an antd table with select or date picker that's hooked up to state information?
I got the Select / Option to work correctly visually e.g. default states load correctly, depending on selection color changes etc. I can manipulate the data as needed. Similarly, got the Date Picker to work. However, where I am stuck is automatically tying state changes to update the components. I can probably do some crazy stuff like force render but before going that route wanted to check if there is a cleaner / better antd way of doing this.
I think you have to custom return to default Editable Cells like the following example url example
After wasting many hours on this, it looks like there is a bug in antd Forms. See this SO thread: React | Ant design select value not setting
In short, removed the Form.Item and everything works fine.
I am using react-big-calendar to render events, and I using month,week,days view. Everything works fine in month view, but if there are multiple events with same time slots then it would render in a single row(ref image below). Is there any way to render the event column-wise? Also, are there any good alternatives to react-big-calendar?
Unfortunately, the documentation site is out of date, or you'd know about the new dayLayoutAlgorithm prop. From the updated documentation (available by cloning the repo and running the 'examples'):
dayLayoutAlgorithm
A day event layout(arrangement) algorithm.
overlap allows events to be overlapped.
no-overlap resizes events to avoid overlap.
or custom `Function(events, minimumStartDifference, slotMetrics,
accessors)
type: custom
default: overlap
Following are the two images i am being trying to implement
Can this functionality be added in all day event in week view
after clicking on 2 more it should expand
Is there anything been implemented in react-big-calendar to help me with this
React-Big-Calendar handles this via a popup, instead of inline. They have an example in their documentation.
I've made a date picker directive that uses a single date picker from the improvely datepicker library. It has two input tags and an OK button.
Date Picker Library
Single Date Picker Example
If I change the value of the input field via the keyboard the models get the desired value and calls to the server take place as expected. The problem arises when I use the date picker. The value of the model does not change. It still has the same value that I set via the keyboard.
But if I run document.getElementById('frompicker').value using the console it shows me the right date that I set using the datepicker.
If I don't set any value form the keyboard and only use the datepicker drop down, the values of the models are undefined.
I've tried a few solutions offered for Angular Boostrap UI Datepicker and Angular UI Datepicker. None of them work.
Edit after a comment
Code can be found here - https://plnkr.co/edit/HzkYzUajGlsZq5KhUwsx
Any help is greatly appreciated :)
You should sync scope after datepicker change via
$scope.$apply();
or
$scope.$evalAsync();
seems it 'apply.daterangepicker' event for your datepicker
I tried all the methods mentioned in different answers. My colleagues told that it's a bad idea to use $scope.$evalAsync() or $scope.$apply() unnecessarily. Our code base does not use digest, compile and the likes. So that was causing a hindrance.
I finally decided to detect the date change event as suggested by Valery Kozlov (the accepted answer) and manually changing the model.
I accessed the date like this.
$('#frompicker').val(); // can be done without jQuery as well
Changed the model using this.
// use Angular's $on to make things consistent if needed
$('#frompicker').on('apply.daterangepicker', function(ev, picker) {
scope.vm.from_date = $('#frompicker').val();
});
Does anyone have a solution to updating angular ui's disabled dates from a server response?
https://github.com/angular-ui/bootstrap/issues/779
You should create another directive that will require datepicker's controller. From your
directive you should call the refreshView of the datepicker to reevalute the disabled dastes.
Does anyone have example code for that?
I'm trying to use angular ui datepicker so that the disabled dates are read from a server response. I change the datepicker's min date to force it to refresh.
I saw another stackoverflow page where the user had it refresh, but it relied on the datepicker calendar being clicked. Another one used set the date min attribute as the value of another field.
For me, I have a completely separate field from the date picker. When changed, it sends an http request to the server, and on a successful response the available dates are updated.
The only problem with changing the min date to force a refresh is that sometime's there same but with different dates to disable. I'm looking into changing a datepicker option I do not use to a random value to force a refresh.
Does anyone have a better way? I saw cross controller communication via a service, but this is a different module. I also saw a github issue where the datepicker controller can be
I've found a simple solution to this problem using a decorator: https://gist.github.com/cgmartin/3daa01f910601ced9cd3
Then, you only need to call $scope.$broadcast('refreshDatepickers') to refresh the datepickers.
IMPORTANT: For more recent ui-bootstrap datepicker library, you may need to replace 'datepickerDirective' with 'uibDatepickerDirective' if you are using datepicker with uib-datepicker element or attribute.
The angular bootstrap datepicker has datepicker-options
This user listed the solution: https://github.com/angular-ui/bootstrap/issues/2189#issuecomment-225685104
bogdandrumen commented on Jun 13
Use datepicker-options="{minDate: yourScopeMinDate}"
which worked for me. I have two pickers, the second picker cannot be greater than the first one so if the first picker changes, the second picker's max date also changes.