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. Image for the cookie policy date

How to hide views buttons andmake resource header with parent resource smaller

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

7 Replies

KK Karthigeyan Krishnamurthi Syncfusion Team April 7, 2017 02:37 PM UTC

Hi Jan 
  
Thank you for contacting Syncfusion support. 
 
We have prepared the sample to hide view buttons which can be viewed from the below link. 
 
It is not possible to reduce the top space and width as they will result in misalignment based on the resource name length. Kindly refer the below code example used in the sample. 
 
<Code> 
$scope.onCreate = function (args) { // this function will be called during the initial load 
            $(".e-commonviewbutton").css("display", "none"); 
        } 
</Code> 
 
Regards, 
Karthigeyan 
  



JM Jan Maticka April 9, 2017 11:45 AM UTC

Hi Karthigeyan,

works fine for me, thanks a lot for your help. I have sorted out as well the width of resource header problem with overriding css class. But I found out another issue I cannot solve by myself. I would like to change background color of e-resourceheadercells. I have tried this, but does not work:
    
<script id="workCellTemplate" type="text/x-jsrender">
        {{if classname == 'e-resourceheadercells'}}
        <div style="background:grey;height:100%">
        </div>
        {{/if}}
    </script>

and the second thing is I would like to change cursor of mouse when hovering over e-childworkcell to hand pointer. I have attached some screens for these 2 issues.

I would appreciate your assistance.

HTML code:

<ej-schedule id="RidesSchedule"
                 e-appointmentTemplateId="#eventTemplate"
                 e-resourceHeaderTemplateId="#resTemplate"
                 e-workCellsTemplateId="#workCellTemplate"
                 e-workTemplateId=""
                 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-create="onCreate"
                 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="workCellTemplate" type="text/x-jsrender">
        {{if classname == 'e-resourceheadercells'}}
        <div style="background:grey;height:100%">
        </div>
        {{/if}}
    </script>

    <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>

    <script id="resTemplate" type="text/x-jsrender">
        <div style="height:100%">
            <div>
                {{if classname == 'e-childnode'}}
                <div style="width:15px;height:15px;margin-right:5px;margin-top:3px;float:left;"></div>
                {{/if}}
                <div>{{:text}}</div>
            </div>
        </div>

    </script>

Attachment: screens_1b71c619.zip


KK Karthigeyan Krishnamurthi Syncfusion Team April 10, 2017 05:51 AM UTC

Hi Jan 
 
Thanks for your update. 
 
We have prepared the sample to customize both the resource header cells and mouse pointer as per requirement which can be download from the below location. 
 
Kindly refer the below code example used in the sample. 
 
<Code> 
<style> 
       .e-schedule .e-childworkcell{ 
           cursor: pointer; 
       } 
</style> 
$scope.onCreate = function (args) { // this function will be called during the initial load 
               $(".e-commonviewbutton").css("display","none");  
               $(".e-resourceheadercells").css("background-color", "grey");   
               } 
</Code> 
 
Regards, 
Karthigeyan 



JM Jan Maticka April 18, 2017 01:08 PM UTC

Hi Karthigeyan,

Thank you very much, it works.

One last question is it possible to set schedule height relatively to the screen resolution?

Kind regards

Jan


KK Karthigeyan Krishnamurthi Syncfusion Team April 19, 2017 10:10 AM UTC

Hi Jan, 
   
We are happy that our solution has fulfilled your requirement. 
   
Kindly use the below code example to set the schedule height based on the screen resolution and for the same we have prepared the below sample. 
 
<Code> 
e-height="height" 
$scope.height = window.outerHeight; 
</Code> 
 
Regards,   
Karthigeyan  
 



JM Jan Maticka April 21, 2017 05:45 AM UTC

Hi Karthigeyan,

Perfect, thank you very much.

Wish you nice weekend.

Regards

Jan


KK Karthigeyan Krishnamurthi Syncfusion Team April 24, 2017 04:22 AM UTC

Hi Jan 
    
We are happy to hear from you.  
 
Please let us know if you need further assistance. 
 
Regards, 
Karthigeyan 


Loader.
Live Chat Icon For mobile
Up arrow icon