Half-yearly view

17 Feb 20227 minutes 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.

@using Syncfusion.EJ2.Schedule

@(Html.EJS().Schedule("schedule")
    .Width("100%")
    .Height("550px")
    .FirstMonthOfYear(6)
    .MonthsCount(6)
    .MonthHeaderTemplate("#monthHeaderTemplate")
    .ResourceHeaderTemplate("#resourceHeaderTemplate")
    .Group(group => group.Resources(ViewBag.Resources))
    .Resources(res => {
        res.AllowMultiple(true).DataSource(ViewBag.Owners).Field("OwnerId").Title("Owner").Name("Owners").TextField("OwnerText").IdField("Id").ColorField("OwnerColor").Add();
    })
    .Views(view => {
        view.Option(View.Year).Add();
        view.Option(View.TimelineYear).DisplayName("Horizontal Timeline Year").IsSelected(true).Add();
        view.Option(View.TimelineYear).DisplayName("Vertical Timeline Year").Orientation(Orientation.Vertical).Add();
    })
    .EventSettings(e => e.DataSource(ViewBag.datasource))
    .SelectedDate(new DateTime(2021, 8, 1))
    .Render()
)

<script id="monthHeaderTemplate" type="text/x-template">
    <div>${getMonthHeaderText(data.date)}</div>
</script>
<script id="resourceHeaderTemplate" 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; }
}