I want highlight the week on mouse hover in kendo datepicker and on select of any date in that week i want to get week start date and end date. I am not getting any idea how to do it.
Can anyone one help me Pl.
Thanks in advance
After having done just done this myself, I'll leave traces here for future readers.
The first thing to do is to have the selection look like it's picking a week instead of a day. To achieve that, use a bit of CSS :
.k-calendar table.k-content tr:hover td { background-color: #E3F2FD; }
.k-calendar table.k-content tr td.k-state-selected,
.k-calendar table.k-content tr td.k-state-selected ~ td { background-color: #2196F3; }
This will light up all the week when the mouse hovers a row, yet still display the selected day AND any following day that week in a different color. The trick to make this work is to make sure the selected day is actually always the first day of the week.
To do so (and to extract the week start and week end dates), use the change event :
onChange: function (e, callback) {
// Set the culture, since the first day of a week might be different
moment.locale(GetCulture());
// Get the selected date and calculate the start and end of week
var weekStart = moment(e.sender.value()).startOf('week').toDate();
var weekEnd = moment(weekStart).add(6, 'day').toDate();
// Always reset the date to the start of the week (the style needs it)
e.sender.value(weekStart);
// Do whatever else you want here
}
This solution requires the use of moment.js, a library that was already in use in my project. There are potentially other ways to do the same, but this one is simple enough.
All that's left should be minor details, like changing the text of the "Current Day" footer to read "Current Week", which is trivial to do via the open event :
widget.one("open", function (e) {
$('.k-footer a.k-nav-today', e.sender.dateView.popup.element).text("Current Week");
});
Related
I have a dc.rowchart that has 5 different "categories". Initially, all are selected. When I click on one, then only that one is highlighted. When I click on a second one... both the first and second one I clicked are highlighted.
How can I make it/configure the rowchart such that only a single category is highlighted every time a bar is clicked?
dc.filter("category1");
dc.filter("category2");
Both of these in sequence appear to "append" filters than replace.
Ethan's answer is almost there. It's likely unintentional, but dc.js doesn't appear to use the return value for addFilterHandler, so you'll have to modify the filters parameter for it to work, like so:
myChart.addFilterHandler(function (filters, filter) {
filters.length = 0; // empty the array
filters.push(filter);
return filters;
});
This works great as long as your chart doesn't use cap (e.g. a pie chart with limited slices), as this handler prevents the others group from working. I've yet to come up with a satisfactory solution for that case, unfortunately.
I assume you'll want addFilterHandler - https://github.com/dc-js/dc.js/blob/master/web/docs/api-latest.md#dc.baseMixin+addFilterHandler
You'd probably want to do the following, but it's untested.
myChart.addFilterHander(function (filters, filter) {
return [filter];
});
I'm using the date picker to allow a user to select start and end dates.
When the page first loads, both date pickers will display the current month the first time the calendar is opened.
However, I want the start datepicker to open up a view from one year in the past.
I've looked through the api (options and methods) and haven't found anything to specify a month.
Has anybody tried this?
I don't quite get what view means. Just shooting in the dark - if you want to limit the start to 1 year in the past or on certain month in the past, there is a configuration option min.
From the Kendo examples:
<input id="datepicker" />
<script>
$("#datepicker").kendoDatePicker({
min: new Date(2011, 0, 1) // sets min date to Jan 1st, 2011
});
</script>
Update:
var datepicker = $("#datepicker").data("kendoDatePicker");
var d = new Date ();
$("#datepicker").kendoDatePicker({
value: new Date (d.setFullYear(d.getFullYear() - 1))
});
So this should open the "view" at this day 1 year ago. Live at the Dojo
There is a property called dateView that can have the value set.
Dojo Demo
var datepicker = $("#datepicker").data("kendoDatePicker");
datepicker.bind('open', function() {
if (this.value() !== this.dateView.value()) {
this.dateView.value(null);
}
});
datepicker.dateView.value(dt);
This will update the value in the popup calendar without updating the value of the widget itself.
Edit: This actually causes a bug where clicking the selected dateView value doesn't update the actual picker value. I've added a handler for the open event to take care of the mismatch and clear the selected dateView value.
Is there any way i can hide HOT columns from javascript?
The requirement is such that the column to hide will come as a parameter in javascript and based on that the respective column will show hide accordingly.
The HOT has rowHeaders and colHeaders and the data with 20 columns.
Please advise.
OUTDATED SOLUTION
Ok I founnd a possible solution. I tested it out on my own system but it's actually quite simple.
You should be using a customRenderer in your columns option. Read up about this if you aren't already. The idea is that you're giving each cell its own renderer. In this custom function, you can do something like this:
var colsToHide = [3,4,6]; // hide the fourth, fifth, and seventh columns
function getCustomRenderer() {
return function(instance, td, row, col, prop, value, cellProperties) {
if (colsToHide.indexOf(col) > -1) {
td.hidden = true;
} else {
td.hidden = false;
}
}
}
What this renderer does is hide the cells that the var colsToHide specify. All you do now is add a DOM element that lets the user pick which and so every time the table gets rendered (which happens basically after any change, or manually triggered need be), the cells in the columns specified will be hidden, keeping the data array intact like you described. And when not in colsToHide they are re-rendered so make sure you get that working as well.
Here I implemented it with very basic functionality. Just enter the index of a column into the input fields and watch the magic happen.
http://jsfiddle.net/zekedroid/LkLkd405/2/
Better Solution: handsontable: hide some columns without changing data array/object
I need to change the background color of a specific day which has an event added through the Google Calendar.
I removed the way it originally shows an event, as you might know, just like in Calendar, because I don't need that.
I've also thought in a way to add in the source code a condition to check if there's an event in that day, and if the condition is true, add a special class such fc-has-event, and then modify it through CSS rule. But the problem is that I have no idea how I could do it, I've already spent two days checking the code.
Can someone help me please?
Inside eventRender use the Date constructor to compare the event date with a manual set date:
var google_date = new Date( event._start._d );
var check_date = new Date( '2014-09-09' ); // The date you want to highlight
if ( google_date.toDateString() == check_date.toDateString() ) {
element.addClass( 'custom-class' );
}
How do I remove the past dates from the full calendar. SO when the calendar loads it should display only current month's date. I could disable the past dates but I need to remove it from the current month.
Use the property visStart, this will let you control what the first visible day on the calendar is. You can set that to DateTime.Now() (c#) or Now = new Date() (javascript)
http://arshaw.com/fullcalendar/docs/views/View_Object/
This will stop the past dates from showing up the calendar.
I don't have the solution for removing dates, but this is what I'm using for when someone clicks on a date and trying to make an appointment thats in the past.
var date = new Date();
select: function(start, end, allDay) {
if(start < date) {
alert('Cannot select past dates.');
return;
}
},