Year View as 1 x 12 Grid

[Peter-Paul Kremser]

A customer has the requirement to show the months of a year in a single, horizontally scrollable, row.

Here is an example:

Is it possible to achieve this with the scheduler control?

Regards

Peter

[Venkateshwaran Saravanakumar]

Hi Peter,

API: https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.schedule.schedule.html#Syncfusion_EJ2_Schedule_Schedule_CssClass

You can achieve your requirement by overriding the default Scheduler css styles using CSSClass property of the Scheduler as demonstrated in the code snippet below.

[Index.cshtml]

@using Syncfusion.EJ2.Schedule

 

@(Html.EJS().Schedule("schedule")

    .Width("100%")

    .Height("380px")

    .Views(view => {

        view.ReadOnly(true).Option(View.Year).Add();

    })

    .CssClass("year-view")

    .EventSettings(new ScheduleEventSettings { DataSource = ViewBag.datasource })

    .SelectedDate(new DateTime(2023, 2, 15))

    .Render()

)

 

<style>

    .year-view.e-schedule .e-timeline-year-view .e-resource-column-table,

    .year-view.e-schedule .e-timeline-year-view .e-resource-left-td {

        width: 120px;

    }

 

    .year-view.e-schedule .e-year-view .e-content-wrap {

        width: 75vw;

        min-width: 75vw;

    }

 

    .year-view.e-schedule .e-year-view .e-schedule-table {

        width: auto;

    }

 

    .year-view.e-schedule .e-year-view .e-calendar-wrapper {

        flex-wrap: nowrap;

    }

</style>

Regards,
Venkatesh

Attachment: MVCSchedulerYearView_8e2a7513.zip