Great tool you provided us!
I loved the table below the calendar. It's reeeeeealy useful.
The only issue I'm having is to customize the calendar view...
I needed something cleaner. Do you have tips where I can start looking for customising the view?
I looking for something like this: https://github.com/jonathantribouharet/JTCalendar/blob/master/Screens/example.gif
Thanks in advance!
You want to look at the CKCalendarCell and CKCalendarHeaderViewclasses.
The look and feel of the cells and the header are in there.
CKCalendarCell uses the concept of states to determine what gets rendered when. There are seven states:
CKCalendarMonthCellStateTodaySelected = 0, // Today's cell, selected
CKCalendarMonthCellStateTodayDeselected = 1, // Today's cell, unselected
CKCalendarMonthCellStateNormal, // Cells that are part of this month, unselected
CKCalendarMonthCellStateSelected, // Cells that are part of this month, selected
CKCalendarMonthCellStateInactive, // Cells that are not part of this month
CKCalendarMonthCellStateInactiveSelected, // Transient state for out of month cells
CKCalendarMonthCellStateOutOfRange // A state for cells that are bounded my min/max constraints on the calendar picker
The state of each cell is determined based on if it's part of the current month or not, if the cell is selected, and if the cell has an active touch in it.
Have a look at the applyColorsForState: method for the coloring and stuff. You may want to add your own borderRadius and clipsToBounds values.
The colors for the header are defined in CKCalendarHeaderColors.h as hex values, which are converted to UIColors with a category on NSString.
Related
I'm using react-day-picker DayPicker (not DayPickerInput) and have an existing element I want to use to drive the date popup. I can't figure out how to pre-feed the date from the element to the calendar and highlight the given date. All the other functionality, e.g. capturing the user chosen date and populating the element are working fine. So if my input element has Nov 11, 2019, and I click on it, I want the popup to go to that date and show it as selected. The current behavior is that it shows the current month and date. I've tried to set the selectedDays={this.state.selectedDay}, but that doesn't seem to work. Note that I am new to reactjs, and this could be the gap in my understanding.
Thanks for any suggestions you may have.
Found at least one way to achieve the behavior I was looking for. There is a DayPicker property "initialMonth" that will display the current month. Note that this only needs to be populated only with year and month:
initialMonth = {new Date(selectedDate.getFullYear(), selectedDate.getMonth())}
I am using Extjs datepicker.
I want to select multiple dates of datepicker by dragging over them.
For that I tried to make calendar dates draggable. I took the reference from here https://docs.sencha.com/extjs/5.1/core_concepts/drag_drop.html and wrote below mentioned code.
var calendarDate = Ext.get('DatePickerSchedule').select('td');
Ext.each(calendarDate.elements, function(el) {
var dd = Ext.create('Ext.dd.DD', el, 'datesDDGroup', {
isTarget: true
});
//Apply the overrides object to the newly created instance of DD
Ext.apply(dd, window.overrides);
});
But it doesn't seems to be working. Please suggest what I am missing.
Check out this Previously Answered Question. There's a fiddle provided that demonstrates how to implement multi-select on a date picker. It doesn't use dragging but it may be a suitable solution for your needs.
EDIT:
So this question really got me interested in how you might go about solving this. So I've had a play around and created custom date picker that extends the ExtJS datepicker but provides drag support for multiple selections using the mouse listeners I had suggested in my comment.
The fiddle can be found here DraggableDatePicker
One improvement you may want to make is to make the component aware of rows and the values within rows, so that when you mouse over a new row all dates on that row (prior to the one currently with the mouseover) are selected. My solution only cares about individual cells that are dragged over.
I am able to edit month,date and year by using TAB or Arrow keys(MM-dd-yyyy). I have doubt is this possible to edit total date format at a time (not using tab key or any arrow keys).
No, I don't think this is possible. From Using the DateTimePicker Control
The DateTimePicker operates as a masked edit control for entering date and time values. Each part of the date or time is treated as a separate field within the edit portion of the control. As the user clicks on each field, it is highlighted and they can use the up and down arrow keys to increment or decrement the value of the field. The user can also type values directly into the control, where applicable.
I am working on DHTMLX grid where in my grid the different row have different type of data. And I have provided the facility for a each row to edit the values. There are two rows, one it name of the item another is value for that item. So there is different type of values like price[number], title[string], status [drop down option list], created[date] etc. so I see there is an option for defining the grid's row type for each. Everything is working properly but the calendar is not showing.
Can anyone help me on this?
I have used row type for calendar is "dhxCalendar" but getting error as after that no row is showing up and the design gone missing. Any kind of help will be appriciable.
a) be sure to include related files
excell/dhtmlxgrid_excell_dhxCalendar.js
dhxCalendar/codebase/dhtmlxcalendar.js
b) be sure that format of date in you datasource (xml|json) is the default one (d/m/y), or you are using setDateFormat as
grid.setDateFormat("format to show", "format in datasource");
Is it possible to create multilevel combobox using ExtJS 4.0? I mean, that it should have, for example, these options:
This
Month
Year
Last
Month
Year
This and Last options should be not selectable.
This absolutely is possible.
You can define a template for your combobox which defines how the row is displayed. What you can do is have the store have a field which defines the type of record, such as a boolean header field.
In your xTemplate which you pass into the Combobox's tpl config, you can check the value of that field and if it's a header apply separate styling. Then, add a beforeselect listener and if the record's header field is true, return false.
I saw something similar on the Ext website, but can't locate it right now. If you need more details, let me know.