Skip to content

Commit 67cf98f

Browse files
author
Kendo Bot
committed
Sync with Kendo UI Professional
1 parent c27c4ab commit 67cf98f

File tree

8 files changed

+177
-101
lines changed

8 files changed

+177
-101
lines changed

‎docs/knowledge-base/calendar-dynamically-display-selection.md‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
---
2+
title: Use Kendo Calendar widget in MultiSelect.
3+
description: An example on how to dynamically display the selected dates from the Calendar
4+
type: how-to
5+
page_title: Dynamically display the selected dates from the Calendar | Kendo UI Calendar
6+
slug: calendar-dynamically-display-selection
7+
tags: kendo, kendoui, calendar, multiselect, dynamical, select
8+
ticketid: 1145054
9+
res_type: kb
10+
---
11+
12+
## Environment
13+
<table>
14+
<tr>
15+
<td>Product Version</td>
16+
<td>2017.3 1026</td>
17+
</tr>
18+
<tr>
19+
<td>Product</td>
20+
<td>Calendar for ASP.NET Core</td>
21+
</tr>
22+
</table>
23+
24+
25+
## Description
26+
In order to have the Kendo UI Calendar display its selected dates dynamically in another widget/container, you should follow the next steps:
27+
28+
1. Enable the multiple selection of the Calendar through its selectable property (set to "multiple")
29+
2. Subscribe for the Change event of the Calendar
30+
3. Update a preferable container by appending the selected values of the Calender with span elements
31+
32+
```html
33+
<div class="demo-section k-content" style="text-align: center;">
34+
<div id="result" style="width:300px; margin:0 auto;"></div>
35+
36+
<div id="calendar"></div>
37+
</div>
38+
<script>
39+
$(document).ready(function() {
40+
41+
$("#calendar").kendoCalendar({
42+
selectable: "multiple",
43+
change: onChange
44+
});
45+
})
46+
47+
function onChange(e) {
48+
49+
var dates = e.sender.selectDates()
50+
updateResult(dates);
51+
}
52+
53+
function updateResult(dates) {
54+
if (dates.length > 0) {
55+
var result = "";
56+
for (var i = 0; i < dates.length; i++) {
57+
var newdate = kendo.toString(dates[i], "yyyy/MM/dd");
58+
result += "<span class='selectedName'>" + newdate + "</span>";
59+
}
60+
} else {
61+
result = "No dates selected.";
62+
}
63+
$("#result").html(result);
64+
}
65+
</script>
66+
<style>
67+
#result {
68+
padding-bottom: 15px;
69+
}
70+
71+
#result:after {
72+
content: '';
73+
display: block;
74+
clear: both;
75+
}
76+
77+
.selectedName {
78+
padding: 5px 10px;
79+
background: #aaa;
80+
color: white;
81+
float: left;
82+
margin-right: 5px;
83+
margin-bottom: 5px;
84+
border-radius: 10px;
85+
}
86+
</style>
87+
```

‎styles/web/common/button.less‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
line-height: 1.72em;
1212
text-align: center;
1313
text-decoration: none;
14+
display: inline-flex;
1415
overflow: hidden;
1516
align-items: center;
1617
justify-content: center;

‎styles/web/common/dialog.less‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@
4040
{
4141
margin: 0;
4242
padding: 1.8em 1em 1.8em 1em;
43+
height: auto;
4344
}
4445

4546
.k-dialog.k-dialog-titleless .k-content
@@ -63,7 +64,6 @@
6364
.k-button {
6465
display: inline-block;
6566
text-overflow: ellipsis;
66-
display: inline-block;
6767
}
6868

6969
&.k-dialog-button-layout-stretched {

‎styles/web/common/tabstrip.less‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@
7575
.k-tabstrip-top > .k-tabstrip-items .k-state-active,
7676
.k-panelbar .k-tabstrip-top > .k-tabstrip-items .k-state-active {
7777
border-bottom-width: 1px;
78-
margin-bottom: -2px;
78+
margin-bottom: -1px;
7979
padding-bottom: 0px;
8080
}
8181

‎styles/web/common/window.less‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -145,9 +145,8 @@ div.k-window-iframecontent
145145
border-width: 1px 0 0;
146146
border-style: solid;
147147
position: relative;
148-
bottom: -1em;
149148
padding: .6em;
150-
margin: 0 -1em;
149+
margin: 0 -1em -1em;
151150

152151
.k-button {
153152
display: inline-block;

‎styles/web/kendo.rtl.less‎

Lines changed: 85 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -381,127 +381,117 @@
381381
}
382382

383383
/* Gantt*/
384+
.k-rtl {
385+
.k-gantt .k-grid-header .k-header {
386+
text-align: center;
387+
}
384388

385-
.k-rtl .k-gantt .k-grid-header .k-header
386-
{
387-
text-align: center;
388-
}
389+
.k-gantt-actions {
390+
float: right;
391+
margin-right: 0;
392+
margin-left: .6em;
393+
}
389394

390-
.k-rtl .k-gantt-actions
391-
{
392-
float: right;
393-
margin-right: 0;
394-
margin-left: .6em;
395-
}
395+
.k-gantt-toolbar > .k-gantt-views {
396+
float: left;
397+
margin-left: 0;
398+
}
396399

397-
.k-rtl .k-gantt-toolbar > .k-gantt-views
398-
{
399-
float: left;
400-
margin-left: 0;
401-
}
400+
button.k-gantt-toggle {
401+
float: right;
402+
margin-right: 0;
403+
margin-left: .5em;
404+
}
402405

403-
.k-rtl button.k-gantt-toggle
404-
{
405-
float: right;
406-
margin-right: 0;
407-
margin-left: .5em;
408-
}
406+
.k-gantt-edit-form .k-edit-buttons .k-gantt-delete {
407+
float: right;
408+
}
409409

410+
.k-gantt-toolbar li:first-child + li,
411+
.k-gantt-toolbar li:first-child + li > .k-link {
412+
border-top-left-radius: 0;
413+
border-bottom-left-radius: 0;
414+
border-top-right-radius: 4px;
415+
border-bottom-right-radius: 4px;
416+
}
410417

418+
.k-gantt-toolbar li:last-child,
419+
.k-gantt-toolbar li:last-child > .k-link {
420+
border-top-left-radius: 4px;
421+
border-bottom-left-radius: 4px;
422+
border-top-right-radius: 0;
423+
border-bottom-right-radius: 0;
424+
}
411425

412-
/* Grid */
426+
.k-gantt-toolbar li:last-child {
427+
border-left-width: 1px;
428+
}
413429

414-
.k-rtl .k-grid tbody td:last-child,
415-
.k-rtl .k-grid thead th:last-child
416-
{
417-
border-left-width: 0;
418-
}
430+
.k-gantt-toolbar li:first-child {
431+
border-left-width: 0;
432+
}
419433

420-
.k-rtl .k-timeline .k-grid-header-wrap
421-
{
422-
border-left-width: 1px;
423-
}
434+
.k-gantt-rows,
435+
.k-gantt-columns,
436+
.k-gantt-dependencies {
437+
left: auto;
438+
right: 0;
439+
}
424440

425-
.k-rtl .k-gantt-toolbar li:last-child,
426-
.k-rtl .k-gantt-toolbar li:last-child > .k-link
427-
{
428-
border-top-left-radius: 4px;
429-
border-bottom-left-radius: 4px;
430-
border-top-right-radius: inherit;
431-
border-bottom-right-radius: inherit;
432-
}
441+
.k-task-complete {
442+
right: 0;
443+
left: auto;
444+
}
433445

434-
.k-rtl .k-gantt-toolbar li:last-child
435-
{
436-
border-left-width: 1px;
437-
}
446+
.k-task-template {
447+
padding: .2em .6em .2em 1.4em;
448+
}
438449

439-
.k-rtl .k-gantt-toolbar li:first-child
440-
{
441-
border-left-width: 0;
442-
}
450+
.k-task-single {
451+
text-align: right;
452+
}
443453

444-
.k-rtl .k-gantt-toolbar li:first-child,
445-
.k-rtl .k-gantt-toolbar li:first-child > .k-link
446-
{
447-
border-top-left-radius: inherit;
448-
border-bottom-left-radius: inherit;
449-
border-top-right-radius: 4px;
450-
border-bottom-right-radius: 4px;
451-
}
454+
.k-task-actions {
455+
right: auto;
456+
left: 4px;
457+
}
452458

453-
.k-rtl .k-gantt-rows,
454-
.k-rtl .k-gantt-columns,
455-
.k-rtl .k-gantt-dependencies
456-
{
457-
left: auto;
458-
right: 0;
459-
}
459+
.k-task-dot:after {
460+
margin-right: 4px;
461+
margin-left: 0;
462+
}
460463

461-
.k-rtl .k-task-complete
462-
{
463-
right: 0;
464-
left: auto;
465-
}
464+
.k-task-start {
465+
right: 0;
466+
left: auto;
467+
}
466468

467-
.k-rtl .k-task-template
468-
{
469-
padding: .2em .6em .2em 1.4em;
470-
}
469+
.k-task-end {
470+
left: 0;
471+
right: auto;
472+
}
471473

472-
.k-rtl .k-task-single
473-
{
474-
text-align: right;
474+
.k-resources-wrap {
475+
margin-left: 0;
476+
margin-right: 20px;
477+
}
475478
}
476479

477-
.k-rtl .k-task-actions
478-
{
479-
right: auto;
480-
left: 4px;
481-
}
482480

483-
.k-rtl .k-task-dot:after
484-
{
485-
margin-right: 4px;
486-
margin-left: 0;
487-
}
488481

489-
.k-rtl .k-task-start
490-
{
491-
right: 0;
492-
left: auto;
493-
}
494482

495-
.k-rtl .k-task-end
483+
484+
/* Grid */
485+
486+
.k-rtl .k-grid tbody td:last-child,
487+
.k-rtl .k-grid thead th:last-child
496488
{
497-
left: 0;
498-
right: auto;
489+
border-left-width: 0;
499490
}
500491

501-
.k-rtl .k-resources-wrap
492+
.k-rtl .k-timeline .k-grid-header-wrap
502493
{
503-
margin-left: 0;
504-
margin-right: 20px;
494+
border-left-width: 1px;
505495
}
506496

507497
/* Menu */

‎styles/web/type-material.less‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -361,7 +361,7 @@ input.k-textbox,
361361
textarea.k-textbox,
362362
input.k-textbox:hover,
363363
textarea.k-textbox:hover,
364-
.k-textbox > input,
364+
.k-textbox > input
365365
{
366366
background: none;
367367
}

‎styles/web/type-nova.less‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2421,7 +2421,6 @@ html .km-pane-wrapper .km-widget,
24212421

24222422
.k-listbox {
24232423
.k-list-scroller {
2424-
margin: 0;
24252424
border-color: @widget-border-color;
24262425
background-color: @background;
24272426
}

0 commit comments

Comments
 (0)