I have kendo scheduler below, is there any way to set different background style for weekends.
#(Html.Kendo().Scheduler<CalenderTaskModel>()
.Name("scheduler")
.Footer(false)
.Editable(false)
.EventTemplateId("eventTemplate")
.Timezone("Etc/UTC")
.Views(views =>
{
views.AgendaView(view => view.Title("Week"));
views.MonthView(view => view.Selected(true).EventHeight(15).Title("Month"));
})
.Resources(resource =>
{
resource.Add(m => m.ResourceID)
.DataTextField("Text")
.DataValueField("Value")
.BindTo(new[] {
new { Text = "Resource 1", Value = "Resource1"} ,
new { Text = "Resource 2", Value = "Resource2"}
});
})
.DataSource(d => d
.Read("GetCalenderSummary", "Home"))
)
<script id="eventTemplate" type="text/x-kendo-template">
# if(ResourceID === 'Resource1') { #
<a class='t-resource1'>#: title #</a>
# } else if (ResourceID === 'Resource2') { #
<a class='t-resource2'>#: title #</a>
# } #
</script>
I am not looking to set background style of the event on weekend but i want to set the background of the day (weekend) itself.
So below is the sample picture i got from telerik's demo. The highlighted portion should be in different background color
You can use dayTemplate:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.mobile.all.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/kendo.all.min.js"></script>
<style>
.k-scheduler-content td {
padding: 0;
}
.weekend {
background-color: red;
height: 100%;
padding: 5px;
}
</style>
</head>
<body>
<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
date: new Date("2013/6/6"),
views: [
{
type: "month",
dayTemplate: (e) => "<div" + (e.date.getDay() === 0 || e.date.getDay() === 6 ? " class='weekend'>" : ">") + e.date.getDate() + "</div>"
}
],
dataSource: [
{
id: 1,
start: new Date("2013/6/6 08:00 AM"),
end: new Date("2013/6/6 09:00 AM"),
title: "Interview"
}
]
});
</script>
</body>
</html>
Assuming that Sunday is always the first column and Saturday the last one, you could use the following css:
.k-scheduler-monthview .k-scheduler-table td:first-child,
.k-scheduler-monthview .k-scheduler-table td:last-child {
background-color: grey;
}
On dataBound event you can go through all days and check what kind of week day it is.
dataBound: function(e) {
var view = this.viewName();
if(view == 'week' || view == 'month'){
var days = this.view().content.find("td");
for(var i = 0; i < days.length; i++){
var slot = this.slotByElement(days[i]);
var date = new Date(slot.startDate);
var isWeekend = date.getDay() == 0 || date.getDay() == 6;
if(isWeekend){
days[i].style.background = '#4CAF50'
}
}
}
}
slotByElement method gets you a scheduler's day when you pass a Html element. From there you can check whether is weekend or not.
Working fiddle where weekends get marked for "week" and "month" views.
Related
I am using kendo line chart in my application, the x axis values/labels are overlapping. The xAxis.labels.step property doesn't work in my case as the categoryaxis is bind to an datasource that can contain a date difference in days/moths/years. How can i avoid ovelapping?
I have used rotation to fix this issue, but is there any other approach?
Below is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script>
</head>
<body>
<div id="chart"></div>
<script>
var seriesData = [
{
year: new Date(Date.parse("12/12/2011")),
value: 1
},
{
year: new Date(Date.parse("13/12/2012")),
value: 3
},
{
year: new Date(Date.parse("23/12/2012")),
value: 4
}
];
$("#chart").kendoChart({
categoryAxis: {
min: new Date("12/1/2011"),
max: new Date("23/12/2012"),
baseUnit: "days",
type: "date",
field: "year",
labels: {
dateFormats: {
days: "MM/dd/yy"
},
}
},
chartArea: {
width: 300,
height: 200
},
series: [
{
field: "value",
type: "line"
}
],
dataSource: {
data: seriesData
}
});
</script>
</body>
</html>
Kendo chart's x-axis labels can be adjusted dynamically using dataBound-event with the following dataBound function.
function dataBound(e) {
var chart = $("#chart").data("kendoChart");
if (seriesData.view().length > 2) {
chart.options.categoryAxis.labels.step = 5;
}
else {
chart.options.categoryAxis.labels.step = 1;
}
}
See full demo -> JSFIDDLE
With jQuery delivered by Google CDN and DataTables delivered by Microsoft CDN I have the following page, where 3 checkboxes allow toggling good, bad, neutral comments about some user (here fullscreen):
My problem is:
With DataTables 1.9.2 this works well: here jsFiddle
With DataTables 1.9.4 this does not work: here jsFiddle and a copy of my simple test case is at the bottom of this question.
The problematic code is probably here:
$.fn.dataTableExt.afnFiltering.push(
function(oSettings, aData, iDataIndex) {
if ('comments_table' == oSettings.nTable.id) {
//console.dir(oSettings);
console.dir(aData);
var nice = aData[3];
if (nice == true)
return $('#good_box').is(':checked');
if (nice == false)
return $('#bad_box').is(':checked');
return $('#neutral_box').is(':checked');
}
return true;
}
);
The console.dir(aData); prints for dataTables 1.9.2 a 4-elements array and I can grab its last element (shown by the red arrow in the above screenshot).
But for DataTables 1.9.4 it only prints a 1-element array for some reason. Why?
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables_themeroller.css">
<link type="text/css" rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css">
<style type="text/css">
a img.good {
border: 3px solid #009900;
}
a img.bad {
border: 3px solid #FF3333;
}
a img.neutral {
border: 3px solid #9999FF;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<script type="text/javascript">
var ME = "http://gravatar.com/avatar/55b3816622d935e50098bb44c17663bc.png";
$(function() {
$.fn.dataTableExt.afnFiltering.push(
function(oSettings, aData, iDataIndex) {
if ('comments_table' == oSettings.nTable.id) {
//console.dir(oSettings);
console.dir(aData);
var nice = aData[3];
if (nice == true)
return $('#good_box').is(':checked');
if (nice == false)
return $('#bad_box').is(':checked');
return $('#neutral_box').is(':checked');
}
return true;
}
);
$('#good_box,#bad_box,#neutral_box').click(function() {
commentsTable.fnDraw();
});
var commentsTable = $('#comments_table').dataTable({
bJQueryUI: true,
sPaginationType: 'full_numbers',
bProcessing: true,
bDeferRender: true,
aaData: [
{"day":"17.02.2014","about":"A neutral comment about this user","nice":null,"female":false,"author":"OK250354887500","rep_id":960962,"avatar":ME},{"day":"30.11.2013","about":"A positive comment about this user","nice":true,"female":false,"author":"DE10859","avatar":ME},{"day":"23.11.2013","about":"A positive comment about this user","nice":true,"female":false,"author":"OK100836631753","avatar":ME},{"day":"01.04.2013","about":"A positive comment about this user","nice":true,"female":false,"author":"DE8547","avatar":ME},{"day":"29.03.2013","about":"A NEGATIVE comment about this user","nice":false,"female":false,"author":"OK462728443459","rep_id":734122,"avatar":ME},{"day":"26.03.2013","about":"A positive comment about this user","nice":true,"female":true,"author":"DE10472","avatar":ME},{"day":"24.03.2013","about":"A positive comment about this user","nice":true,"female":true,"author":"DE9454","avatar":ME},{"day":"22.03.2013","about":"A NEGATIVE comment about this user","nice":false,"female":false,"author":"DE6294","rep_id":727815,"avatar":ME},{"day":"04.02.2013","about":"A neutral comment about this user","nice":null,"female":false,"author":"VK119456690","rep_id":683816,"avatar":ME}
],
fnInitComplete: function () { this.fnAdjustColumnSizing(); },
aaSorting: [[0, 'desc']],
aoColumns: [
/* 0: day */ { mDataProp: 'day', bSearchable: false, bSortable: true, bVisible: true },
/* 1: about */ { mDataProp: 'about', bSearchable: true, bSortable: false, fnRender: renderAbout },
/* 2: avatar */ { mDataProp: 'avatar', bSearchable: false, bSortable: false, fnRender: renderAvatar },
/* 4: nice */ { mDataProp: 'nice', bSearchable: false, bSortable: false, bVisible: false }
]
});
});
function renderAbout(obj) {
var about = obj.aData['about'];
var rep_id = obj.aData['rep_id'];
if (rep_id) {
return '<i>«' + about + '»</i> delete';
}
return '<i>«' + about + '»</i>';
}
function renderAvatar(obj) {
var avatar = obj.aData['avatar'];
var author = obj.aData['author'];
var nice = obj.aData['nice'];
if (author) {
var cls = 'neutral';
if (nice == true)
cls = 'good';
else if (nice == false)
cls = 'bad';
return '<img class="' + cls + '" height="45" src="' + avatar + '">';
}
return '<img height="45" src="' + avatar + '">';
}
</script>
</head>
<body>
<p>Show:
<label><input type="checkbox" id="good_box" checked>good</label>
<label><input type="checkbox" id="bad_box" checked>bad</label>
<label><input type="checkbox" id="neutral_box" checked>neutral</label>
comments:</p>
<table id="comments_table">
<thead>
<tr>
<th>Date</th>
<th>Comment</th>
<th>Author</th>
<th>Rating</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>
I have posted this question at the DataTables forum as well.
The workaround for now is to make the 4th (nice) column searchable too and use the code
var nice = aData[1];
Here is the jsFiddle, which works with 1.9.4
I am building an application in which i am using the famous fullCalendar. Now i need to populate my calendar using the values that are present in my database. I am trying to do it using an AJAX call. But its not working . Any help would be appreciated.
This is my jsp . The one which im using to display my calendar.
<!DOCTYPE html>
<html>
<head>
<link href='css/fullcalendar.css' rel='stylesheet' />
<link href='css/fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='js/jquery.min.js'></script>
<script src='js/jquery-ui.custom.min.js'></script>
<script src='js/fullcalendar.min.js'></script>
<link href="jquery-ui-1.10.0.custom.css" rel="stylesheet" type="text/css" media = "all"/>
<link rel='stylesheet' type='text/css' href='cssdata/fullcalendar.css' />
<script src="js/jquery-1.9.0.js"></script>
<script src="js/jquery-ui-1.10.0.custom.min.js"></script>
<script type='text/javascript' src='js/fullcalendar.js'></script>
<pre>
<script>
$(document).ready(function() {
getEvents();
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
editable: true,
events: [ getEvents()
/* {
title: 'All Day Event',
start: new Date(y, m, 1)
}, */
]
});
});
function getEvents(){
alert("hi");
$.post("http://localhost:8080/S360Portal/eventAjax.action", {},
function(data){
alert("Hello");
alert(data);
});
}
</script>
<style>
body {
margin-top: 40px;
text-align: center;
font-size: 14px;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
}
#calendar {
width: 900px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
Try using eventSources instead of events, this considering your function is in fact returning any events. Why not use $.Ajax({}) instead of $.post? It will make your life easier.
Here's an example of how i do it:
EventSources array.
var sources = {
sourceone: {
url: ajaxcallURL(),
type: 'POST',
data: { 'year': y },
cache: false, //this is optional
color: '#6C92A8', //this is optional
textColor: 'white' //this is optional
}
}
In Fullcalendar call I have this:
var calendar = $('#calendar').fullCalendar({
...
eventSources: [sources.sourceone],
...
});
This works for me, notice that I'm returning JSON so if you are returning XML for example you will have to iterate the XML.
Also if your events returns Dates different from the accepted they wont be mapped in the calendar, ( yyyy-mm-dd ) works.
Good Luck
hey hi everyone i am try to insert new record using kendo grid.
it's work fine.
but i want to set hide and show.
when its new then hide second column.
only on this row not other all.
here is my code:-
<!DOCTYPE html>
<html>
<head>
<link href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.3.1315/js/kendo.all.min.js"></script>
<script>
$(document).ready(function () {
var users = [{ UserId: 1, UserName: "Robin", IsAdmin: true }
, { UserId: 2, UserName: "Hood", IsAdmin: false }];
var t = $("#grid").kendoGrid({
dataSource: { data: users, pageSize: 10 }// binding data
,pageable: true
, selectable: "multiple row"
, toolbar: ["create"]
, columns: [
{ field: "UserId" }
, { field: "UserName"},
{ command: "destroy", title: " ", width: "100px" }
],
editable: true,
edit: function(e)
{
if(e.model.isNew())
{
$("td:nth-child(2)").css("display","none");
}
}
});
});
</script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<input type="button" value="Iterate" onclick="iterate()"/>
<div id="grid"></div>
</body>
</html>
please help if is possible when insert new record hide there second td.
thanks.
Try this,
Below code set in document.ready
$(".k-button,.k-button-icontext,.k-grid-add").click(function(){
var activityGrid = $("#grid").data("kendoGrid");
activityGrid.hideColumn(1);
});
Updated Code:
var cnt = 1;
$(".k-button,.k-button-icontext,.k-grid-add").click(function () {
cnt = 0;
});
var hideFieldName = "UserName";
$(".k-textbox").live("focusin", function (e) {
if (cnt == 0) {
if ($(this).attr("name") == hideFieldName) {
if ($(this).closest('tr').index() == cnt) {
$(this).attr("readonly", "readonly");
}
}
}
});
So, below code worked as per your requirement. But in this case textbox was generated but user can't enter any value.
Let me know if any issue....
I am using J Vector Map (http://jvectormap.com/documentation/javascript-api/) to create a map of the United States.
What I want to be able to do is have a button for each state that you can click on and have the corresponding region in the map be selected (or unselected, if it already was selected). I am trying to use map.setSelectedRegion for this, but I can't get any of the code to work. Currently trying map.setSelectedRegion("US-CA") to no avail.
Any ideas on what to do?
Thanks!
There seem to be a lot of request for linking links with jvectormap.
I've put together a jsfiddle here: http://jsfiddle.net/3xZ28/117/
HTML
<ul id="countries">
<li>Romania</li>
<li>Australia</li>
</ul>
<div id="world-map" style="width: 600px; height: 400px"></div>
JS
var wrld = {
map: 'world_mill_en',
regionStyle: {
hover: {
"fill": 'red'
}
}
};
function findRegion(robj, rname) {
var code = '';
$.each(robj, function (key) {
if ( unescape(encodeURIComponent(robj[key].config.name)) === unescape(encodeURIComponent(rname)) ) {
code = key;
};
});
return code;
};
$(document).ready(function () {
$('#world-map').vectorMap(wrld);
var mapObj = $('#world-map').vectorMap('get', 'mapObject');
$('#countries').on('mouseover mouseout', 'a:first-child', function (event) {
// event.preventDefault();
var elem = event.target,
evtype = event.type,
cntrycode = findRegion(mapObj.regions, $(elem).text());
if (evtype === 'mouseover') {
mapObj.regions[cntrycode].element.setHovered(true);
} else {
mapObj.regions[cntrycode].element.setHovered(false);
};
});
});
Once you've set the handle
var mapObject = $('#your_map_div_id').vectorMap('get', 'mapObject');
Just use the built in function setSelectedRegions (mind the "s"):
mapObject.setSelectedRegions(your_region_code); //to set
mapObject.setSelectedRegions({your_region_code:false}); //to unset
If it still doesn't work, post your code, maybe it's something else.
This code is outdated, below is updated version of the code, according jvectormap latest API. Here is demo snippet:
<!DOCTYPE html>
<html>
<head>
<title>jVectorMap demo</title>
<link rel="stylesheet" href="jqvmap.min.css" type="text/css" media="screen"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="jquery.vmap.min.js"></script>
<script src="jquery.vmap.world.js"></script>
<script>
jQuery(document).ready(function () {
$('#vmap').vectorMap({
map: 'world_en',
backgroundColor: '#2f95c9',
color: '#ffffff',
hoverOpacity: 0.7,
selectedColor: '#666666',
enableZoom: true,
showTooltip: true,
scaleColors: ['#C8EEFF', '#006491'],
normalizeFunction: 'polynomial',
regionsSelectableOne: false,
regionsSelectable: false,
series: {
regions: [{
scale: ['#C8EEFF', '#0071A4'],
normalizeFunction: 'polynomial'
}]
}
});
var mapObj = $('#vmap').data('mapObject');
$('#countries').on('mouseover mouseout', 'a:first-child', function (event) {
// event.preventDefault();
var elem = event.target,
evtype = event.type;
if (evtype === 'mouseover') {
mapObj.select($(elem).attr('id'));
} else {
mapObj.deselect($(elem).attr('id'));
};
});
});
</script>
</head>
<body>
<ul id="countries">
<li><a id="RO" href="">Romania</a></li>
<li><a id="AU" href="">Australia</a></li>
</ul>
<div id="vmap" style="width: 100vw; height: 100vh;"></div>
</body>
</html>