Skip to content

Commit b93fbc3

Browse files
kmkrish001kmkrish001
authored
Merge pull request #4046 from syncfusion-content/schedule-toolbar
Custom toolbar topic added in Scheduler
2 parents 1a952da + 53d9f46 commit b93fbc3

File tree

5 files changed

+188
-1
lines changed

5 files changed

+188
-1
lines changed

‎ej2-asp-core-mvc/code-snippet/schedule/header-bar/custom-header-bar-template/data.cs

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
public ActionResult Index()
2+
{
3+
ViewBag.Appointments = GetScheduleData();
4+
ViewBag.Resources = GetResourceData();
5+
ViewBag.value = 1;
6+
7+
return View();
8+
}
9+
10+
public List<AppointmentData> GetScheduleData()
11+
{
12+
List<AppointmentData> appData = new List<AppointmentData>
13+
{
14+
new AppointmentData { Id = 1, Subject = "Meeting with Margaret", StartTime = new DateTime(2025, 3, 10, 10, 0, 0), EndTime = new DateTime(2025, 3, 10, 11, 0, 0), OwnerId = 1 },
15+
new AppointmentData { Id = 2, Subject = "Call with Margaret", StartTime = new DateTime(2025, 3, 11, 14, 0, 0), EndTime = new DateTime(2025, 3, 11, 15, 0, 0), OwnerId = 1 },
16+
new AppointmentData { Id = 3, Subject = "Review with Margaret", StartTime = new DateTime(2025, 3, 12, 9, 0, 0), EndTime = new DateTime(2025, 3, 12, 10, 0, 0), OwnerId = 1 },
17+
new AppointmentData { Id = 4, Subject = "Meeting with Robert", StartTime = new DateTime(2025, 3, 12, 14, 0, 0), EndTime = new DateTime(2025, 3, 12, 15, 0, 0), OwnerId = 2 },
18+
new AppointmentData { Id = 5, Subject = "Discussion with Robert", StartTime = new DateTime(2025, 3, 13, 10, 0, 0), EndTime = new DateTime(2025, 3, 13, 11, 0, 0), OwnerId = 2 },
19+
new AppointmentData { Id = 6, Subject = "Training with Robert", StartTime = new DateTime(2025, 3, 14, 13, 0, 0), EndTime = new DateTime(2025, 3, 14, 14, 0, 0), OwnerId = 2 },
20+
new AppointmentData { Id = 7, Subject = "Call with Laura", StartTime = new DateTime(2025, 3, 15, 9, 0, 0), EndTime = new DateTime(2025, 3, 15, 10, 0, 0), OwnerId = 3 },
21+
new AppointmentData { Id = 8, Subject = "Meeting with Laura", StartTime = new DateTime(2025, 3, 16, 11, 0, 0), EndTime = new DateTime(2025, 3, 16, 12, 0, 0), OwnerId = 3 },
22+
new AppointmentData { Id = 9, Subject = "Project Review with Laura", StartTime = new DateTime(2025, 3, 17, 14, 0, 0), EndTime = new DateTime(2025, 3, 17, 15, 0, 0), OwnerId = 3 }
23+
};
24+
25+
return appData;
26+
}
27+
28+
public List<ResourceData> GetResourceData()
29+
{
30+
List<ResourceData> resourceData = new List<ResourceData>
31+
{
32+
new ResourceData { OwnerText = "Margaret", OwnerId = 1, Color = "#ea7a57" },
33+
new ResourceData { OwnerText = "Robert", OwnerId = 2, Color = "#df5286" },
34+
new ResourceData { OwnerText = "Laura", OwnerId = 3, Color = "#865fcf" }
35+
};
36+
37+
return resourceData;
38+
}
39+
40+
public class AppointmentData
41+
{
42+
public int Id { get; set; }
43+
public string Subject { get; set; }
44+
public DateTime StartTime { get; set; }
45+
public DateTime EndTime { get; set; }
46+
public int OwnerId { get; set; }
47+
}
48+
49+
public class ResourceData
50+
{
51+
public string OwnerText { get; set; }
52+
public int OwnerId { get; set; }
53+
public string Color { get; set; }
54+
}

‎ej2-asp-core-mvc/code-snippet/schedule/header-bar/custom-header-bar-template/razor

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
@using Syncfusion.EJ2.Schedule
2+
@using Syncfusion.EJ2.Navigations
3+
@using Syncfusion.EJ2.DropDowns
4+
5+
@(Html.EJS().Schedule("schedule")
6+
.Width("100%")
7+
.Height("550px")
8+
.Views(view =>
9+
{
10+
view.Option(View.Month).Add();
11+
})
12+
.EventSettings(new ScheduleEventSettings { DataSource = ViewBag.Appointments })
13+
.SelectedDate(new DateTime(2025, 3, 10))
14+
.Resources(res =>
15+
{
16+
res.AllowMultiple(true).DataSource(ViewBag.Resources).Field("OwnerId").Title("Owner").Name("Owners").TextField("OwnerText").IdField("OwnerId").ColorField("Color").Add();
17+
})
18+
.ToolbarItems(new List<ScheduleToolbarItem>
19+
{
20+
new ScheduleToolbarItem { Name = ToolbarName.Previous, Align = ItemAlign.Left },
21+
new ScheduleToolbarItem { Name = ToolbarName.Next, Align = ItemAlign.Left },
22+
new ScheduleToolbarItem { Name = ToolbarName.DateRangeText, Align = ItemAlign.Left },
23+
new ScheduleToolbarItem { Name = ToolbarName.Today, Align = ItemAlign.Right },
24+
new ScheduleToolbarItem { Name = ToolbarName.Views, Align = ItemAlign.Right },
25+
new ScheduleToolbarItem { Name = ToolbarName.Custom, Align = ItemAlign.Center, Template="#dropdownTemplate"}
26+
})
27+
.Created("onScheduleCreate")
28+
.Render()
29+
)
30+
31+
<div id="dropdownTemplate">
32+
@(Html.EJS().DropDownList("ownerDropdown")
33+
.DataSource((IEnumerable<object>)ViewBag.Resources)
34+
.Value((int)ViewBag.value)
35+
.Fields(new DropDownListFieldSettings
36+
{
37+
Text = "OwnerText",
38+
Value = "OwnerId"
39+
})
40+
.Placeholder("Select an Owner")
41+
.Change("onOwnerChange")
42+
.Render()
43+
)
44+
</div>
45+
46+
<script type="text/javascript">
47+
function onScheduleCreate() {
48+
var scheduleObj = document.querySelector('.e-schedule').ej2_instances[0];
49+
var query = new ej.data.Query().where('OwnerId', 'equal', 1);
50+
scheduleObj.eventSettings.query = query;
51+
scheduleObj.dataBind();
52+
}
53+
54+
function onOwnerChange(args) {
55+
var scheduleObj = document.querySelector('.e-schedule').ej2_instances[0];
56+
var value = args.value;
57+
var query = new ej.data.Query().where('OwnerId', 'equal', value);
58+
scheduleObj.eventSettings.query = query;
59+
scheduleObj.dataBind();
60+
}
61+
</script>

‎ej2-asp-core-mvc/code-snippet/schedule/header-bar/custom-header-bar-template/tagHelper

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
@using Syncfusion.EJ2.Schedule
2+
@using Syncfusion.EJ2.DropDowns
3+
4+
<ejs-schedule id="schedule" width="100%" height="550" selectedDate="new DateTime(2025, 3, 10)" currentView="Month" created="onScheduleCreate">
5+
<e-schedule-views>
6+
<e-schedule-view option="Month"></e-schedule-view>
7+
</e-schedule-views>
8+
<e-schedule-eventsettings dataSource="@ViewBag.Appointments"></e-schedule-eventsettings>
9+
<e-schedule-resources>
10+
<e-schedule-resource field="OwnerId" title="Owners" name="Owners" allowMultiple="true" dataSource="@ViewBag.Resources" textField="OwnerText" idField="OwnerId" colorField="Color"></e-schedule-resource>
11+
</e-schedule-resources>
12+
<e-schedule-toolbaritems>
13+
<e-schedule-toolbaritem name="Previous" align="Left"></e-schedule-toolbaritem>
14+
<e-schedule-toolbaritem name="Next" align="Left"></e-schedule-toolbaritem>
15+
<e-schedule-toolbaritem name="DateRangeText" align="Left"></e-schedule-toolbaritem>
16+
<e-schedule-toolbaritem align="Center" name="Custom" template="#dropdownTemplate"></e-schedule-toolbaritem>
17+
<e-schedule-toolbaritem name="Today" align="Right"></e-schedule-toolbaritem>
18+
<e-schedule-toolbaritem name="Views" align="Right"></e-schedule-toolbaritem>
19+
</e-schedule-toolbaritems>
20+
</ejs-schedule>
21+
22+
<div id="dropdownTemplate">
23+
<ejs-dropdownlist id="ownerDropdown" dataSource="@ViewBag.Resources" value="1" placeholder="Select Owner" change="onOwnerChange">
24+
<e-dropdownlist-fields text="OwnerText" value="OwnerId"></e-dropdownlist-fields>
25+
</ejs-dropdownlist>
26+
</div>
27+
28+
<script type="text/javascript">
29+
function onScheduleCreate () {
30+
var scheduleObj = document.querySelector('.e-schedule').ej2_instances[0];
31+
var query = new ej.data.Query().where('OwnerId', 'equal', 1);
32+
scheduleObj.eventSettings.query = query;
33+
scheduleObj.dataBind();
34+
}
35+
36+
function onOwnerChange (args) {
37+
var scheduleObj = document.querySelector('.e-schedule').ej2_instances[0];
38+
var value = args.value;
39+
var query = new ej.data.Query().where('OwnerId', 'equal', value);
40+
scheduleObj.eventSettings.query = query;
41+
scheduleObj.dataBind();
42+
}
43+
</script>

‎ej2-asp-core-mvc/schedule/EJ2_ASP.NETCORE/header-bar.md

Lines changed: 30 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,36 @@ By default, the header bar holds the date and view navigation options, through w
4343

4444
![Display Show or Hide Header Bar in ASP.NET Core Scheduler](images/scheduler-hide-header.png)
4545

46-
## Customizing header bar
46+
## Customizing header bar using template
47+
48+
Apart from the default date navigation and view options available on the header bar, you can add custom items into the Scheduler header bar by making use of the [`toolbarItems`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.ScheduleToolbarItem.html#properties) property. To display the default items, it’s essential to assign a [`name`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.ScheduleToolbarItem.html#Syncfusion_EJ2_Schedule_ScheduleToolbarItem_Name) field to each item. The names of the default items are `Previous`, `Next`, `Today`, `DateRangeText`, `NewEvent`, and `Views`. For custom items you can give the name as `Custom` to the name field. Here, the default items such as previous, next, date range text, and today have been used along with external dropdown list as custom items.
49+
50+
{% if page.publishingplatform == "aspnet-core" %}
51+
52+
{% tabs %}
53+
{% highlight cshtml tabtitle="CSHTML" %}
54+
{% include code-snippet/schedule/header-bar/custom-header-bar-template/tagHelper %}
55+
{% endhighlight %}
56+
{% highlight c# tabtitle="Data.cs" %}
57+
{% include code-snippet/schedule/header-bar/custom-header-bar-template/data.cs %}
58+
{% endhighlight %}
59+
{% endtabs %}
60+
61+
{% elsif page.publishingplatform == "aspnet-mvc" %}
62+
63+
{% tabs %}
64+
{% highlight razor tabtitle="CSHTML" %}
65+
{% include code-snippet/schedule/header-bar/custom-header-bar-template/razor %}
66+
{% endhighlight %}
67+
{% highlight c# tabtitle="Data.cs" %}
68+
{% include code-snippet/schedule/header-bar/custom-header-bar-template/data.cs %}
69+
{% endhighlight %}
70+
{% endtabs %}
71+
{% endif %}
72+
73+
![Display Customizing Header Bar Template in ASP.NET Core Scheduler](images/schedule-custom-toolbar-template.png)
74+
75+
## Customizing header bar using event
4776

4877
Apart from the default date navigation and view options available on the header bar, you can add custom items into the Scheduler header bar by making use of the `actionBegin` event. Here, an employee image is added to the header bar, clicking on which will open the popup showing that person's short profile information.
4978

‎ej2-asp-core-mvc/schedule/images/schedule-custom-toolbar-template.png

28 KB
Loading

0 commit comments

Comments
 (0)