Half-Yearly View in ASP.NET Core Scheduler

The year view of the Scheduler displays all the 365 days and their related appointments of a particular year. You can customize the year view by using the following properties.

In the following code example, you can see how to render only the last six months of a year in the scheduler. To start with the month of June, firstMonthYear is set to 6 and monthsCount is set to 6 to render only 6 months.

The following table summarizes the properties used to customize the year view:

Property Type Default Description
firstMonthOfYear number 0 (January) Specifies the first month to render in the year view.
monthsCount number 12 Specifies the number of months to render in the year view.
monthHeaderTemplate string null Template used to customize the header of each month in the year view. 
@using Syncfusion.EJ2.Schedule

<ejs-schedule id="schedule" width="100%" selectedDate="new DateTime(2021, 8, 1)" height="650px" firstMonthOfYear="6" monthsCount="6" resourceHeaderTemplate="#resourceTemplate" monthHeaderTemplate="#monthHeaderTemplate" currentView="TimelineYear">
    <e-schedule-views>
        <e-schedule-view option="Year"></e-schedule-view>
        <e-schedule-view option="TimelineYear" displayName="Horizontal Timeline Year" isSelected="true"></e-schedule-view>
        <e-schedule-view option="TimelineYear" displayName="Vertical Timeline Year" orientation="Vertical">
            <e-schedule-view-group resources="@ViewBag.Resources"></e-schedule-view-group>
        </e-schedule-view>
    </e-schedule-views>
    <e-schedule-resources>
        <e-schedule-resource dataSource="@ViewBag.Owners" field="OwnerId" title="Owner" name="Owners" textField="OwnerText" idField="Id" colorField="OwnerColor" allowMultiple="true"></e-schedule-resource>
    </e-schedule-resources>
    <e-schedule-eventsettings dataSource="@ViewBag.datasource">
    </e-schedule-eventsettings>
</ejs-schedule>

<script id="monthHeaderTemplate" type="text/x-template">
    <div>${getMonthHeaderText(data.date)}</div>
</script>
<script id="resourceTemplate" type="text/x-template">
    <div class='template-wrap'>
        <div class="resource-details">
            <div class="resource-name">${getResourceName(data)}</div>
        </div>
    </div>

</script>
<script type="text/javascript">
    window.getMonthHeaderText = function (date) {
        var instance = new ej.base.Internationalization();
        return date.toLocaleString('en-us', { month: 'long' }) + ' ' + date.getFullYear()
    };
    window.getResourceName = function (value) {
        return value.resourceData[value.resource.textField];
    };
</script>
<style>
    .e-schedule .e-vertical-view .e-resource-cells {
        height: 62px;
    }

    .e-schedule .template-wrap {
        display: flex;
        text-align: left;
    }

        .e-schedule .template-wrap .resource-details {
            padding-left: 10px;
        }

            .e-schedule .template-wrap .resource-details .resource-name {
                font-size: 16px;
                font-weight: 500;
                margin-top: 5px;
            }

    .e-schedule.e-device .template-wrap .resource-details .resource-name {
        font-size: inherit;
        font-weight: inherit;
    }

    .e-schedule.e-device .e-resource-tree-popup .e-fullrow {
        height: 50px;
    }
</style>
public ActionResult Index()
{
    ViewBag.datasource = GetResourceData();
    List<OwnerResource> owners = new List<OwnerResource>();
    owners.Add(new OwnerResource { OwnerText = "Nancy", Id = 1, OwnerColor = "#ffaa00" });
    owners.Add(new OwnerResource { OwnerText = "Steven", Id = 2, OwnerColor = "#f8a398" });
    owners.Add(new OwnerResource { OwnerText = "Michael", Id = 3, OwnerColor = "#7499e1" });
    owners.Add(new OwnerResource { OwnerText = "Smith", Id = 4, OwnerColor = "#5978ee" });
    owners.Add(new OwnerResource { OwnerText = "Michael", Id = 5, OwnerColor = "#7499e1" });
    ViewBag.Owners = owners;

    ViewBag.Resources = new string[] { "Owners" };
    return View();
}

public List<ResourceData> GetResourceData()
{
    List<ResourceData> resourceData = new List<ResourceData>();
    resourceData.Add(new ResourceData
    {
        Id = 1,
        Subject = "Requirement planning",
        StartTime = new DateTime(2021, 9, 3, 10, 0, 0),
        EndTime = new DateTime(2021, 9, 3, 12, 0, 0),
        IsAllDay = false,
        OwnerId = 1
    });
    resourceData.Add(new ResourceData
    {
        Id = 2,
        Subject = "Quality Analysis",
        StartTime = new DateTime(2021, 9, 4, 10, 0, 0),
        EndTime = new DateTime(2021, 9, 4, 12, 0, 0),
        IsAllDay = false,
        OwnerId = 2
    });
    resourceData.Add(new ResourceData
    {
        Id = 3,
        Subject = "Resource planning",
        StartTime = new DateTime(2021, 9, 5, 10, 0, 0),
        EndTime = new DateTime(2021, 9, 5, 12, 0, 0),
        IsAllDay = false,
        OwnerId = 3
    });
    return resourceData;
}

public class ResourceData
{
    public int Id { get; set; }
    public string Subject { get; set; }
    public DateTime StartTime { get; set; }
    public DateTime EndTime { get; set; }
    public bool IsAllDay { get; set; }
    public int OwnerId { get; set; }
}
public class OwnerResource
{
    public string OwnerText { set; get; }
    public int Id { set; get; }
    public string OwnerColor { set; get; }
}