Is there a way to make the height of the rows - from 183359

[alexis garcia]

alexis garciaJuly 10, 2023 01:50 PM UTC

 Is there a way to make the height of the rows (resources and working cells) that have no appointments to have a height of 10px (example)?

I did achieve this but manipulating css class's wont work because the appointments wont ''move'' with the rows. 

Thanks again for the amazing help!

[Venkateshwaran Saravanakumar]

Hi Alexis,

UG:

Cell Dimension: https://ej2.syncfusion.com/vue/documentation/schedule/cell-customization#setting-cell-dimensions-in-all-views

Row Auto Height: https://ej2.syncfusion.com/vue/documentation/schedule/row-auto-height

Demos:

Cell Dimension: https://ej2.syncfusion.com/vue/demos/#/bootstrap5/schedule/cell-dimension.html

Row Auto Height: https://ej2.syncfusion.com/vue/demos/#/bootstrap5/schedule/adaptive-rows.html

To render the Schedule rows without appointments in lesser height and change the height of the row based on appointment count you have to set the rowAutoHeight property of the Schedule to true and need to override the default styles of the Schedule with help of cssClass property as highlighted in the below code snippet. Refer to the shared UG and Demo links for more information.

[App.vue]

<template>

  <div id='app'>

    <ejs-schedule ref='scheduleObj' cssClass='schedule-cell-dimension' width='100%' :rowAutoHeight='rowAutoHeight'>

    </ejs-schedule>

  </div>

</template>

 

<script>

export default {

  name: "App",

  data() {

    return {

      rowAutoHeight: true,

    };

  },

};

 

</script>

 

<style>

.schedule-cell-dimension.e-schedule .e-timeline-view .e-work-cells,

.schedule-cell-dimension.e-schedule .e-timeline-month-view .e-work-cells,

.schedule-cell-dimension.e-schedule .e-timeline-view .e-resource-cells,

.schedule-cell-dimension.e-schedule .e-timeline-month-view .e-resource-cells {

  height: 26px;

}

</style>

Regards,
Venkatesh 

Attachment: VueScheduler_9fa46c0e.zip

[alexis garcia]

.schedule-cell-dimension.e-schedule .e-timeline-view .e-work-cells,

.schedule-cell-dimension.e-schedule .e-timeline-month-view .e-work-cells,

.schedule-cell-dimension.e-schedule .e-timeline-view .e-resource-cells,

.schedule-cell-dimension.e-schedule .e-timeline-month-view .e-resource-cells {

  height: 20px !important;

}

<ejs-schedule id='Schedule' ref="ScheduleObj" height="90vh" :cssClass='cssClass'

                    :rowAutoHeight='rowAutoHeight' :selectedDate='selectedDate' :eventSettings='eventSettings'

                        :group='group' :currentView='currentView' :actionBegin="onActionBegin" :popupOpen="popupOpen"

                        @dataBound="onDataBound" :timeScale="timeScale" :dragStop="onDragStop" :timezone="'Europe/London'"

                        @resizeStart="resizeStart" :showHeaderBar='showHeaderBar' :resizeStop="onResizeStop"

                        @actionComplete="onActionComplete" @eventRendered='onEventRendered' @resize="onResize"

                        @cellClick="onCellClick" @select="onSelect" @renderCell="onRenderCell"

                        :editorTemplate="'editorTemplate'" :headerRow="headerRow" >

it is applying the cssclass even to those who have apointments.

it looks like it wont work anyway because the tables g

[Venkateshwaran Saravanakumar]

Alexis,

You can resolve the issue by removing the ‘!important’ declaration from the custom styles provided. If it is given, the rowAutoHeight property won't work. Additionally, you need to adjust the height of the resourceText if provided cell height is lesser than the resourceText height as demonstrated in the code snippet below, to adjust the resource cells accordingly with the work cells.

[App.vue]

.schedule-cell-dimension.e-schedule .e-timeline-view .e-work-cells,

.schedule-cell-dimension.e-schedule .e-timeline-month-view .e-work-cells,

.e-schedule .e-timeline-view .e-resource-cells,

.e-schedule .e-timeline-month-view .e-resource-cells {

  height: 20px;

}

 

.schedule-cell-dimension.e-schedule .e-timeline-view .e-resource-text, .e-schedule .e-timeline-month-view .e-resource-text{

  font-size: 7px;

}

 

Output:

Regards,
Venkatesh