Half-yearly view
17 Feb 20228 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
<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; }
}