Skip to content

Commit d50ac0d

Browse files
ggkrustevggkrustev
committed
Add AngularJS how-to demos for Scheduler
1 parent 7dd3cb6 commit d50ac0d

File tree

2 files changed

+179
-0
lines changed

2 files changed

+179
-0
lines changed

‎web/scheduler/how-to/AngularJS/show-tooltip.md

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
---
2+
title: Show a tooltip upon event hover
3+
page_title: Show a tooltip upon event hover
4+
description: Show a tooltip upon event hover
5+
---
6+
7+
# Show a tooltip upon event hover
8+
9+
The example below demonstrates how to add a tooltip that opens on event hover and shows additional metadata.
10+
11+
#### Example:
12+
13+
```html
14+
<div id="example" ng-app="KendoDemos">
15+
<div ng-controller="MyCtrl">
16+
<div kendo-tooltip k-content="theContent" k-filter="'.k-event'" class="k-group">
17+
<div kendo-scheduler k-options="schedulerOptions">
18+
<span k-event-template class='custom-event'>{{dataItem.title}}</span>
19+
<div k-all-day-event-template class='custom-all-day-event'>{{dataItem.title}}</div>
20+
</div>
21+
</div>
22+
</div>
23+
</div>
24+
25+
<script id="template" type="text/x-kendo-template">
26+
#var uid = target.attr("data-uid");#
27+
#var scheduler = target.closest("[data-role=scheduler]").data("kendoScheduler");#
28+
#if (scheduler) {#
29+
#var model = scheduler.occurrenceByUid(uid);#
30+
31+
#if(model) {#
32+
<strong>event start:</strong> #=kendo.format('{0:d}',model.start)#<br />
33+
<strong>event end:</strong> #=kendo.format('{0:d}',model.end)#<br />
34+
<strong>event description:</strong> #=model.description#<br />
35+
#} else {#
36+
<strong>No event data is available</strong>
37+
#}#
38+
#}#
39+
</script>
40+
<script>
41+
angular.module("KendoDemos", [ "kendo.directives" ])
42+
.controller("MyCtrl", function($scope){
43+
$scope.theContent = kendo.template($("#template").html());
44+
$scope.schedulerOptions = {
45+
date: new Date("2013/6/13"),
46+
startTime: new Date("2013/6/13 07:00 AM"),
47+
height: 600,
48+
views: [
49+
"day",
50+
{ type: "workWeek", selected: true },
51+
"week",
52+
"month",
53+
],
54+
timezone: "Etc/UTC",
55+
dataSource: {
56+
batch: true,
57+
transport: {
58+
read: {
59+
url: "http://demos.telerik.com/kendo-ui/service/tasks",
60+
dataType: "jsonp"
61+
},
62+
update: {
63+
url: "http://demos.telerik.com/kendo-ui/service/tasks/update",
64+
dataType: "jsonp"
65+
},
66+
create: {
67+
url: "http://demos.telerik.com/kendo-ui/service/tasks/create",
68+
dataType: "jsonp"
69+
},
70+
destroy: {
71+
url: "http://demos.telerik.com/kendo-ui/service/tasks/destroy",
72+
dataType: "jsonp"
73+
},
74+
parameterMap: function(options, operation) {
75+
if (operation !== "read" && options.models) {
76+
return {models: kendo.stringify(options.models)};
77+
}
78+
}
79+
},
80+
schema: {
81+
model: {
82+
id: "taskId",
83+
fields: {
84+
taskId: { from: "TaskID", type: "number" },
85+
title: { from: "Title", defaultValue: "No title", validation: { required: true } },
86+
start: { type: "date", from: "Start" },
87+
end: { type: "date", from: "End" },
88+
startTimezone: { from: "StartTimezone" },
89+
endTimezone: { from: "EndTimezone" },
90+
description: { from: "Description" },
91+
recurrenceId: { from: "RecurrenceID" },
92+
recurrenceRule: { from: "RecurrenceRule" },
93+
recurrenceException: { from: "RecurrenceException" },
94+
ownerId: { from: "OwnerID", defaultValue: 1 },
95+
isAllDay: { type: "boolean", from: "IsAllDay" }
96+
}
97+
}
98+
},
99+
filter: {
100+
logic: "or",
101+
filters: [
102+
{ field: "ownerId", operator: "eq", value: 1 },
103+
{ field: "ownerId", operator: "eq", value: 2 }
104+
]
105+
}
106+
},
107+
resources: [
108+
{
109+
field: "ownerId",
110+
title: "Owner",
111+
dataSource: [
112+
{ text: "Alex", value: 1, color: "#f8a398" },
113+
{ text: "Bob", value: 2, color: "#51a0ed" },
114+
{ text: "Charlie", value: 3, color: "#56ca85" }
115+
]
116+
}
117+
]
118+
};
119+
})
120+
</script>
121+
```

‎web/scheduler/how-to/AngularJS/wrap-in-custom-directive.md

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
---
2+
title: Wrap Scheduler in a custom directive
3+
page_title: Wrap Scheduler in a custom directive
4+
description: Render Kendo UI Scheduler using a custom AngularJS directive
5+
---
6+
7+
# Render Kendo UI Scheduler using a custom AngularJS directive
8+
9+
The example below demonstrates how to render the scheduler using a custom directive.
10+
11+
#### Example:
12+
13+
```html
14+
<div id="example" ng-app="KendoDemos">
15+
<div class="demo-section k-content" ng-controller="MyCtrl">
16+
<h4>Select product</h4>
17+
<people-scheduler event-source="events"></people-scheduler>
18+
</div>
19+
</div>
20+
21+
<script>
22+
angular
23+
.module("KendoDemos", [ "kendo.directives" ])
24+
.controller("MyCtrl", function($scope){
25+
var dataEvents = [
26+
{ id:1, title:"[email protected]", start: new Date(), end: new Date() },
27+
{ id:2, title:"[email protected]", start: new Date(), end: new Date() }
28+
];
29+
30+
$scope.events = new kendo.data.SchedulerDataSource({
31+
transport: {
32+
read: function(options) {
33+
options.success(dataEvents);
34+
}
35+
}
36+
});
37+
})
38+
.directive( 'peopleScheduler',
39+
function() {
40+
return {
41+
restrict: 'E',
42+
replace: true,
43+
scope: {
44+
source: "=eventSource",
45+
},
46+
47+
controller: function($scope, $timeout) {
48+
$scope.schedulerOptions = {
49+
date: new Date(),
50+
dataSource: $scope.source
51+
};
52+
},
53+
template: '<div kendo-scheduler k-options="schedulerOptions"></div>'
54+
}
55+
}
56+
);
57+
</script>
58+
```

0 commit comments

Comments
 (0)