We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
<body ng-controller="ScheduleCtrl">
<div class="content-container-fluid">
<div class="row">
<div class="cols-sample-area">
<ej-schedule style="float: left" id="Schedule1" e-appointmentsettings-datasource="appointments" e-appointmentsettings-id="Id" e-appointmentsettings-subject="Subject" e-appointmentsettings-starttime="StartTime"
e-appointmentsettings-endtime="EndTime" e-appointmentsettings-description="Description" e-appointmentsettings-allday="AllDay" e-appointmentsettings-recurrence="Recurrence" e-appointmentsettings-recurrencerule="RecurrenceRule"
e-appointmentsettings-categorize="Categorize" e-categorizesettings="categorizeItems" e-width="100%" e-height="525px" e-currentview="drpvalue" e-currentdate="setDate" e-appointmenthover="readOnlyChange" e-appointmentclick="readOnlyChange" e-appointmentwindowopen="readOnlyChange" e-appointmentdeleted="readOnlyChange" e-resizestop="readOnlyChange" e-dragstop="readOnlyChange">
</ej-schedule>
</div>
</div>
</div>
<div>
</div>
<script>
window.Default = [{
Id: 100,
Subject: "Bering Sea Gold",
StartTime: new Date(2014, 4, 2, 06, 00),
EndTime: new Date(2014, 4, 2, 08, 00),
Description: "",
AllDay: false,
Recurrence: true,
RecurrenceRule: "FREQ=DAILY;INTERVAL=2;COUNT=10",
Categorize: "1"
},
-----------------------------
-----------------------------
{
Id: 109,
Subject: "MayDay",
StartTime: new Date(2014, 3, 30, 06, 30),
EndTime: new Date(2014, 3, 30, 07, 30),
Description: "",
AllDay: false,
Recurrence: false,
Categorize: "1"
}
];
var list = [
{ empid: "day", text: "Day", value: "day" },
{ empid: "week", text: "Week", value: "week" },
{ empid: "workweek", text: "Work Week", value: "workweek" },
{ empid: "month", text: "Month", value: "month" }
];
// The following code snippets is to bind the categorize values to the Schedule control
var StatusItems = {
enable: true,
allowMultiple: true,
dataSource: [
{ text: "Completed", id: 1, color: "#7499e1", fontColor: "red" },
{ text: "Not Started", id: 2, color: "#7cce6e", fontColor: "white" },
],
text: "text", id: "id", color: "color", fontColor: "fontColor"
};
angular.module('syncApp', ['ejangular'])
.controller('ScheduleCtrl', function ($scope) {
$scope.appointments = window.Default;
$scope.dataList = list;
$scope.setDate = new Date(2014, 4, 5);
$scope.drpvalue = "week";
$scope.categorizeItems = StatusItems; // Here we are assigning the categorize items to the angular scope variable
});
// The following code block is used to make the appointment as readonly
function readOnlyChange(args) {
if (args.originalEventType != "cellDoubleClick") {
var data = ej.DataManager(this.model.categorizeSettings.dataSource).executeLocal(new ej.Query().where("id", "equal", args.appointment.Categorize))
for (var i = 0; i < data.length; i++) {
if (data[i].text == "Completed")
args.cancel = true;
}
}
} </script>
</body>
</code>
Please let us know if you need any further assistance on this.
Regards,
Velmurugan
