HelloI need to use Schedule Grouped Appointment control in my
project. I try to learn how to use it - copy the sample and
cannot see any output in the browser. Resulting page is always empty.
What i'm doing wrong? I've spent all day trying many settings but without success.
Please help :)
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Schedule JS Mulitple Resource Functionalities</title>
<meta name="viewport" charset="utf-8" content="width=device-width, initial-scale=1.0" />
<link rel='nofollow' href="../content/bootstrap.min.css" rel="stylesheet" />
<link rel='nofollow' href="//cdn.syncfusion.com/16.4.0.42/js/web/flat-azure/ej.web.all.min.css" rel="stylesheet" />
<link rel='nofollow' href="../content/default.css" rel="stylesheet" />
<link rel='nofollow' href="../content/default-responsive.css" rel="stylesheet" />
<link rel='nofollow' href="//cdn.syncfusion.com/16.4.0.42/js/web/responsive-css/ej.responsive.css" rel="stylesheet" />
<!--[if lt IE 9]>
<script type="text/javascript" src="//cdn.syncfusion.com/js/assets/external/jquery-1.11.3.min.js" ></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--<![endif]-->
<script src="../scripts/jsrender.min.js"></script>
<script src="//cdn.syncfusion.com/16.4.0.42/js/web/ej.web.all.min.js" type="text/javascript"></script>
<script src="../scripts/properties.js" type="text/javascript"></script>
<script src="../scripts/jsonscheduledata.js" type="text/javascript"></script>
</head>
<body>
<div class="content-container-fluid">
<div class="row">
<div style="float: left" id="Schedule1"></div>
</div> </br>
<div id="sampleProperties">
<div class="prop-grid">
<div class="row">
<div class="col-md-3">Orientation</div>
<div class="col-md-3">
<select name="selectIndex" class="e-ddl" id="orientation">
<option value="horizontal">Horizontal</option>
<option value="vertical" >Vertical</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
var dManager = ej.DataManager($.extend(true, [], window.GroupResourcesData)).executeLocal(ej.Query().take(10));
$("#sampleProperties").ejPropertiesPanel();
$("#Schedule1").ejSchedule({
width: "100%",
height: "525px",
currentDate: new Date(2017, 5, 5),
showCurrentTimeIndicator: false,
currentView: ej.Schedule.CurrentView.Workweek,
group: {
resources: ["Owners"],
allowGroupEditing: true
},
resources: [{
field: "ownerId",
title: "Owner",
name: "Owners", allowMultiple: true,
resourceSettings: {
dataSource: [
{ text: "Nancy", id: 1, groupId: 1, color: "#f8a398" },
{ text: "Steven", id: 3, groupId: 2, color: "#56ca85" },
{ text: "Michael", id: 5, groupId: 1, color: "#51a0ed" }
],
text: "text", id: "id", groupId: "groupId", color: "color"
}
}],
appointmentSettings: {
dataSource: dManager,
id: "Id",
subject: "Subject",
startTime: "StartTime",
endTime: "EndTime",
description: "Description",
allDay: "AllDay",
recurrence: "Recurrence",
recurrenceRule: "RecurrenceRule",
resourceFields: "ownerId"
}
});
$("#orientation").ejDropDownList({ selectedItemIndex: 1, select: "orientation", width: "100px" });
});
function orientation(args) {
$("#Schedule1").ejSchedule({ orientation: args.value });
}
</script>
<style>
.row .cols-prop-area {
margin-left: 0px;
width: 100%;
}
</style>
</body>
</html>
