Hello,
I would like to hide changing view buttons and make header (parent) resources a bit smaller. Then make resource header as wide as the text is. Please see the attached image for further details. Can you please help me? I would be grateful for your assistance.
HTML code:
<ej-schedule id="RidesSchedule"
e-appointmentTemplateId="#eventTemplate"
e-allowDragAndDrop="false"
e-enableAppointmentResize="false"
e-locale="cs-CZ"
e-width="100%"
e-height="525px"
e-orientation="horizontal"
e-currentdate="vm.viewDate"
e-views="vm.views"
e-currentview="vm.calendarView"
e-group="vm.group"
e-appointmentWindowOpen="vm.editEvent"
e-appointmentClick="vm.editPopup"
e-appointmentRemoved="vm.onAppointmentRemoved"
e-cellClick="vm.editEvent"
e-cellDoubleClick="vm.editEvent"
e-appointmentEditSeriesButtonClicked="vm.validateRide"
e-timeMode="24"
e-appointmentsettings-datasource="vm.rides"
e-appointmentsettings-id="rideId"
e-appointmentsettings-resourcefields="carTypeId, carId"
e-appointmentsettings-subject="subject"
e-appointmentsettings-starttime="startsAt"
e-appointmentsettings-endtime="endsAt"
e-appointmentsettings-description="description"
e-appointmentsettings-applytimeoffset="false"
e-appointmentsettings-allday="allDay"
e-appointmentsettings-recurrence="recurrence"
e-appointmentsettings-recurrencerule="recurrenceRule">
<e-resources>
<e-resource e-allowmultiple="false" e-field="carTypeId" e-title="CarType" e-name="CarTypes" e-resourcesettings="vm.carTypeResourcedata"></e-resource>
<e-resource e-allowmultiple="false" e-field="carId" e-title="Car" e-name="Cars" e-resourcesettings="vm.carResourcedata"></e-resource>
</e-resources>
</ej-schedule>
<script id="eventTemplate" type="text/x-jsrender">
<div style="height:100%; background-color:{{:color}};">
<div style="margin-left: 2px; font-size:1em; font-weight:bold">{{:subject}}</div>
</div>
</script>
short js code:
(function () {
"use strict";
angular
.module("app-rides")
.controller("calendarController", calendarController);
function calendarController($http, $scope, $window, $location, $routeParams, moment, alert, infoPopup) {
var vm = this;
vm.errorMessage = "";
if ($routeParams.msg) {
infoPopup.show($routeParams.msg);
$location.search("msg", null);
}//show popup only when create, delete or update happened
vm.userId = ""; //actual user id
vm.dispatcherId = ""; //selected dispatcher id
vm.dispatchers = []; //Collection for driver select
getDispatchers(); //get data on initialization
vm.calendarView = "Day";
vm.viewDate = new Date(); //date for calendar
vm.views = ["Day"]; //available views of scheduler
vm.rides = [];
vm.group = { //resource groupes
resources: ["CarTypes", "Cars"]
};
vm.carTypeResourcedata = {
dataSource: [],
text: "text", id: "id"
} //resource for cartypes
vm.carResourcedata = {
dataSource: [],
text: "text", id: "id", groupId: "groupId"
}; //resource for scheduler
$scope.$watch("vm.viewDate", function () { //when date changes get actual ride for day
getActualRides();
});
//get all car types
function getCarTypes() {
$http.get("/api/cars/cartypes")
.then(function (response) {
vm.carTypeResourcedata.dataSource = [];
//success
for (var i = 0; i < response.data.length; i++) {
var carType = {
text: response.data[i].displayName,
id: response.data[i].carTypeId
};
vm.carTypeResourcedata.dataSource.push(carType);
}
},
function (error) {
//failure
vm.errorMessage = "Failed to load data for car types" + error;
})
.finally(function () {
getCars();
});
}
//get cars as resource
function getCars() {
$http.get("/api/cars/owner/" + vm.dispatcherId)
.then(function (response) {
vm.carResourcedata.dataSource = [];
//success
for (var i = 0; i < response.data.length; i++) {
var car = {
text: response.data[i].internalNumber,
id: response.data[i].carId,
groupId: response.data[i].carTypeId
};
vm.carResourcedata.dataSource.push(car);
}
},
function (error) {
//failure
vm.errorMessage = "Failed to load data for cars" + error;
}).finally(function () {
getActualRides();
});
}
Attachment:
scheduler_f3dc06a3.rar