Skip to content

Commit 41acd41

Browse files
kendo-botkendo-bot
committed
Sync with Kendo UI Professional
1 parent d2b8a06 commit 41acd41

File tree

4 files changed

+312
-91
lines changed

4 files changed

+312
-91
lines changed

‎docs-aspnet/html-helpers/scheduling/multiviewcalendar/events.md

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
---
2+
title: Events
3+
page_title: Events
4+
description: "Learn how to handle the events of the Telerik UI MultiViewCalendar component for {{ site.framework }}."
5+
slug: events_multiviewcalendar_aspnetcore
6+
position: 7
7+
---
8+
9+
# Events
10+
11+
The MultiViewCalendar exposes [`Change()` and `Navigate()` events](/api/kendo.mvc.ui.fluent/multiviewcalendareventbuilder) that you can handle.
12+
13+
For a complete example on basic MultiViewCalendar events, refer to the [demo on using the events of the MultiViewCalendar](https://demos.telerik.com/{{ site.platform }}/multiviewcalendar/events).
14+
15+
## Handling by Handler Name
16+
17+
The following example demonstrates how to subscribe to events by a handler name.
18+
19+
```HtmlHelper
20+
@(Html.Kendo().MultiViewCalendar()
21+
.Name("MultiViewCalendar")
22+
.Events(e => e
23+
.Change("calendar_change")
24+
.Navigate("calendar_navigate")
25+
)
26+
)
27+
<script>
28+
function calendar_navigate() {
29+
// Handle the navigate event.
30+
}
31+
32+
function calendar_change() {
33+
// Handle the change event.
34+
}
35+
</script>
36+
```
37+
{% if site.core %}
38+
```TagHelper
39+
<kendo-multiviewcalendar name="multiviewcalendar"
40+
on-change="calendar_change"
41+
on-navigate="calendar_navigate">
42+
</kendo-multiviewcalendar>
43+
<script>
44+
function calendar_navigate() {
45+
// Handle the navigate event.
46+
}
47+
48+
function calendar_change() {
49+
// Handle the change event.
50+
}
51+
</script>
52+
```
53+
{% endif %}
54+
55+
## Handling by Template Delegate
56+
57+
The following example demonstrates how to subscribe to events by a template delegate.
58+
59+
```HtmlHelper
60+
@(Html.Kendo().MultiViewCalendar()
61+
.Name("MultiViewCalendar")
62+
.Events(e => e
63+
.Change(@<text>
64+
function() {
65+
// Handle the change event inline.
66+
}
67+
</text>)
68+
.Navigate(@<text>
69+
function() {
70+
// Handle the navigate event inline.
71+
}
72+
</text>)
73+
)
74+
)
75+
```
76+
{% if site.core %}
77+
```TagHelper
78+
<kendo-multiviewcalendar name="multiViewCalendar"
79+
on-change='function() {
80+
//Handle the change event inline.
81+
}'
82+
on-navigate='function() {
83+
//Handle the navigate event inline.
84+
}'>
85+
</kendo-multiviewcalendar>
86+
```
87+
{% endif %}
88+
89+
## Next Steps
90+
91+
* [Configuring the Selection in the MultiViewCalendar (Demo)](https://demos.telerik.com/aspnet-core/multiviewcalendar/selection)
92+
93+
## See Also
94+
95+
* [Using the API of the MultiViewCalendar HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/multiviewcalendar/api)
96+
* [Server-Side API of the MultiViewCalendar](/api/multiviewcalendar)
97+
* [Client-Side API of the MultiViewCalendar](https://docs.telerik.com/kendo-ui/api/javascript/ui/multiviewcalendar)

‎docs-aspnet/html-helpers/scheduling/multiviewcalendar/getting-started.md

Lines changed: 201 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,201 @@
1+
---
2+
title: Getting Started
3+
page_title: Getting Started
4+
description: "Make your first steps with the Telerik UI for {{ site.framework }} MultiViewCalendar component by following a complete step-by-step tutorial."
5+
slug: aspnetcore_multiviewcalendar_getting_started
6+
position: 1
7+
---
8+
9+
# Getting Started with the MultiViewCalendar
10+
11+
This tutorial explains how to set up a basic Telerik UI for {{ site.framework }} MultiViewCalendar and highlights the major steps in the configuration of the component.
12+
13+
You will initialize a MultiViewCalendar and learn how to disable the selection of every Thursday from the week. Then, you will see how to attach an event handler to the component. {% if site.core %}Finally, you can run the sample code in [Telerik REPL](https://netcorerepl.telerik.com/) and continue exploring the component.{% endif %}
14+
15+
![Sample Telerik UI for {{ site.framework }} MultiViewCalendar](./images/multiviewcalendar-getting-started.png)
16+
17+
@[template](/_contentTemplates/core/getting-started-prerequisites.md#repl-component-gs-prerequisites)
18+
19+
## 1. Prepare the CSHTML File
20+
21+
@[template](/_contentTemplates/core/getting-started-directives.md#gs-adding-directives)
22+
23+
Optionally, you can structure the document by adding the desired HTML elements like headings, divs, paragraphs, and others.
24+
25+
```HtmlHelper
26+
@using Kendo.Mvc.UI
27+
28+
<h4>MultiViewCalendar with event handler</h4>
29+
30+
<p>
31+
32+
</p>
33+
```
34+
{% if site.core %}
35+
```TagHelper
36+
@addTagHelper *, Kendo.Mvc
37+
38+
<h4>MultiViewCalendar with event handler</h4>
39+
40+
<p>
41+
42+
</p>
43+
```
44+
{% endif %}
45+
46+
## 2. Initialize the MultiViewCalendar
47+
48+
Use the MultiViewCalendar HtmlHelper {% if site.core %}or TagHelper{% endif %} to add the component to a page:
49+
50+
* The `Name()` configuration method is mandatory as its value is used for the `id` and the `name` attributes of the MultiViewCalendar element.
51+
* The `Views()` configuration controls how many months will show at same time. By default, the value is two months.
52+
* The `Selectable()` configuration allows multiple or single selection of dates. By default, single selection is enabled.
53+
54+
```HtmlHelper
55+
@using Kendo.Mvc.UI
56+
57+
<h4>MultiViewCalendar with event handler</h4>
58+
59+
<p>
60+
@(Html.Kendo().MultiViewCalendar()
61+
.Name("multiViewCalendar")
62+
.Views(3)
63+
)
64+
</p>
65+
```
66+
{% if site.core %}
67+
```TagHelper
68+
@addTagHelper *, Kendo.Mvc
69+
70+
<h4>MultiViewCalendar with event handler</h4>
71+
72+
<p>
73+
<kendo-multiviewcalendar name="multiViewCalendar" views="3">
74+
</kendo-multiviewcalendar>
75+
</p>
76+
```
77+
{% endif %}
78+
79+
## 3. Enable Selection of Multiple Days
80+
81+
The next step is to configure the MultiViewCalendar to allow multiple selection. You can do that by using the `Selectable()` configuration.
82+
83+
```HtmlHelper
84+
@using Kendo.Mvc.UI
85+
86+
<h4>MultiViewCalendar with event handler</h4>
87+
88+
<p>
89+
@(Html.Kendo().MultiViewCalendar()
90+
.Name("multiViewCalendar")
91+
.Views(3)
92+
.Selectable("multiple")
93+
)
94+
</p>
95+
```
96+
{% if site.core %}
97+
```TagHelper
98+
@addTagHelper *, Kendo.Mvc
99+
100+
<h4>MultiViewCalendar with event handler</h4>
101+
102+
<p>
103+
<kendo-multiviewcalendar name="multiViewCalendar" views="3"
104+
selectable="multiple">
105+
</kendo-multiviewcalendar>
106+
</p>
107+
```
108+
{% endif %}
109+
110+
## 4. Handle a MultiViewCalendar Event
111+
112+
The MultiViewCalendar exposes a `Change()` event that you can handle and assign specific functions to the component. In this tutorial, you will use the `Change()` event to display a message when the user modifies the selected date.
113+
114+
```HtmlHelper
115+
@using Kendo.Mvc.UI
116+
117+
<script>
118+
function onChange(e) {
119+
var value = e.sender.selectDates()[0];
120+
console.log(value); // the first selected date in the MultiViewCalendar
121+
}
122+
</script>
123+
124+
<h4>MultiViewCalendar with event handler</h4>
125+
126+
<p>
127+
@(Html.Kendo().MultiViewCalendar()
128+
.Name("multiViewCalendar")
129+
.Views(3)
130+
.Selectable("multiple")
131+
.Events(e => e.Change("onChange"))
132+
)
133+
</p>
134+
```
135+
{% if site.core %}
136+
```TagHelper
137+
@addTagHelper *, Kendo.Mvc
138+
139+
<script>
140+
function onChange(e) {
141+
var value = e.sender.selectDates()[0];
142+
console.log(value); // the first selected date in the MultiViewCalendar
143+
}
144+
</script>
145+
146+
<h4>MultiViewCalendar with event handler</h4>
147+
148+
<p>
149+
<kendo-multiviewcalendar name="multiViewCalendar" views="3"
150+
selectable="multiple" on-change="onChange">
151+
</kendo-multiviewcalendar>
152+
</p>
153+
```
154+
{% endif %}
155+
156+
For more examples, refer to the [demo on using the events of the MultiViewCalendar](https://demos.telerik.com/{{ site.platform }}/multiviewcalendar/events).
157+
158+
## 5. (Optional) Reference Existing MultiViewCalendar Instances
159+
160+
You can reference the MultiViewCalendar instances that you have created and build on top of their existing configuration:
161+
162+
1. Use the `id` attribute of the component instance to establish a reference.
163+
164+
```script
165+
<script>
166+
var multiviewcalendarReference = $("#multiViewCalendar").data("kendoMultiViewCalendar"); // multiviewcalendarReference is a reference to the existing multiViewCalendar instance of the helper.
167+
</script>
168+
```
169+
170+
1. Use the [MultiViewCalendar client-side API](https://docs.telerik.com/kendo-ui/api/javascript/ui/multiviewcalendar#methods) to control the behavior of the widget. In this example, you will use the `enable` method to disable the multiviewcalendar.
171+
172+
```script
173+
<script>
174+
var multiviewcalendarReference = $("#multiViewCalendar").data("kendoMultiViewCalendar"); // multiviewcalendarReference is a reference to the existing timeMultiViewCalendar instance of the helper.
175+
var view = multiviewcalendarReference.view(); // Gets an instance of the current view used by the MultiViewCalendar.
176+
</script>
177+
```
178+
179+
For more information on referencing specific helper instances, see the [Methods and Events]({% slug methodevents_core %}) article.
180+
181+
{% if site.core %}
182+
## Explore this Tutorial in REPL
183+
184+
You can continue experimenting with the code sample above by running it in the Telerik REPL server playground:
185+
186+
* [Sample code with the MultiViewCalendar HtmlHelper](https://netcorerepl.telerik.com/QxuUbVay17tcipG514)
187+
* [Sample code with the MultiViewCalendar TagHelper](https://netcorerepl.telerik.com/mxEgPhao17C5ECa224)
188+
189+
{% endif %}
190+
191+
## Next Steps
192+
193+
* [Customize the Day Template of the MultiViewCalendar]({% slug day_template_multiviewcalendar_htmlhelper_aspnetcore %})
194+
* [Configure the MultiViewCalendar's Multiple Views]({% slug multiple_views_multiviewcalendar_htmlhelper_aspnetcore %})
195+
196+
## See Also
197+
198+
* [Using the API of the MultiViewCalendar for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/multiviewcalendar/api)
199+
* [Client-Side API of the MultiViewCalendar](https://docs.telerik.com/kendo-ui/api/javascript/ui/multiviewcalendar)
200+
* [Server-Side API of the MultiViewCalendar](/api/multiviewcalendar)
201+
* [Knowledge Base Section](/knowledge-base)

‎docs-aspnet/html-helpers/scheduling/multiviewcalendar/images/multiviewcalendar-getting-started.png

73.5 KB
Loading

0 commit comments

Comments
 (0)