Search results

Show half-yearly view in ASP.NET Core Schedule control

18 Oct 2021 / 1 minute to read

The year view of our 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.

tagHelper
data.cs
Copied to clipboard
@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>
Copied to clipboard
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; }
}