Schedulet to ocupy full height of the page?

[Molier de Ritoi]

I have modified "FetchData.razor" from the defaul Blazor template, to fill it with the SfScheduler, but it does not occupy full height.

@page "/fetchdata"

@using Syncfusion.Blazor.Schedule

<div class="col-lg-12 control-section">

    <div class="schedule-wrapper">

        <SfSchedule TValue="AppointmentData" @ref="ScheduleRef" Width="100%" Height="100%" @bind-SelectedDate="@CurrentDate" @bind-CurrentView="@CurrentView">

            <ScheduleEvents TValue="AppointmentData" EventRendered="OnEventRendered"></ScheduleEvents>

            <ScheduleEventSettings DataSource="@DataSource"></ScheduleEventSettings>

            <ScheduleViews>

                <ScheduleView Option="View.Day"></ScheduleView>

                <ScheduleView Option="View.Week"></ScheduleView>

                <ScheduleView Option="View.WorkWeek"></ScheduleView>

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

                <ScheduleView Option="View.Agenda"></ScheduleView>

            </ScheduleViews>

        </SfSchedule>

    </div>

</div>

@code{

    SfSchedule<AppointmentData> ScheduleRef;

    public View CurrentView = View.Week;

    private static int CurrentYear = DateTime.Today.Year;

    private DateTime CurrentDate = new DateTime(CurrentYear, 1, 9);

    public List<AppointmentData> DataSource = GetScheduleData();

    public class AppointmentData

    {

        public int Id { get; set; }

        public string Subject { get; set; }

        public string Location { get; set; }

        public string Description { get; set; }

        public DateTime StartTime { get; set; }

        public DateTime EndTime { get; set; }

        public Nullable<bool> IsAllDay { get; set; }

        public string CategoryColor { get; set; }

        public string RecurrenceRule { get; set; }

        public Nullable<int> RecurrenceID { get; set; }

        public string RecurrenceException { get; set; }

        public string StartTimezone { get; set; }

        public string EndTimezone { get; set; }

    }

    static public List<AppointmentData> GetScheduleData()

    {

        List<AppointmentData> appData = new List<AppointmentData>();

        appData.Add(new AppointmentData

        {

            Id = 1,

            Subject = "Explosion of Betelgeuse Star",

            Location = "Space Centre USA",

            StartTime = new DateTime(CurrentYear, 1, 4, 9, 30, 0),

            EndTime = new DateTime(CurrentYear, 1, 4, 11, 0, 0),

            CategoryColor = "#1aaa55"

        });

        appData.Add(new AppointmentData

        {

            Id = 2,

            Subject = "Thule Air Crash Report",

            Location = "Newyork City",

            StartTime = new DateTime(CurrentYear, 1, 5, 12, 0, 0),

            EndTime = new DateTime(CurrentYear, 1, 5, 14, 0, 0),

            CategoryColor = "#357cd2"

        });

        appData.Add(new AppointmentData

        {

            Id = 3,

            Subject = "Blue Moon Eclipse",

            Location = "Space Centre USA",

            StartTime = new DateTime(CurrentYear, 1, 6, 9, 30, 0),

            EndTime = new DateTime(CurrentYear, 1, 6, 11, 0, 0),

            CategoryColor = "#7fa900"

        });

        appData.Add(new AppointmentData

        {

            Id = 4,

            Subject = "Meteor Showers in 2021",

            Location = "Space Centre USA",

            StartTime = new DateTime(CurrentYear, 1, 7, 13, 0, 0),

            EndTime = new DateTime(CurrentYear, 1, 7, 14, 30, 0),

            CategoryColor = "#ea7a57"

        });

        appData.Add(new AppointmentData

        {

            Id = 5,

            Subject = "Milky Way as Melting pot",

            Location = "Space Centre USA",

            StartTime = new DateTime(CurrentYear, 1, 8, 12, 0, 0),

            EndTime = new DateTime(CurrentYear, 1, 8, 14, 0, 0),

            CategoryColor = "#00bdae"

        });

        return appData;

    }

    public void OnEventRendered(EventRenderedArgs<AppointmentData> args)

    {

        Dictionary<string, object> attributes = new Dictionary<string, object>();

        if (CurrentView == View.Agenda)

        {

            attributes.Add("style", "border-left-color: " + args.Data.CategoryColor);

        }

        else

        {

            attributes.Add("style", "background: " + args.Data.CategoryColor);

        }

        args.Attributes = attributes;

    }

}

How to occuppy full height of the default Blazor template page ?

[Molier de Ritoi]

Here what I mean by "default Blazor template"

[Ruksar Moosa Sait]

Hi Molier,

You can make the scheduler to occupy the full height of the page by setting its Height like below.

Height="calc(100vh - 4.6rem)"

Kindly try the attached sample and let us know it this meets your requirement.

Regards,

Ruksar Moosa Sait