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; }
}