947725: Added the UG documentation for overScanCount property.

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

@@ -0,0 +1,52 @@
+public ActionResult Index()
+{
+    ViewBag.datasource = GetEventsData();
+    return View();
+}
+
+public List<EventsData> GetEventsData()
+{
+    List<EventsData> eventsData = new List<EventsData>();
+    eventsData.Add(new EventsData
+    {
+        Id = 1,
+        Subject = "Server Maintenance",
+        StartTime = new DateTime(2023, 2, 14, 10, 0, 0),
+        EndTime = new DateTime(2023, 2, 14, 11, 30, 0),
+        EventType = "maintenance",
+        City = "Seattle",
+        CategoryColor = "#1aaa55"
+    });
+    eventsData.Add(new EventsData
+    {
+        Id = 2,
+        Subject = "Art & Painting Gallery",
+        StartTime = new DateTime(2023, 2, 15, 12, 0, 0),
+        EndTime = new DateTime(2023, 2, 15, 14, 0, 0),
+        EventType = "public-event",
+        City = "Costa Rica",
+        CategoryColor = "#357cd2"
+    });
+    eventsData.Add(new EventsData
+    {
+        Id = 3,
+        Subject = "Dany Birthday Celebration",
+        StartTime = new DateTime(2023, 2, 16, 10, 0, 0),
+        EndTime = new DateTime(2023, 2, 16, 11, 30, 0),
+        EventType = "family-event",
+        City = "Kirkland",
+        CategoryColor = "#7fa900"
+    });
+    return eventsData;
+}
+
+public class EventsData
+{
+    public int Id { get; set; }
+    public string Subject { get; set; }
+    public DateTime StartTime { get; set; }
+    public DateTime EndTime { get; set; }
+    public string EventType { get; set; }
+    public string City { get; set; }
+    public string CategoryColor { get; set; }
+}

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

@@ -0,0 +1,39 @@
+@using Syncfusion.EJ2.Schedule
+
+@{
+    var views = new List<string> { "Day", "Week", "WorkWeek", "Month", "Year", "Agenda", "MonthAgenda", "TimelineDay", "TimelineWeek", "TimelineWorkWeek", "TimelineMonth", "TimelineYear" };
+    var template = "<div class='tooltip-wrap'>" +
+        "<div class='content-area'><div class='name'>${Subject}</></div>" +
+        "${if(Location !== null && Location !== undefined)}<div class='city'>${Location}</div>${/if}" +
+        "<div class='time'>From : ${StartTime.toLocaleString()} </div>" +
+        "<div class='time'>To   : ${EndTime.toLocaleString()} </div></div></div>";
+}
+
+<ejs-schedule id="schedule" width="100%" height="550px" selectedDate="new DateTime(2025, 2, 15)" currentView="Week" tooltipOpen="onTooltipOpen">
+    <e-schedule-views>
+        @foreach (var view in views)
+        {
+            <e-schedule-view option="@view"></e-schedule-view>
+        }
+    </e-schedule-views>
+    <e-schedule-eventsettings dataSource="@ViewBag.datasource" enableTooltip="true">
+        <e-schedule-eventsettings-fields>
+            <e-field name="Subject" title="Name"></e-field>
+            <e-field name="Location" title="Country Name"></e-field>
+            <e-field name="Description" title="Summary"></e-field>
+            <e-field name="StartTime" title="From"></e-field>
+            <e-field name="EndTime" title="To"></e-field>
+            <e-field name="StartTimezone" title="Origin"></e-field>
+            <e-field name="EndTimezone" title="Destination"></e-field>
+        </e-schedule-eventsettings-fields>
+    </e-schedule-eventsettings>
+</ejs-schedule>
+
+<script type="text/javascript">
+    function onTooltipOpen(args) {
+        let record = args.data;
+        if (record.Subject === 'Vacation') {
+            args.cancel = true;
+        }
+    }
+</script>

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

@@ -0,0 +1,75 @@
+@using Syncfusion.EJ2.Schedule
+
+<ejs-schedule id="schedule" height="550" selectedDate="new DateTime(2023, 2, 15)">
+    <e-schedule-eventsettings dataSource="@ViewBag.datasource" enableTooltip="true" tooltipTemplate="#template">
+    </e-schedule-eventsettings>
+</ejs-schedule>
+
+<script id="template" type="text/x-template">
+    <div class="tooltip-wrap">
+        <div class="image ${EventType}"></div>
+        <div class="content-area">
+            <div class="name">${Subject}</></div>
+            ${ if (City !== null && City !== undefined)} <div class="city">${City}</div>${/if}
+            <div class="time">From&nbsp;&nbsp;${StartTime.toLocaleString()}</div>
+            <div class="time">To&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;${EndTime.toLocaleString()} </div>
+        </div>
+    </div>
+</script>
+
+<style>
+    .e-schedule-event-tooltip .tooltip-wrap {
+        display: flex;
+    }
+
+        .e-schedule-event-tooltip .tooltip-wrap .content-area {
+            padding-left: 6px;
+            font-size: 12px;
+        }
+
+        .e-schedule-event-tooltip .tooltip-wrap .name {
+            font-weight: 500;
+            font-size: 14px;
+        }
+
+        .e-schedule-event-tooltip .tooltip-wrap .image {
+            background-image: url('https://ej2.syncfusion.com/demos/src/schedule/images/public-event.png');
+            background-position: center center;
+            background-repeat: no-repeat;
+            background-size: cover;
+            width: 50px;
+            height: 50px;
+        }
+
+        .e-schedule-event-tooltip .tooltip-wrap .maintenance {
+            background-image: url('https://ej2.syncfusion.com/demos/src/schedule/images/maintenance.png');
+        }
+
+    .fabric .e-schedule-event-tooltip .tooltip-wrap .maintenance, .highcontrast .tooltip-wrap .maintenance {
+        background-image: url('https://ej2.syncfusion.com/demos/src/schedule/images/maintenance1.png');
+    }
+
+    .e-schedule-event-tooltip.tooltip-wrap.public-event {
+        background-image: url('https://ej2.syncfusion.com/demos/src/schedule/images/public-event.png');
+    }
+
+    .fabric .e-schedule-event-tooltip .tooltip-wrap .public-event, .highcontrast .tooltip-wrap .public-event {
+        background-image: url('https://ej2.syncfusion.com/demos/src/schedule/images/public-event1.png');
+    }
+
+    .e-schedule-event-tooltip .tooltip-wrap .family-event {
+        background-image: url('https://ej2.syncfusion.com/demos/src/schedule/images/family-event.png');
+    }
+
+    .fabric .e-schedule-event-tooltip .tooltip-wrap .family-event, .highcontrast .tooltip-wrap .family-event {
+        background-image: url('https://ej2.syncfusion.com/demos/src/schedule/images/family-event1.png');
+    }
+
+    .e-schedule-event-tooltip .tooltip-wrap .commercial-event {
+        background-image: url('https://ej2.syncfusion.com/demos/src/schedule/images/commercial-event.png');
+    }
+
+    .fabric .e-schedule-event-tooltip .tooltip-wrap .commercial-event, .highcontrast .tooltip-wrap .commercial-event {
+        background-image: url('https://ej2.syncfusion.com/demos/src/schedule/images/commercial-event1.png');
+    }
+</style>

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

@@ -0,0 +1,30 @@
+public ActionResult Index()
+{
+    ViewBag.datasource = GetScheduleData();
+    return View();
+}
+
+public List<AppointmentData> GetScheduleData()
+{
+    List<AppointmentData> appData = new List<AppointmentData>();
+    appData.Add(new AppointmentData
+    { 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) });
+    appData.Add(new AppointmentData
+    { 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) });
+    appData.Add(new AppointmentData
+    { 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) });
+    appData.Add(new AppointmentData
+    { 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) });
+    appData.Add(new AppointmentData
+    { 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) });
+    return appData;
+}
+
+public class AppointmentData
+{
+    public int Id { get; set; }
+    public string Subject { get; set; }
+    public string Location { get; set; }
+    public DateTime StartTime { get; set; }
+    public DateTime EndTime { get; set; }
+}

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

@@ -0,0 +1,86 @@
+@using Syncfusion.EJ2.Schedule
+
+@{
+    var department = "Sales";
+    var userRole = "Manager";
+}
+
+<ejs-schedule id="schedule" width="100%" height="550px" selectedDate="DateTime.Now" actionBegin="onActionBegin" beforePrint="onBeforePrint">
+    <e-schedule-views>
+        <e-schedule-view option="Day"></e-schedule-view>
+        <e-schedule-view option="Week"></e-schedule-view>
+        <e-schedule-view option="WorkWeek"></e-schedule-view>
+        <e-schedule-view option="Month"></e-schedule-view>
+    </e-schedule-views>
+    <e-schedule-eventsettings enableTooltip="true" dataSource="ViewBag.datasource"></e-schedule-eventsettings>
+</ejs-schedule>
+
+<style>
+    .e-schedule .e-schedule-toolbar .e-icon-schedule-print::before {
+        content: '\e813';
+    }
+</style>
+
+<script type="text/javascript">
+    function onActionBegin(args) {
+        if (args.requestType === 'toolbarItemRendering') {
+            var printItem = {
+                align: 'Right', showTextOn: 'Both', prefixIcon: 'e-icon-schedule-print',
+                text: 'Print', cssClass: 'e-schedule-print', click: onPrintIconClick
+            };
+            args.items.push(printItem);
+        }
+    }
+
+    function onPrintIconClick() {
+        var scheduleObj = document.getElementById('schedule').ej2_instances[0];
+        scheduleObj.print();
+    }
+
+    function onBeforePrint(args) {
+        var department = "@department";
+        var userRole = "@userRole";
+
+        var headerElement = document.createElement('div');
+        headerElement.innerHTML = `
+            <h1>${department} Department Schedule</h1>
+            <p>Printed by: ${userRole}</p>
+            <p>Date: ${new Date().toLocaleString()}</p>
+        `;
+        headerElement.style.backgroundColor = getDepartmentColor(department);
+        headerElement.style.color = 'white';
+        headerElement.style.padding = '10px';
+        args.printElement.insertBefore(headerElement, args.printElement.firstChild);
+
+        var highPriorityEvents = args.printElement.querySelectorAll('.e-appointment.high-priority');
+        highPriorityEvents.forEach(event => {
+            event.style.border = '2px solid red';
+        });
+
+        var scheduleObj = document.getElementById('schedule').ej2_instances[0];
+        var events = scheduleObj.getEvents();
+        var summaryElement = document.createElement('div');
+        summaryElement.innerHTML = `
+            <p>Total Events: ${events.length}</p>
+            <p>High Priority Events: ${events.filter(e => e.priority === 'high').length}</p>
+        `;
+        args.printElement.appendChild(summaryElement);
+
+        if (userRole === 'Manager') {
+            var managerNote = document.createElement('div');
+            managerNote.textContent = 'Confidential - For managerial use only';
+            managerNote.style.color = 'red';
+            args.printElement.appendChild(managerNote);
+        }
+    }
+
+    function getDepartmentColor(dept) {
+        var colors = {
+            'Sales': '#4CAF50',
+            'Marketing': '#2196F3',
+            'Engineering': '#FF9800',
+            'HR': '#9C27B0'
+        };
+        return colors[dept] || '#607D8B';
+    }
+</script>

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

@@ -0,0 +1,86 @@
+@using Syncfusion.EJ2.Schedule
+
+@{
+    var department = "Sales";
+    var userRole = "Manager";
+}
+
+<ejs-schedule id="schedule" width="100%" height="550px" selected-date="@DateTime.Now" action-begin="onActionBegin" before-print="onBeforePrint">
+    <e-schedule-views>
+        <e-schedule-view option="Day"></e-schedule-view>
+        <e-schedule-view option="Week"></e-schedule-view>
+        <e-schedule-view option="WorkWeek"></e-schedule-view>
+        <e-schedule-view option="Month"></e-schedule-view>
+    </e-schedule-views>
+    <e-schedule-event-settings enable-tooltip="true" data-source="@ViewBag.datasource"></e-schedule-event-settings>
+</ejs-schedule>
+
+<style>
+    .e-schedule .e-schedule-toolbar .e-icon-schedule-print::before {
+        content: '\e813';
+    }
+</style>
+
+<script type="text/javascript">
+    function onActionBegin(args) {
+        if (args.requestType === 'toolbarItemRendering') {
+            var printItem = {
+                align: 'Right', showTextOn: 'Both', prefixIcon: 'e-icon-schedule-print',
+                text: 'Print', cssClass: 'e-schedule-print', click: onPrintIconClick
+            };
+            args.items.push(printItem);
+        }
+    }
+
+    function onPrintIconClick() {
+        var scheduleObj = document.getElementById('schedule').ej2_instances[0];
+        scheduleObj.print();
+    }
+
+    function onBeforePrint(args) {
+        var department = "@department";
+        var userRole = "@userRole";
+
+        var headerElement = document.createElement('div');
+        headerElement.innerHTML = `
+            <h1>${department} Department Schedule</h1>
+            <p>Printed by: ${userRole}</p>
+            <p>Date: ${new Date().toLocaleString()}</p>
+        `;
+        headerElement.style.backgroundColor = getDepartmentColor(department);
+        headerElement.style.color = 'white';
+        headerElement.style.padding = '10px';
+        args.printElement.insertBefore(headerElement, args.printElement.firstChild);
+
+        var highPriorityEvents = args.printElement.querySelectorAll('.e-appointment.high-priority');
+        highPriorityEvents.forEach(event => {
+            event.style.border = '2px solid red';
+        });
+
+        var scheduleObj = document.getElementById('schedule').ej2_instances[0];
+        var events = scheduleObj.getEvents();
+        var summaryElement = document.createElement('div');
+        summaryElement.innerHTML = `
+            <p>Total Events: ${events.length}</p>
+            <p>High Priority Events: ${events.filter(e => e.priority === 'high').length}</p>
+        `;
+        args.printElement.appendChild(summaryElement);
+
+        if (userRole === 'Manager') {
+            var managerNote = document.createElement('div');
+            managerNote.textContent = 'Confidential - For managerial use only';
+            managerNote.style.color = 'red';
+            args.printElement.appendChild(managerNote);
+        }
+    }
+
+    function getDepartmentColor(dept) {
+        var colors = {
+            'Sales': '#4CAF50',
+            'Marketing': '#2196F3',
+            'Engineering': '#FF9800',
+            'HR': '#9C27B0'
+        };
+        return colors[dept] || '#607D8B';
+    }
+</script>