Skip to content

Commit 11ea42a

Browse files
VengateshManirajVengateshManiraj
authored
Merge pull request #4071 from syncfusion-content/EJ-947725-OverScanCount-HF
947725: Added the UG documentation for overScanCount property.
2 parents b8328ae + adfc720 commit 11ea42a

File tree

14 files changed

+670
-2
lines changed

14 files changed

+670
-2
lines changed

‎ej2-asp-core-mvc/code-snippet/schedule/appointments/prevent-tooltip/data.cs

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
public ActionResult Index()
2+
{
3+
ViewBag.datasource = GetEventsData();
4+
return View();
5+
}
6+
7+
public List<EventsData> GetEventsData()
8+
{
9+
List<EventsData> eventsData = new List<EventsData>();
10+
eventsData.Add(new EventsData
11+
{
12+
Id = 1,
13+
Subject = "Server Maintenance",
14+
StartTime = new DateTime(2023, 2, 14, 10, 0, 0),
15+
EndTime = new DateTime(2023, 2, 14, 11, 30, 0),
16+
EventType = "maintenance",
17+
City = "Seattle",
18+
CategoryColor = "#1aaa55"
19+
});
20+
eventsData.Add(new EventsData
21+
{
22+
Id = 2,
23+
Subject = "Art & Painting Gallery",
24+
StartTime = new DateTime(2023, 2, 15, 12, 0, 0),
25+
EndTime = new DateTime(2023, 2, 15, 14, 0, 0),
26+
EventType = "public-event",
27+
City = "Costa Rica",
28+
CategoryColor = "#357cd2"
29+
});
30+
eventsData.Add(new EventsData
31+
{
32+
Id = 3,
33+
Subject = "Dany Birthday Celebration",
34+
StartTime = new DateTime(2023, 2, 16, 10, 0, 0),
35+
EndTime = new DateTime(2023, 2, 16, 11, 30, 0),
36+
EventType = "family-event",
37+
City = "Kirkland",
38+
CategoryColor = "#7fa900"
39+
});
40+
return eventsData;
41+
}
42+
43+
public class EventsData
44+
{
45+
public int Id { get; set; }
46+
public string Subject { get; set; }
47+
public DateTime StartTime { get; set; }
48+
public DateTime EndTime { get; set; }
49+
public string EventType { get; set; }
50+
public string City { get; set; }
51+
public string CategoryColor { get; set; }
52+
}

‎ej2-asp-core-mvc/code-snippet/schedule/appointments/prevent-tooltip/razor

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
@using Syncfusion.EJ2.Schedule
2+
3+
@{
4+
var views = new List<string> { "Day", "Week", "WorkWeek", "Month", "Year", "Agenda", "MonthAgenda", "TimelineDay", "TimelineWeek", "TimelineWorkWeek", "TimelineMonth", "TimelineYear" };
5+
var template = "<div class='tooltip-wrap'>" +
6+
"<div class='content-area'><div class='name'>${Subject}</></div>" +
7+
"${if(Location !== null && Location !== undefined)}<div class='city'>${Location}</div>${/if}" +
8+
"<div class='time'>From : ${StartTime.toLocaleString()} </div>" +
9+
"<div class='time'>To : ${EndTime.toLocaleString()} </div></div></div>";
10+
}
11+
12+
<ejs-schedule id="schedule" width="100%" height="550px" selectedDate="new DateTime(2025, 2, 15)" currentView="Week" tooltipOpen="onTooltipOpen">
13+
<e-schedule-views>
14+
@foreach (var view in views)
15+
{
16+
<e-schedule-view option="@view"></e-schedule-view>
17+
}
18+
</e-schedule-views>
19+
<e-schedule-eventsettings dataSource="@ViewBag.datasource" enableTooltip="true">
20+
<e-schedule-eventsettings-fields>
21+
<e-field name="Subject" title="Name"></e-field>
22+
<e-field name="Location" title="Country Name"></e-field>
23+
<e-field name="Description" title="Summary"></e-field>
24+
<e-field name="StartTime" title="From"></e-field>
25+
<e-field name="EndTime" title="To"></e-field>
26+
<e-field name="StartTimezone" title="Origin"></e-field>
27+
<e-field name="EndTimezone" title="Destination"></e-field>
28+
</e-schedule-eventsettings-fields>
29+
</e-schedule-eventsettings>
30+
</ejs-schedule>
31+
32+
<script type="text/javascript">
33+
function onTooltipOpen(args) {
34+
let record = args.data;
35+
if (record.Subject === 'Vacation') {
36+
args.cancel = true;
37+
}
38+
}
39+
</script>

‎ej2-asp-core-mvc/code-snippet/schedule/appointments/prevent-tooltip/tagHelper

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
@using Syncfusion.EJ2.Schedule
2+
3+
<ejs-schedule id="schedule" height="550" selectedDate="new DateTime(2023, 2, 15)">
4+
<e-schedule-eventsettings dataSource="@ViewBag.datasource" enableTooltip="true" tooltipTemplate="#template">
5+
</e-schedule-eventsettings>
6+
</ejs-schedule>
7+
8+
<script id="template" type="text/x-template">
9+
<div class="tooltip-wrap">
10+
<div class="image ${EventType}"></div>
11+
<div class="content-area">
12+
<div class="name">${Subject}</></div>
13+
${ if (City !== null && City !== undefined)} <div class="city">${City}</div>${/if}
14+
<div class="time">From&nbsp;&nbsp;${StartTime.toLocaleString()}</div>
15+
<div class="time">To&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;${EndTime.toLocaleString()} </div>
16+
</div>
17+
</div>
18+
</script>
19+
20+
<style>
21+
.e-schedule-event-tooltip .tooltip-wrap {
22+
display: flex;
23+
}
24+
25+
.e-schedule-event-tooltip .tooltip-wrap .content-area {
26+
padding-left: 6px;
27+
font-size: 12px;
28+
}
29+
30+
.e-schedule-event-tooltip .tooltip-wrap .name {
31+
font-weight: 500;
32+
font-size: 14px;
33+
}
34+
35+
.e-schedule-event-tooltip .tooltip-wrap .image {
36+
background-image: url('https://ej2.syncfusion.com/demos/src/schedule/images/public-event.png');
37+
background-position: center center;
38+
background-repeat: no-repeat;
39+
background-size: cover;
40+
width: 50px;
41+
height: 50px;
42+
}
43+
44+
.e-schedule-event-tooltip .tooltip-wrap .maintenance {
45+
background-image: url('https://ej2.syncfusion.com/demos/src/schedule/images/maintenance.png');
46+
}
47+
48+
.fabric .e-schedule-event-tooltip .tooltip-wrap .maintenance, .highcontrast .tooltip-wrap .maintenance {
49+
background-image: url('https://ej2.syncfusion.com/demos/src/schedule/images/maintenance1.png');
50+
}
51+
52+
.e-schedule-event-tooltip.tooltip-wrap.public-event {
53+
background-image: url('https://ej2.syncfusion.com/demos/src/schedule/images/public-event.png');
54+
}
55+
56+
.fabric .e-schedule-event-tooltip .tooltip-wrap .public-event, .highcontrast .tooltip-wrap .public-event {
57+
background-image: url('https://ej2.syncfusion.com/demos/src/schedule/images/public-event1.png');
58+
}
59+
60+
.e-schedule-event-tooltip .tooltip-wrap .family-event {
61+
background-image: url('https://ej2.syncfusion.com/demos/src/schedule/images/family-event.png');
62+
}
63+
64+
.fabric .e-schedule-event-tooltip .tooltip-wrap .family-event, .highcontrast .tooltip-wrap .family-event {
65+
background-image: url('https://ej2.syncfusion.com/demos/src/schedule/images/family-event1.png');
66+
}
67+
68+
.e-schedule-event-tooltip .tooltip-wrap .commercial-event {
69+
background-image: url('https://ej2.syncfusion.com/demos/src/schedule/images/commercial-event.png');
70+
}
71+
72+
.fabric .e-schedule-event-tooltip .tooltip-wrap .commercial-event, .highcontrast .tooltip-wrap .commercial-event {
73+
background-image: url('https://ej2.syncfusion.com/demos/src/schedule/images/commercial-event1.png');
74+
}
75+
</style>

‎ej2-asp-core-mvc/code-snippet/schedule/calendar-export/custom-print/data.cs

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
public ActionResult Index()
2+
{
3+
ViewBag.datasource = GetScheduleData();
4+
return View();
5+
}
6+
7+
public List<AppointmentData> GetScheduleData()
8+
{
9+
List<AppointmentData> appData = new List<AppointmentData>();
10+
appData.Add(new AppointmentData
11+
{ Id = 1, Subject = "Explosion of Betelgeuse Star", Location = "Dallas", StartTime = new DateTime(2025, 1, 8, 9, 30, 0), EndTime = new DateTime(2025, 1, 8, 11, 0, 0) });
12+
appData.Add(new AppointmentData
13+
{ Id = 2, Subject = "Thule Air Crash Report", Location = "Texas", StartTime = new DateTime(2025, 1, 9, 12, 0, 0), EndTime = new DateTime(2025, 1, 9, 14, 0, 0) });
14+
appData.Add(new AppointmentData
15+
{ Id = 3, Subject = "Blue Moon Eclipse", Location = "Australia", StartTime = new DateTime(2025, 1, 10, 10, 30, 0), EndTime = new DateTime(2025, 1, 10, 11, 0, 0) });
16+
appData.Add(new AppointmentData
17+
{ Id = 4, Subject = "Meteor Showers in 2025", Location = "Canada", StartTime = new DateTime(2025, 1, 11, 13, 0, 0), EndTime = new DateTime(2025, 1, 11, 14, 30, 0) });
18+
appData.Add(new AppointmentData
19+
{ Id = 5, Subject = "Milky Way as Melting pot", Location = "Mexico", StartTime = new DateTime(2025, 1, 12, 12, 0, 0), EndTime = new DateTime(2025, 1, 12, 14, 0, 0) });
20+
return appData;
21+
}
22+
23+
public class AppointmentData
24+
{
25+
public int Id { get; set; }
26+
public string Subject { get; set; }
27+
public string Location { get; set; }
28+
public DateTime StartTime { get; set; }
29+
public DateTime EndTime { get; set; }
30+
}

‎ej2-asp-core-mvc/code-snippet/schedule/calendar-export/custom-print/razor

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
@using Syncfusion.EJ2.Schedule
2+
3+
@{
4+
var department = "Sales";
5+
var userRole = "Manager";
6+
}
7+
8+
<ejs-schedule id="schedule" width="100%" height="550px" selectedDate="DateTime.Now" actionBegin="onActionBegin" beforePrint="onBeforePrint">
9+
<e-schedule-views>
10+
<e-schedule-view option="Day"></e-schedule-view>
11+
<e-schedule-view option="Week"></e-schedule-view>
12+
<e-schedule-view option="WorkWeek"></e-schedule-view>
13+
<e-schedule-view option="Month"></e-schedule-view>
14+
</e-schedule-views>
15+
<e-schedule-eventsettings enableTooltip="true" dataSource="ViewBag.datasource"></e-schedule-eventsettings>
16+
</ejs-schedule>
17+
18+
<style>
19+
.e-schedule .e-schedule-toolbar .e-icon-schedule-print::before {
20+
content: '\e813';
21+
}
22+
</style>
23+
24+
<script type="text/javascript">
25+
function onActionBegin(args) {
26+
if (args.requestType === 'toolbarItemRendering') {
27+
var printItem = {
28+
align: 'Right', showTextOn: 'Both', prefixIcon: 'e-icon-schedule-print',
29+
text: 'Print', cssClass: 'e-schedule-print', click: onPrintIconClick
30+
};
31+
args.items.push(printItem);
32+
}
33+
}
34+
35+
function onPrintIconClick() {
36+
var scheduleObj = document.getElementById('schedule').ej2_instances[0];
37+
scheduleObj.print();
38+
}
39+
40+
function onBeforePrint(args) {
41+
var department = "@department";
42+
var userRole = "@userRole";
43+
44+
var headerElement = document.createElement('div');
45+
headerElement.innerHTML = `
46+
<h1>${department} Department Schedule</h1>
47+
<p>Printed by: ${userRole}</p>
48+
<p>Date: ${new Date().toLocaleString()}</p>
49+
`;
50+
headerElement.style.backgroundColor = getDepartmentColor(department);
51+
headerElement.style.color = 'white';
52+
headerElement.style.padding = '10px';
53+
args.printElement.insertBefore(headerElement, args.printElement.firstChild);
54+
55+
var highPriorityEvents = args.printElement.querySelectorAll('.e-appointment.high-priority');
56+
highPriorityEvents.forEach(event => {
57+
event.style.border = '2px solid red';
58+
});
59+
60+
var scheduleObj = document.getElementById('schedule').ej2_instances[0];
61+
var events = scheduleObj.getEvents();
62+
var summaryElement = document.createElement('div');
63+
summaryElement.innerHTML = `
64+
<p>Total Events: ${events.length}</p>
65+
<p>High Priority Events: ${events.filter(e => e.priority === 'high').length}</p>
66+
`;
67+
args.printElement.appendChild(summaryElement);
68+
69+
if (userRole === 'Manager') {
70+
var managerNote = document.createElement('div');
71+
managerNote.textContent = 'Confidential - For managerial use only';
72+
managerNote.style.color = 'red';
73+
args.printElement.appendChild(managerNote);
74+
}
75+
}
76+
77+
function getDepartmentColor(dept) {
78+
var colors = {
79+
'Sales': '#4CAF50',
80+
'Marketing': '#2196F3',
81+
'Engineering': '#FF9800',
82+
'HR': '#9C27B0'
83+
};
84+
return colors[dept] || '#607D8B';
85+
}
86+
</script>

‎ej2-asp-core-mvc/code-snippet/schedule/calendar-export/custom-print/tagHelper

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
@using Syncfusion.EJ2.Schedule
2+
3+
@{
4+
var department = "Sales";
5+
var userRole = "Manager";
6+
}
7+
8+
<ejs-schedule id="schedule" width="100%" height="550px" selected-date="@DateTime.Now" action-begin="onActionBegin" before-print="onBeforePrint">
9+
<e-schedule-views>
10+
<e-schedule-view option="Day"></e-schedule-view>
11+
<e-schedule-view option="Week"></e-schedule-view>
12+
<e-schedule-view option="WorkWeek"></e-schedule-view>
13+
<e-schedule-view option="Month"></e-schedule-view>
14+
</e-schedule-views>
15+
<e-schedule-event-settings enable-tooltip="true" data-source="@ViewBag.datasource"></e-schedule-event-settings>
16+
</ejs-schedule>
17+
18+
<style>
19+
.e-schedule .e-schedule-toolbar .e-icon-schedule-print::before {
20+
content: '\e813';
21+
}
22+
</style>
23+
24+
<script type="text/javascript">
25+
function onActionBegin(args) {
26+
if (args.requestType === 'toolbarItemRendering') {
27+
var printItem = {
28+
align: 'Right', showTextOn: 'Both', prefixIcon: 'e-icon-schedule-print',
29+
text: 'Print', cssClass: 'e-schedule-print', click: onPrintIconClick
30+
};
31+
args.items.push(printItem);
32+
}
33+
}
34+
35+
function onPrintIconClick() {
36+
var scheduleObj = document.getElementById('schedule').ej2_instances[0];
37+
scheduleObj.print();
38+
}
39+
40+
function onBeforePrint(args) {
41+
var department = "@department";
42+
var userRole = "@userRole";
43+
44+
var headerElement = document.createElement('div');
45+
headerElement.innerHTML = `
46+
<h1>${department} Department Schedule</h1>
47+
<p>Printed by: ${userRole}</p>
48+
<p>Date: ${new Date().toLocaleString()}</p>
49+
`;
50+
headerElement.style.backgroundColor = getDepartmentColor(department);
51+
headerElement.style.color = 'white';
52+
headerElement.style.padding = '10px';
53+
args.printElement.insertBefore(headerElement, args.printElement.firstChild);
54+
55+
var highPriorityEvents = args.printElement.querySelectorAll('.e-appointment.high-priority');
56+
highPriorityEvents.forEach(event => {
57+
event.style.border = '2px solid red';
58+
});
59+
60+
var scheduleObj = document.getElementById('schedule').ej2_instances[0];
61+
var events = scheduleObj.getEvents();
62+
var summaryElement = document.createElement('div');
63+
summaryElement.innerHTML = `
64+
<p>Total Events: ${events.length}</p>
65+
<p>High Priority Events: ${events.filter(e => e.priority === 'high').length}</p>
66+
`;
67+
args.printElement.appendChild(summaryElement);
68+
69+
if (userRole === 'Manager') {
70+
var managerNote = document.createElement('div');
71+
managerNote.textContent = 'Confidential - For managerial use only';
72+
managerNote.style.color = 'red';
73+
args.printElement.appendChild(managerNote);
74+
}
75+
}
76+
77+
function getDepartmentColor(dept) {
78+
var colors = {
79+
'Sales': '#4CAF50',
80+
'Marketing': '#2196F3',
81+
'Engineering': '#FF9800',
82+
'HR': '#9C27B0'
83+
};
84+
return colors[dept] || '#607D8B';
85+
}
86+
</script>

0 commit comments

Comments
 (0)