Month View Cell Height and Appointment Height

[Charles Matvchuk]

I am using Month View of the Scheduler and I need to increase the cell height of each day to show more appointments also I need each appointment to be able to grow in height if the text is longer than the width.  Also to set height of appointment.

[Ashokkumar Karuppasamy]

Hi Charles Matvchuk,

We have prepare the sample for achieving your requirement for adjusting the cell height by overriding the default schedule CSS styles. Refer the below shared styles. Also we suggest you to use the MaxEventsPerRow property to control the number of events rendered in each cell. Refer the below shared code snippet and try our shared sample. Let us know if you need any further assistance.

Sample: https://blazor.syncfusion.com/demos/scheduler/cell-dimensions?theme=fluent

    <ScheduleViews>

        <ScheduleView MaxEventsPerRow="6" Option="View.Month"></ScheduleView>

    </ScheduleViews>

<style>

    .schedule-cell-dimension.e-schedule .e-vertical-view .e-date-header-wrap table col,

    .schedule-cell-dimension.e-schedule .e-vertical-view .e-content-wrap table col {

        width: 200px;

    }

 

    .schedule-cell-dimension.e-schedule .e-vertical-view .e-time-cells-wrap table td,

    .schedule-cell-dimension.e-schedule .e-vertical-view .e-work-cells {

        height: 100px;

    }

 

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

    .schedule-cell-dimension.e-schedule .e-month-view .e-date-header-wrap table col {

        width: 200px;

    }

 

    .schedule-cell-dimension.e-schedule .e-month-view .e-work-cells {

        height: 200px;

    }

 

    .schedule-cell-dimension.e-schedule .e-timeline-month-view .e-content-wrap table col,

    .schedule-cell-dimension.e-schedule .e-timeline-view .e-content-wrap table col {

        width: 100px;

    }

 

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

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

        height: 600px;

    }

</style>

Regards,
Ashok

Attachment: celldimention_35b78d9d.zip

[Charles Matvchuk]

How can I increase the height of the actual appointment, give it two rows or three depending on content.  I tried making the template height bigger but that doesn't work.  The hight: 50px does nothing.

 <ScheduleView Option="View.Month" MaxEventsPerRow="10">

     <EventTemplate>

         @{

             JobModel data = (context as JobModel);

             <div style="padding-top: 2px; padding-left: 2px;height:50px">

                 <span class="pe-1 fw-bold">@data?.QuoteWorkOrder</span> <span style="font-size:14px">@data.EventDisplay - @data.VenueDisplay</span>

             </div>

         }

     </EventTemplate>

 </ScheduleView>

[Venkateshwaran Saravanakumar]

Hi Charles,

According to the current architecture of the scheduler, it is not possible to dynamically adjust the height of appointments based on their text content. This limitation may lead to overlapping issues during dragging and resizing events. The scheduler requires fixed appointment heights.

If you wish to view the complete content of an appointment, it is recommended to utilize tooltips  by setting true to the EnableTooltip property within the ScheduleEventSettings. By hovering over an appointment, a tooltip can display the entire data, and you have the option to customize its appearance using the TooltipTemplate. For further details on implementing tooltips and customizing the TooltipTemplate in the scheduler, please refer to the provided User Guide documentation.

UG: https://blazor.syncfusion.com/documentation/scheduler/appointments#display-tooltip-for-appointments

https://blazor.syncfusion.com/documentation/scheduler/appointments#customizing-event-tooltip-using-template

If you have additional questions or require further assistance, feel free to let us know.

Regards,

Venkatesh

[Charles Matvchuk]

Alright. 

Is it possible to set the height to 50px of each appointment so they all are that height?  Looks like they are 26px and I cannot seem to find a way to make the a larger size fixed.

[Venkateshwaran Saravanakumar]

Charles,

Yes, it is possible. You can achieve your requirement of increasing the appointment height by overriding the default CSS styles of the scheduler as like the shared code snippet below.

<style>

    .e-schedule .e-month-view .e-appointment {

        height: 50px;

    }

</style>