Scheduler not showing any data

I am using dot Net 8 Blazor Web App (Auto) . I have set up my Scheduler but am having trouble populating it. As you can see from the code I have used the demo code found in the getting started section however I am unable to populate the Scheduler. The scheduler shows on the page and I am able to navigate to other dates and views such as day and week.

Any help would be appreciated thank you.


@page "/calendar"

@rendermode InteractiveAuto


@using Syncfusion.Blazor

@using Syncfusion.Blazor.Schedule




<h3>Employee Calendar</h3>



        <p>

            <button class="btnGreen"><strong>+</strong> Sickness Entry</button>

            <button class="btnGreen"><strong>+</strong> Leave Entry</button>

            <button class="btnGreen"><strong>+</strong> Whereabouts Entry</button>

            <button class="btnPink">Employee Dashboard</button>

            <button class="btnPink">Sickness Control</button>

            <button class="btnPink">Leave Control</button>

        </p>


<SfSchedule TValue="AppointmentData" CurrentView="View.Month" StartHour="7:00" EndHour="20:00" @bind-SelectedDate="@CurrentDate">

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

    <ScheduleViews>

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

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

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

    </ScheduleViews>

</SfSchedule>

@code {



    DateTime CurrentDate = new DateTime(2024, 2, 14);

    List<AppointmentData> DataSource = new List<AppointmentData>

    {

        new AppointmentData { Id = 1, Subject = "Paris", StartTime = new DateTime(2024, 2, 13, 10, 0, 0) , EndTime = new DateTime(2024, 2, 13, 12, 0, 0) },

        new AppointmentData { Id = 2, Subject = "Germany", StartTime = new DateTime(2024, 2, 15, 10, 0, 0) , EndTime = new DateTime(2024, 2, 15, 12, 0, 0) }

    };


    public class AppointmentData

    {


        public int Id { get; set; }

        public string Subject { get; set; }

        public DateTime StartTime { get; set; }

        public DateTime EndTime { get; set; }


    }





}


5 Replies 1 reply marked as answer

AK Ashokkumar Karuppasamy Syncfusion Team February 5, 2024 06:20 AM UTC

Hi Jack,

We suspect that there might be some steps not being followed in Blazor 8 for interaction. So, we added the @rendermode InteractiveServer to your project, and the issue was resolved. We have prepared an interactive runnable sample for Blazor 8 below. The attached code snippet and the following example illustrate the solution. Please give it a try, and let us know if you need any further assistance.

1. Add this to all Razor files

@page "/"

@using Syncfusion.Blazor.Schedule

@rendermode InteractiveServer


OR

2. Add this only to the App Razor file.

    <HeadOutlet @rendermode="@InteractiveServer" />

</head>

 

<body>

    <Routes @rendermode="@InteractiveServer" />

    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>

    <script src="_framework/blazor.web.js"></script>

</body>


Regards,
Ashok


Attachment: BlazorServerNet8_(1)_aac46241.zip


JJ Jack Jenkins replied to Ashokkumar Karuppasamy February 5, 2024 08:40 AM UTC

Hi again, thank you for your response however the solution does not work for me. I am not sure whether this could be because I am using Blazor Web app (auto) which contains both server and web assembly? The page itself is within the .Client side of the project. Could this affect it? Many thanks for you 



AK Ashokkumar Karuppasamy Syncfusion Team February 6, 2024 02:34 PM UTC

Hi Jack,

Based on the shared details, we added @rendermode InteractiveAuto to your Blazor 8 project, and it is working properly.


In the WebApp(Auto) sample, we can create per page/component or globally, as shown in the screenshot below.


1. Add this to all Razor files

@page "/"

@using Syncfusion.Blazor.Schedule

@rendermode InteractiveAuto


OR
2. Add this only to the App Razor file.

    <HeadOutlet @rendermode="@ InteractiveAuto " />

</head>

 

<body>

    <Routes @rendermode="@ InteractiveAuto " />

    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>

    <script src="_framework/blazor.web.js"></script>

</body>


Additionally, we have attached examples for both per page/component and global implementations below. Please give it a try, and let us know if you need any further assistance.

Regards,

Ashok



Attachment: Blazor.NET8sample_aff8166e.zip


JJ Jack Jenkins February 6, 2024 03:02 PM UTC

Hi there, the issue was that within App.razor I was missing the code 

   <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>



An oversight on my part. However after implementing that I have only just been made aware of syncfusions licensing. I am grateful for your assistance but for my project I wont be able to continue with syncfusion. 


Marked as answer

AK Ashokkumar Karuppasamy Syncfusion Team February 7, 2024 12:25 PM UTC

Hi Jack,


Thank you for the update. We're glad to hear that the provided solution meets your requirements. Please let us know if you need any further assistance.

Regards,

Ashok


Loader.
Up arrow icon