The Scheduler dimensions refers to both height and width of the entire layout and it accepts 3 types of values.
When height and width of the Scheduler are set to auto, it will try as hard as possible to keep an element the same width as its parent container. In other words, the parent container that holds Scheduler, it’s width/height will be the sum of its children. By default, Scheduler is assigned with auto values for both height and width properties.
@using Syncfusion.EJ2.Schedule
@(Html.EJS().Schedule("schedule")
.Height("auto")
.Width("auto")
.EventSettings(new ScheduleEventSettings { DataSource = ViewBag.appointments })
.SelectedDate(new DateTime(2018, 2, 15))
.Render()
)public ActionResult Index()
{
ViewBag.appointments = GetScheduleData();
return View();
}
public List<AppointmentData> GetScheduleData()
{
List<AppointmentData> appData = new List<AppointmentData>();
appData.Add(new AppointmentData
{
Id = 1,
Subject = "Meeting",
StartTime = new DateTime(2018, 2, 15, 10, 0, 0),
EndTime = new DateTime(2018, 2, 15, 12, 30, 0),
IsAllDay = false,
});
return appData;
}
public class AppointmentData
{
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; }
}The Scheduler height and width will be rendered exactly as per the given pixel values. It accepts both string and number values.
@using Syncfusion.EJ2.Schedule
@(Html.EJS().Schedule("schedule")
.Height("550px")
.Width("650px")
.EventSettings(new ScheduleEventSettings { DataSource = ViewBag.appointments })
.SelectedDate(new DateTime(2018, 2, 15))
.Render()
)public ActionResult Index()
{
ViewBag.appointments = GetScheduleData();
return View();
}
public List<AppointmentData> GetScheduleData()
{
List<AppointmentData> appData = new List<AppointmentData>();
appData.Add(new AppointmentData
{
Id = 1,
Subject = "Meeting",
StartTime = new DateTime(2018, 2, 15, 10, 0, 0),
EndTime = new DateTime(2018, 2, 15, 12, 30, 0),
IsAllDay = false,
});
return appData;
}
public class AppointmentData
{
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; }
}When height and width of the Scheduler are given as percentage, it will make the Scheduler as wide as the parent container.
@using Syncfusion.EJ2.Schedule
@(Html.EJS().Schedule("schedule")
.Height("100%")
.Width("100%")
.EventSettings(new ScheduleEventSettings { DataSource = ViewBag.appointments })
.SelectedDate(new DateTime(2018, 2, 15))
.Render()
)public ActionResult Index()
{
ViewBag.appointments = GetScheduleData();
return View();
}
public List<AppointmentData> GetScheduleData()
{
List<AppointmentData> appData = new List<AppointmentData>();
appData.Add(new AppointmentData
{
Id = 1,
Subject = "Meeting",
StartTime = new DateTime(2018, 2, 15, 10, 0, 0),
EndTime = new DateTime(2018, 2, 15, 12, 30, 0),
IsAllDay = false,
});
return appData;
}
public class AppointmentData
{
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; }
}You can refer to our ASP.NET MVC Scheduler feature tour page for its groundbreaking feature representations. You can also explore our ASP.NET MVC Scheduler example to knows how to present and manipulate data.