diff --git a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/mac-installer/how-to-download.md b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/mac-installer/how-to-download.md index f1afeaf247..8042088cb0 100644 --- a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/mac-installer/how-to-download.md +++ b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/mac-installer/how-to-download.md @@ -38,7 +38,7 @@ Our 30-day trial can be downloaded in two ways. ![Start Trial download](images/start-trial-download-installer.png) -6. Click the More Download Options (element 2 in above screenshot) button to get the Essential Studio ASP. NET Core - EJ2 Offline trial installer which is available in PKG format. +6. Click the More Download Options (element 2 in above screenshot) button to get the Essential Studio ASP. NET Core - EJ2 Offline trial installer which is available in DMG format. ![License and downloads of Syncfusion Essential Studio](images/Mac_Download.PNG) @@ -73,7 +73,7 @@ You should initiate an evaluation if you have already obtained our components th ![License and downloads of Syncfusion Essential Studio](images/license-download.png) 4. Unlock key is not required to install the Syncfusion Flutter Mac trial installer. -5. For Mac OS, PKG formats is available for download. +5. For Mac OS, DMG formats is available for download. ![License and downloads of Syncfusion Essential Studio](images/Mac_Download.PNG) diff --git a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/mac-installer/how-to-install.md b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/mac-installer/how-to-install.md index 8f04d0e67f..b942034fad 100644 --- a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/mac-installer/how-to-install.md +++ b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/mac-installer/how-to-install.md @@ -20,8 +20,8 @@ The Essential Studio ASP.NET Core EJ2 Mac installer allows you to create the ASP If you receive this alert, follow the below steps for the easiest solution. - 1. Right-click the downloaded pkg file. - 2. Select the "Open With" option and choose "Installer (Default)". The following pop-up appears. + 1. Right-click the downloaded dmg file. + 2. Select the "Open With" option and choose "DiskImageMounter (Default)". The following pop-up appears. ![pop-up Image](images/Mac_Catalina_MacOS_Alert2.png) @@ -29,50 +29,34 @@ The Essential Studio ASP.NET Core EJ2 Mac installer allows you to create the ASP ## Step-by-Step Installation -The steps below shows how to install the Essential Studio ASP.NET Core - EJ2 Mac installer.  +The steps below shows how to install the Essential Studio ASP.NET Core - EJ2 Mac installer. -1. Double-click the Syncfusion Essential Studio ASP.NET Core - EJ2 Mac installer(.pkg) file. The installer Wizard opens. Click Continue. +1. Locate the downloaded dmg file and open the file by double click on it. ![Welcome wizard](images/Mac_Installer1.png) - -2. The Software License Agreement wizard will appear. Click the Continue button. +2. This action will automatically mount the disk image and create a virtual drive on your desktop or in the Finder sidebar. - ![License Agreement](images/Mac_Installer2.png) - + ![License Agreement](images/Mac_Installer2.png) -3. The License Agreement's Confirmation window will appear. If you have read the Software License Agreement, click **Agree**. +3. Copy the mounted disk file. ![License Agree Confirmation](images/Mac_Installer3.png) - - N> The Unlock key is not required to install the Mac installer. The Syncfusion Essential Studio ASP.NET Core - EJ2 Mac installer can be used for development purposes without registering the Unlock key. - - -4. The Destination select wizard will appear. You can choose which disc to install the Syncfusion Essential Studio for ASP.NET Core - EJ2 Mac installer on here. - - ![Destination](images/Mac_Installer4.png) -5. The Installation Type wizard will appear. Click Install to begin the standard installation of the Syncfusion Essential Studio ASP.NET Core - EJ2 Mac installer. +4. And paste it in "Applications" folder shortcut. - ![Install Location](images/Mac_Installer5.png) + ![License Agree Confirmation](images/Mac_Installer4.png) + + N> The Unlock key is not required to install the Mac installer. The Syncfusion Essential Studio ASP.NET Core - EJ2 Mac installer can be used for development purposes without registering the Unlock key. -6. The Authentication window will appear. To begin the installation, enter the Mac machine's password and click **Install Software**. - ![Authentication](images/Mac_Installer6.png) +5. Now you can open the folder to explore the Syncfusion Essential Studio Mac installer. -7. The installation process will begin on your machine. - - ![Installation progress](images/Mac_Installer7.png) - -8. Once the installation is complete, the completed screen will be displayed. To exit the installation wizard, click Close. + ![Destination](Images/destination.JPG) - ![Installation Completed](images/Mac_Installer8.png) - - By default, Mac installer will install the files in following location. +6. To remove the DMG file, Right-click on the virtual drive on your desktop or in the Finder sidebar and select "Eject." Also delete the folder from the Applications. - **Location:** {Documents}/Syncfusion/ {version}/ {platform} - - ![Installed Location](images/Mac_Installer9.png) + ![Install Location](images/Mac_Installer6.png) ## License key registration in samples diff --git a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/mac-installer/images/Mac_Installer1.png b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/mac-installer/images/Mac_Installer1.png index 7503a9dbf0..413e300dd6 100644 Binary files a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/mac-installer/images/Mac_Installer1.png and b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/mac-installer/images/Mac_Installer1.png differ diff --git a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/mac-installer/images/Mac_Installer2.png b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/mac-installer/images/Mac_Installer2.png index b2bb7d246f..8d60ee210e 100644 Binary files a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/mac-installer/images/Mac_Installer2.png and b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/mac-installer/images/Mac_Installer2.png differ diff --git a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/mac-installer/images/Mac_Installer3.png b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/mac-installer/images/Mac_Installer3.png index 078e2e2188..f43cbf49b2 100644 Binary files a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/mac-installer/images/Mac_Installer3.png and b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/mac-installer/images/Mac_Installer3.png differ diff --git a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/mac-installer/images/Mac_Installer4.png b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/mac-installer/images/Mac_Installer4.png index a6caf7e811..6172568a2a 100644 Binary files a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/mac-installer/images/Mac_Installer4.png and b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/mac-installer/images/Mac_Installer4.png differ diff --git a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/mac-installer/images/Mac_Installer5.png b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/mac-installer/images/Mac_Installer5.png index a4c1d0180f..9676c2eb90 100644 Binary files a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/mac-installer/images/Mac_Installer5.png and b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/mac-installer/images/Mac_Installer5.png differ diff --git a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/mac-installer/images/Mac_Installer6.png b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/mac-installer/images/Mac_Installer6.png index c9ea5100f9..0b3ef56d7d 100644 Binary files a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/mac-installer/images/Mac_Installer6.png and b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/mac-installer/images/Mac_Installer6.png differ diff --git a/ej2-asp-core-mvc/Release-notes/26.1.42.md b/ej2-asp-core-mvc/Release-notes/26.1.42.md new file mode 100644 index 0000000000..3c88739b64 --- /dev/null +++ b/ej2-asp-core-mvc/Release-notes/26.1.42.md @@ -0,0 +1,16 @@ +--- +title: Essential Studio for ##Platform_Name## Weekly Release Release Notes +description: Essential Studio for ##Platform_Name## Weekly Release Release Notes +platform: ej2-asp-core-mvc +documentation: ug +--- + +# Essential Studio for ##Platform_Name## Release Notes + +{% include release-info.html date="July 16, 2024" version="v26.1.42" %} + +{% directory path: _includes/release-notes/v26.1.42 %} + +{% include {{file.url}} %} + +{% enddirectory %} \ No newline at end of file diff --git a/ej2-asp-core-mvc/Release-notes/26.2.5.md b/ej2-asp-core-mvc/Release-notes/26.2.5.md new file mode 100644 index 0000000000..0519baf93a --- /dev/null +++ b/ej2-asp-core-mvc/Release-notes/26.2.5.md @@ -0,0 +1,16 @@ +--- +title: Essential Studio for ##Platform_Name## Weekly Release Release Notes +description: Essential Studio for ##Platform_Name## Weekly Release Release Notes +platform: ej2-asp-core-mvc +documentation: ug +--- + +# Essential Studio for ##Platform_Name## Release Notes + +{% include release-info.html date="July 26, 2024" version="v26.2.5" %} + +{% directory path: _includes/release-notes/v26.2.5 %} + +{% include {{file.url}} %} + +{% enddirectory %} \ No newline at end of file diff --git a/ej2-asp-core-mvc/carousel/how-to/load-images-in-webp-format.md b/ej2-asp-core-mvc/carousel/how-to/load-images-in-webp-format.md new file mode 100644 index 0000000000..49499f98d1 --- /dev/null +++ b/ej2-asp-core-mvc/carousel/how-to/load-images-in-webp-format.md @@ -0,0 +1,34 @@ +--- +layout: post +title: Load webp format image in ##Platform_Name## Accordion Control | Syncfusion +description: Learn here all about how to load webp format image in Syncfusion ##Platform_Name## Accordion control of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: Load images in webp format +publishingplatform: ##Platform_Name## +documentation: ug +--- + + +# Load webp format image in Carousel component + +You can load the carousel image in the webp format, which aims to create smaller, better-looking images. Choosing webp as your image format can significantly improve your website's performance without sacrificing visual quality. webp images are significantly smaller in file size compared to formats like JPEG and PNG. This results in faster load times and less data usage. To achieve this, you can convert your image format to webp and pass them to Carousel items. The following sample illustrates how to load a carousel image in the webp format component. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/carousel/how-to/carousel-webp/tagHelper %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/carousel/how-to/carousel-webp/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Wizard.cs" %} +{% include code-snippet/carousel/how-to/carousel-webp/carousel-webp.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/carousel/how-to/carousel-webp/carousel-webp.cs b/ej2-asp-core-mvc/code-snippet/carousel/how-to/carousel-webp/carousel-webp.cs new file mode 100644 index 0000000000..fe2d1d829e --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/carousel/how-to/carousel-webp/carousel-webp.cs @@ -0,0 +1,4 @@ +public ActionResult Index() +{ + return View(); +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/carousel/how-to/carousel-webp/razor b/ej2-asp-core-mvc/code-snippet/carousel/how-to/carousel-webp/razor new file mode 100644 index 0000000000..ba025472db --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/carousel/how-to/carousel-webp/razor @@ -0,0 +1,55 @@ +@using Syncfusion.EJ2.Navigations; + +
+
+ @(Html.EJS().Carousel("defaultCarousel").PartialVisible(true).Items(new List { + new CarouselItem { Template = "#itemTemplate1" }, + new CarouselItem { Template = "#itemTemplate2" }, + new CarouselItem { Template = "#itemTemplate3" }, + }) + .Render() + ) +
+
+ + + + + + diff --git a/ej2-asp-core-mvc/code-snippet/carousel/how-to/carousel-webp/tagHelper b/ej2-asp-core-mvc/code-snippet/carousel/how-to/carousel-webp/tagHelper new file mode 100644 index 0000000000..d8fd46f3ed --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/carousel/how-to/carousel-webp/tagHelper @@ -0,0 +1,54 @@ +
+
+ + + + + + + +
+
+ + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/cell/autowrap/razor b/ej2-asp-core-mvc/code-snippet/grid/cell/autowrap/razor index ffd0ace2aa..365b6a99c1 100644 --- a/ej2-asp-core-mvc/code-snippet/grid/cell/autowrap/razor +++ b/ej2-asp-core-mvc/code-snippet/grid/cell/autowrap/razor @@ -1,10 +1,22 @@ -@Html.EJS().Grid("AutoWrap").DataSource((IEnumerable)ViewBag.dataSource).AllowTextWrap().Columns(col => +
+ + + @Html.EJS().DropDownList("Wrap").Width("180px").DataSource(new List { "Both", "Content" }).Change("change").Render() + + + @Html.EJS().Grid("Grid").DataSource((IEnumerable)ViewBag.dataSource).AllowTextWrap().Columns(col => { + col.Field("Inventor").HeaderText("Inventor Name").Width("150").Add(); - col.Field("NumberofPatentFamilies").HeaderText("NumberofPatentFamilies").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); - col.Field("Inventor").HeaderText("Inventor").Width("150").Add(); - col.Field("NumberofINPADOCpatents").HeaderText("NumberofINPADOCpatents").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); - col.Field("Mainfieldsofinvention").HeaderText("Mainfieldsofinvention").Width("150").Add(); - col.Field("Active").HeaderText("Active").Width("150").Add(); + col.Field("NumberOfPatentFamilies").HeaderText("Number of Patent Families").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); + col.Field("Country").HeaderText("Country").Width("150").Add(); + col.Field("Active").HeaderText("Active").Width("150").Add(); -}).AllowPaging().TextWrapSettings(text => { text.WrapMode(Syncfusion.EJ2.Grids.WrapMode.Content);}).Render() \ No newline at end of file +}).TextWrapSettings(text => { text.WrapMode(Syncfusion.EJ2.Grids.WrapMode.Content); }).Render() + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/cell/autowrap/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/cell/autowrap/tagHelper index 08aa0f33fa..c3a6c9bf78 100644 --- a/ej2-asp-core-mvc/code-snippet/grid/cell/autowrap/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/grid/cell/autowrap/tagHelper @@ -1,10 +1,22 @@ - - +
+ + + + +
+ + - - - - - + + + + - + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/cell/clipmode/clipmode.cs b/ej2-asp-core-mvc/code-snippet/grid/cell/clipmode/clipmode.cs index f6f0126ac7..91fd8d713a 100644 --- a/ej2-asp-core-mvc/code-snippet/grid/cell/clipmode/clipmode.cs +++ b/ej2-asp-core-mvc/code-snippet/grid/cell/clipmode/clipmode.cs @@ -1,6 +1,7 @@ public IActionResult Index() { - var Order = OrderDetails.GetAllRecords(); + var Order = InventorDetails.GetAllRecords(); ViewBag.DataSource = Order; + ViewBag.dropdownData = new string[] { "Clip", "Ellipsis", "EllipsisWithTooltip" }; return View(); -} \ No newline at end of file +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/cell/clipmode/razor b/ej2-asp-core-mvc/code-snippet/grid/cell/clipmode/razor index ca7695e6fd..57e8560ed7 100644 --- a/ej2-asp-core-mvc/code-snippet/grid/cell/clipmode/razor +++ b/ej2-asp-core-mvc/code-snippet/grid/cell/clipmode/razor @@ -1,8 +1,24 @@ - @Html.EJS().Grid("ClipMode").DataSource((IEnumerable)ViewBag.dataSource).Columns(col => - { - col.Field("NumberofPatentFamilies").HeaderText("NumberofPatentFamilies").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); - col.Field("Inventor").HeaderText("Inventor").ClipMode(Syncfusion.EJ2.Grids.ClipMode.Clip).Width("150").Add(); - col.Field("NumberofINPADOCpatents").ClipMode(Syncfusion.EJ2.Grids.ClipMode.Ellipsis).HeaderText("NumberofINPADOCpatents").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); - col.Field("Mainfieldsofinvention").ClipMode(Syncfusion.EJ2.Grids.ClipMode.EllipsisWithTooltip).HeaderText("Mainfieldsofinvention").Width("150").Add(); - col.Field("Active").HeaderText("Active").Width("150").Add(); - }).AllowPaging().Render() + +
+ + + @Html.EJS().DropDownList("ClipMode").Width("180px").DataSource(new List { "Clip", "Ellipsis", "EllipsisWithTooltip" }).Change("change").Render() + + + + @Html.EJS().Grid("Grid").DataSource((IEnumerable)ViewBag.dataSource).Columns(col => + { + col.Field("NumberOfPatentFamilies").HeaderText("NumberofPatentFamilies").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); + col.Field("Inventor").HeaderText("Inventor").Width("150").Add(); + col.Field("NumberOfINPADOCPatents").HeaderText("NumberofINPADOCpatents").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); + col.Field("MainFieldsOfInvention").HeaderText("Mainfieldsofinvention").Width("150").Add(); + col.Field("Active").HeaderText("Active").Width("150").Add(); + }).Render() + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/cell/clipmode/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/cell/clipmode/tagHelper index 6d1fbaa664..8712a9169b 100644 --- a/ej2-asp-core-mvc/code-snippet/grid/cell/clipmode/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/grid/cell/clipmode/tagHelper @@ -1,11 +1,25 @@ +
+ + + + +
+ + + + + + + + + - - - - - - - - - \ No newline at end of file + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/cell/custom-tooltip/razor b/ej2-asp-core-mvc/code-snippet/grid/cell/custom-tooltip/razor new file mode 100644 index 0000000000..983ac17704 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/cell/custom-tooltip/razor @@ -0,0 +1,21 @@ +@Html.EJS().Tooltip("Tooltip").Target(".e-rowcell").ContentTemplate(@
+ @Html.EJS().Grid("Grid").DataSource((IEnumerable)ViewBag.DataSource).Columns(col => + { + col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); + col.Field("CustomerID").HeaderText("Customer Name").Width("130").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); + col.Field("OrderDate").HeaderText("Order Date").Width("130").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("yMd").Add(); + col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); + col.Field("ShipCountry").HeaderText("Ship Country").Width("120").Add(); + + }).Render() +).BeforeRender("beforeRender").Render() + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/cell/custom-tooltip/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/cell/custom-tooltip/tagHelper new file mode 100644 index 0000000000..b99fac002b --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/cell/custom-tooltip/tagHelper @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/cell/customAttribute/customStyle.cs b/ej2-asp-core-mvc/code-snippet/grid/cell/custom-tooltip/tooltip.cs similarity index 100% rename from ej2-asp-core-mvc/code-snippet/grid/cell/customAttribute/customStyle.cs rename to ej2-asp-core-mvc/code-snippet/grid/cell/custom-tooltip/tooltip.cs diff --git a/ej2-asp-core-mvc/code-snippet/grid/cell/customAttribute/razor b/ej2-asp-core-mvc/code-snippet/grid/cell/customAttribute/razor deleted file mode 100644 index b74a33b9cd..0000000000 --- a/ej2-asp-core-mvc/code-snippet/grid/cell/customAttribute/razor +++ /dev/null @@ -1,16 +0,0 @@ -@Html.EJS().Grid("CellCustomize").DataSource((IEnumerable)ViewBag.DataSource).Columns(col => -{ - col.Field("OrderID").HeaderText("Order ID").Width("120").CustomAttributes(new { @class = "customcss" }).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); - col.Field("CustomerID").HeaderText("Customer ID").Width("150").Add(); - col.Field("ShipCity").HeaderText("Ship City").CustomAttributes(new { @class = "e-attr" }).Width("150").Add(); - col.Field("OrderDate").HeaderText("Order Date").Width("130").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("yMd").Add(); - -}).AllowPaging().Render() - - diff --git a/ej2-asp-core-mvc/code-snippet/grid/cell/customAttribute/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/cell/customAttribute/tagHelper deleted file mode 100644 index 2c7fb67672..0000000000 --- a/ej2-asp-core-mvc/code-snippet/grid/cell/customAttribute/tagHelper +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - - - - \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/cell/customize/customize.cs b/ej2-asp-core-mvc/code-snippet/grid/cell/customize-cell-cs1/customize.cs similarity index 100% rename from ej2-asp-core-mvc/code-snippet/grid/cell/customize/customize.cs rename to ej2-asp-core-mvc/code-snippet/grid/cell/customize-cell-cs1/customize.cs diff --git a/ej2-asp-core-mvc/code-snippet/grid/cell/customize-cell-cs1/razor b/ej2-asp-core-mvc/code-snippet/grid/cell/customize-cell-cs1/razor new file mode 100644 index 0000000000..0b628d4905 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/cell/customize-cell-cs1/razor @@ -0,0 +1,37 @@ +@Html.EJS().Grid("Grid").DataSource((IEnumerable)ViewBag.dataSource).Columns(col => + { + col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); + col.Field("CustomerID").HeaderText("Customer ID").Width("150").Add(); + col.Field("OrderDate").HeaderText("Order Date").Width("130").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); + col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); + col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add(); + + }).EnableHover(false).AllowSelection(false).QueryCellInfo("customizeCell").Render() + +@section Scripts { + + +} diff --git a/ej2-asp-core-mvc/code-snippet/grid/cell/customize-cell-cs1/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/cell/customize-cell-cs1/tagHelper new file mode 100644 index 0000000000..8feda54679 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/cell/customize-cell-cs1/tagHelper @@ -0,0 +1,38 @@ + + + + + + + + + +@section Scripts { + + +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/cell/html/html.cs b/ej2-asp-core-mvc/code-snippet/grid/cell/customize-cell-cs2/customize.cs similarity index 100% rename from ej2-asp-core-mvc/code-snippet/grid/cell/html/html.cs rename to ej2-asp-core-mvc/code-snippet/grid/cell/customize-cell-cs2/customize.cs diff --git a/ej2-asp-core-mvc/code-snippet/grid/cell/customize-cell-cs2/razor b/ej2-asp-core-mvc/code-snippet/grid/cell/customize-cell-cs2/razor new file mode 100644 index 0000000000..ea653e94eb --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/cell/customize-cell-cs2/razor @@ -0,0 +1,17 @@ + @Html.EJS().Grid("Grid").DataSource((IEnumerable)ViewBag.dataSource).Columns(col => + { + col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); + col.Field("CustomerID").HeaderText("Customer ID").Width("150").Add(); + col.Field("OrderDate").HeaderText("Order Date").Width("130").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); + col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); + col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add(); + }).SelectionSettings(select => select.Mode(Syncfusion.EJ2.Grids.SelectionMode.Cell).Type(Syncfusion.EJ2.Grids.SelectionType.Multiple)).Render() + +@section Scripts { + +} diff --git a/ej2-asp-core-mvc/code-snippet/grid/cell/customize-cell-cs2/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/cell/customize-cell-cs2/tagHelper new file mode 100644 index 0000000000..5077f369bd --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/cell/customize-cell-cs2/tagHelper @@ -0,0 +1,19 @@ + + + + + + + + + + + +@section Scripts { + +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/cell/customize-cell-cs3/customize.cs b/ej2-asp-core-mvc/code-snippet/grid/cell/customize-cell-cs3/customize.cs new file mode 100644 index 0000000000..f6f0126ac7 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/cell/customize-cell-cs3/customize.cs @@ -0,0 +1,6 @@ +public IActionResult Index() +{ + var Order = OrderDetails.GetAllRecords(); + ViewBag.DataSource = Order; + return View(); +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/cell/customize-cell-cs3/razor b/ej2-asp-core-mvc/code-snippet/grid/cell/customize-cell-cs3/razor new file mode 100644 index 0000000000..f759115085 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/cell/customize-cell-cs3/razor @@ -0,0 +1,19 @@ + +@Html.EJS().Grid("Grid").DataSource((IEnumerable)ViewBag.dataSource).Columns(col => + { + col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).CustomAttributes(new { @class = "custom-css" }).Add(); + col.Field("CustomerID").HeaderText("Customer ID").Width("150").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); + col.Field("ShipCity").HeaderText("Ship City").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).CustomAttributes(new { @class = "custom-css" }).Add(); + col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add(); + }).Render() + +@section Scripts +{ + +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/cell/customize-cell-cs4/customize.cs b/ej2-asp-core-mvc/code-snippet/grid/cell/customize-cell-cs4/customize.cs new file mode 100644 index 0000000000..f6f0126ac7 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/cell/customize-cell-cs4/customize.cs @@ -0,0 +1,6 @@ +public IActionResult Index() +{ + var Order = OrderDetails.GetAllRecords(); + ViewBag.DataSource = Order; + return View(); +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/cell/customize-cell-cs4/razor b/ej2-asp-core-mvc/code-snippet/grid/cell/customize-cell-cs4/razor new file mode 100644 index 0000000000..86fbfdd405 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/cell/customize-cell-cs4/razor @@ -0,0 +1,21 @@ +@Html.EJS().Grid("Grid").DataSource((IEnumerable)ViewBag.dataSource).Columns(col => + { + col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); + col.Field("CustomerID").HeaderText("Customer ID").Width("250").Add(); + col.Field("ShipCity").HeaderText("ShipCity").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); + col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add(); + + }).DataBound("dataBound").Render() + +@section Scripts { + +} diff --git a/ej2-asp-core-mvc/code-snippet/grid/cell/customize-cell-cs4/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/cell/customize-cell-cs4/tagHelper new file mode 100644 index 0000000000..beed779613 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/cell/customize-cell-cs4/tagHelper @@ -0,0 +1,21 @@ + + + + + + + + + +@section Scripts { + +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/cell/customize/razor b/ej2-asp-core-mvc/code-snippet/grid/cell/customize/razor deleted file mode 100644 index bd645b8fb4..0000000000 --- a/ej2-asp-core-mvc/code-snippet/grid/cell/customize/razor +++ /dev/null @@ -1,40 +0,0 @@ -@Html.EJS().Grid("CellCustomize").DataSource((IEnumerable)ViewBag.DataSource).Columns(col => -{ - col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); - col.Field("CustomerID").HeaderText("Customer ID").Width("150").Add(); - col.Field("OrderDate").HeaderText("Order Date").Width("130").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("yMd").Add(); - col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); - col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add(); - -}).AllowPaging().QueryCellInfo("customiseCell").Render() - - - - \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/cell/customize/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/cell/customize/tagHelper deleted file mode 100644 index fa971c9a9c..0000000000 --- a/ej2-asp-core-mvc/code-snippet/grid/cell/customize/tagHelper +++ /dev/null @@ -1,23 +0,0 @@ - - - - - - - - - - - \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/cell/display-html-content/html.cs b/ej2-asp-core-mvc/code-snippet/grid/cell/display-html-content/html.cs new file mode 100644 index 0000000000..aa6cafc0db --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/cell/display-html-content/html.cs @@ -0,0 +1,5 @@ +public IActionResult Index() +{ + ViewBag.DataSource = OrderDetails.GetAllRecords(); + return View(); +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/cell/display-html-content/razor b/ej2-asp-core-mvc/code-snippet/grid/cell/display-html-content/razor new file mode 100644 index 0000000000..a1a5754f09 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/cell/display-html-content/razor @@ -0,0 +1,26 @@ + +@Html.EJS().Switch("default").Change("onSwitchChange").Render() +@Html.EJS().Grid("Grid").DataSource((IEnumerable)ViewBag.dataSource).Columns(col => + { + col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); + col.Field("CustomerID").HeaderText(" Customer ID ").Width("180").Add(); + col.Field("OrderDate").HeaderText("Order Date").Width("130").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); + col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); + col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add(); + + }).Render() + + @section Scripts { + + } \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/cell/display-html-content/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/cell/display-html-content/tagHelper new file mode 100644 index 0000000000..7d06415369 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/cell/display-html-content/tagHelper @@ -0,0 +1,22 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/cell/gridlines/gridlines.cs b/ej2-asp-core-mvc/code-snippet/grid/cell/gridlines/gridlines.cs index f6f0126ac7..8d7a09cf30 100644 --- a/ej2-asp-core-mvc/code-snippet/grid/cell/gridlines/gridlines.cs +++ b/ej2-asp-core-mvc/code-snippet/grid/cell/gridlines/gridlines.cs @@ -1,6 +1,7 @@ public IActionResult Index() { - var Order = OrderDetails.GetAllRecords(); + var Order = InventoryDetails.GetAllRecords(); ViewBag.DataSource = Order; + ViewBag.dropdownData = new string[] { "Default", "Both", "Horizontal", "Vertical", "None" }; return View(); -} \ No newline at end of file +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/cell/gridlines/razor b/ej2-asp-core-mvc/code-snippet/grid/cell/gridlines/razor index 8f66d088ed..b42ce6c369 100644 --- a/ej2-asp-core-mvc/code-snippet/grid/cell/gridlines/razor +++ b/ej2-asp-core-mvc/code-snippet/grid/cell/gridlines/razor @@ -1,9 +1,22 @@ -@Html.EJS().Grid("GridLine").DataSource((IEnumerable)ViewBag.dataSource).GridLines(Syncfusion.EJ2.Grids.GridLine.Both).Columns(col => -{ - col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); - col.Field("CustomerID").HeaderText("Customer ID").Width("150").Add(); - col.Field("OrderDate").HeaderText("Order Date").Width("130").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("yMd").Add(); - col.Field("Freight").HeaderText("Freight").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("C2").Add(); - col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add(); +
+ + + @Html.EJS().DropDownList("GridLines").Width("180px").DataSource(new List { "Default", "Both", "Horizontal", "Vertical", "None" }).Change("change").Render() + -}).AllowPaging().PageSettings(page => { page.PageCount(5);}).Render() \ No newline at end of file + + @Html.EJS().Grid("Grid").DataSource((IEnumerable)ViewBag.dataSource).Columns(col => + { + col.Field("NumberOfPatentFamilies").HeaderText("NumberofPatentFamilies").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); + col.Field("Inventor").HeaderText("Inventor").Width("150").Add(); + col.Field("NumberOfINPADOCPatents").HeaderText("NumberofINPADOCpatents").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); + col.Field("MainFieldsOfInvention").HeaderText("Mainfieldsofinvention").Width("150").Add(); + col.Field("Active").HeaderText("Active").Width("150").Add(); + }).Render() + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/cell/gridlines/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/cell/gridlines/tagHelper index 12fd63f733..4334dbf219 100644 --- a/ej2-asp-core-mvc/code-snippet/grid/cell/gridlines/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/grid/cell/gridlines/tagHelper @@ -1,9 +1,23 @@ - - +
+ + + + +
+ - - - - + + + + + - \ No newline at end of file + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/cell/html/razor b/ej2-asp-core-mvc/code-snippet/grid/cell/html/razor deleted file mode 100644 index 8cd2e0d79c..0000000000 --- a/ej2-asp-core-mvc/code-snippet/grid/cell/html/razor +++ /dev/null @@ -1,9 +0,0 @@ -@Html.EJS().Grid("HTMLEncode").DataSource((IEnumerable)ViewBag.dataSource).Columns(col => -{ - col.Field("OrderID").HeaderText(" Order ID ").Width("120").DisableHtmlEncode(true).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); - col.Field("CustomerID").HeaderText(" Customer ID ").Width("150").DisableHtmlEncode(true).Add(); - col.Field("OrderDate").HeaderText("Order Date").Width("130").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); - col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); - col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add(); - -}).AllowPaging().PageSettings(page => { page.PageCount(5);}).Render() \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/cell/html/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/cell/html/tagHelper deleted file mode 100644 index 030f93a84d..0000000000 --- a/ej2-asp-core-mvc/code-snippet/grid/cell/html/tagHelper +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/cell/tooltip/razor b/ej2-asp-core-mvc/code-snippet/grid/cell/tooltip/razor new file mode 100644 index 0000000000..10b6460ab6 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/cell/tooltip/razor @@ -0,0 +1,19 @@ +@Html.EJS().Grid("Grid").DataSource((IEnumerable)ViewBag.dataSource).Columns(col => + { + col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); + col.Field("CustomerID").HeaderText("Customer ID").Width("250").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Template("#template").Add(); + col.Field("ShipCity").HeaderText("ShipCity").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); + col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add(); + +}).Render() + +@section Scripts { + + +} diff --git a/ej2-asp-core-mvc/code-snippet/grid/cell/tooltip/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/cell/tooltip/tagHelper new file mode 100644 index 0000000000..4dd6cad758 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/cell/tooltip/tagHelper @@ -0,0 +1,19 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/cell/tooltip/tooltip.cs b/ej2-asp-core-mvc/code-snippet/grid/cell/tooltip/tooltip.cs new file mode 100644 index 0000000000..f6f0126ac7 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/cell/tooltip/tooltip.cs @@ -0,0 +1,6 @@ +public IActionResult Index() +{ + var Order = OrderDetails.GetAllRecords(); + ViewBag.DataSource = Order; + return View(); +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/schedule/localization/localization/razor b/ej2-asp-core-mvc/code-snippet/schedule/localization/localization/razor index 910a842d0c..884e4ada4c 100644 --- a/ej2-asp-core-mvc/code-snippet/schedule/localization/localization/razor +++ b/ej2-asp-core-mvc/code-snippet/schedule/localization/localization/razor @@ -18,6 +18,7 @@ "week": "Hét", "workWeek": "Munkahét", "month": "Hónap", + "year": "Év", "agenda": "Napirend", "weekAgenda": "Hét menetrend", "workWeekAgenda": "Munkahét napirend", @@ -44,6 +45,7 @@ "subject": "Tantárgy", "addTitle": "Cím hozzáadása", "moreDetails": "További részletek", + "moreEvents": "Több esemény", "save": "Mentés", "editContent": "Csak ezt az eseményt vagy egész sorozatot szeretné szerkeszteni?", "deleteRecurrenceContent": "Csak ezt az eseményt vagy egész sorozatot szeretné törölni?", @@ -66,12 +68,16 @@ "createError": "Az esemény időtartamának rövidebbnek kell lennie, mint a gyakorisága. Rövidítse az időtartamot, vagy változtassa meg az ismétlődési esemény szerkesztőjének ismétlődési mintáját.", "recurrenceDateValidation": "Néhány hónap kevesebb, mint a kiválasztott dátum. Ezekben a hónapokban az esemény a hónap utolsó napjára esik.", "sameDayAlert": "Ugyanezen esemény két eseménye nem fordulhat elő ugyanazon a napon.", + "occurenceAlert": "Nem lehet átütemezni az ismétlődő találkozó előfordulását, ha átugrik ugyanazon találkozó későbbi előfordulását.", "editRecurrence": "Ismétlés szerkesztése", "repeats": "ismétlődés", "alert": "Éber", "startEndError": "A kiválasztott befejezési dátum a kezdő dátum előtt történik.", "invalidDateError": "A megadott dátumérték érvénytelen.", + "blockAlert": "Az eseményeket nem lehet ütemezni a blokkolt időtartományon belül.", "ok": "Rendben", + "yes": "Igen", + "no": "Nem", "occurrence": "Esemény", "series": "Sorozat", "previous": "Előző", @@ -80,8 +86,16 @@ "timelineWeek": "Idősor-hét", "timelineWorkWeek": "Idővonal munkahét", "timelineMonth": "Idővonal hónap", + "timelineYear": "Idővonal év", "expandAllDaySection": "kiterjed", - "collapseAllDaySection": "összeomlás" + "collapseAllDaySection": "összeomlás", + "editFollowingEvent": "Következő események", + "deleteTitle": "Esemény törlése", + "editTitle": "Esemény szerkesztése", + "beginFrom": "Kezdje", + "endAt": "Vége", + "searchTimezone": "Időzóna keresése", + "noRecords": "Nincs találat" }, "recurrenceeditor": { "none": "Egyik sem", diff --git a/ej2-asp-core-mvc/code-snippet/schedule/localization/localization/tagHelper b/ej2-asp-core-mvc/code-snippet/schedule/localization/localization/tagHelper index b89684de68..e0adc550c9 100644 --- a/ej2-asp-core-mvc/code-snippet/schedule/localization/localization/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/schedule/localization/localization/tagHelper @@ -13,6 +13,7 @@ "week": "Hét", "workWeek": "Munkahét", "month": "Hónap", + "year": "Év", "agenda": "Napirend", "weekAgenda": "Hét menetrend", "workWeekAgenda": "Munkahét napirend", @@ -39,6 +40,7 @@ "subject": "Tantárgy", "addTitle": "Cím hozzáadása", "moreDetails": "További részletek", + "moreEvents": "Több esemény", "save": "Mentés", "editContent": "Csak ezt az eseményt vagy egész sorozatot szeretné szerkeszteni?", "deleteRecurrenceContent": "Csak ezt az eseményt vagy egész sorozatot szeretné törölni?", @@ -61,12 +63,16 @@ "createError": "Az esemény időtartamának rövidebbnek kell lennie, mint a gyakorisága. Rövidítse az időtartamot, vagy változtassa meg az ismétlődési esemény szerkesztőjének ismétlődési mintáját.", "recurrenceDateValidation": "Néhány hónap kevesebb, mint a kiválasztott dátum. Ezekben a hónapokban az esemény a hónap utolsó napjára esik.", "sameDayAlert": "Ugyanezen esemény két eseménye nem fordulhat elő ugyanazon a napon.", + "occurenceAlert": "Nem lehet átütemezni az ismétlődő találkozó előfordulását, ha átugrik ugyanazon találkozó későbbi előfordulását.", "editRecurrence": "Ismétlés szerkesztése", "repeats": "ismétlődés", "alert": "Éber", "startEndError": "A kiválasztott befejezési dátum a kezdő dátum előtt történik.", "invalidDateError": "A megadott dátumérték érvénytelen.", + "blockAlert": "Az eseményeket nem lehet ütemezni a blokkolt időtartományon belül.", "ok": "Rendben", + "yes": "Igen", + "no": "Nem", "occurrence": "Esemény", "series": "Sorozat", "previous": "Előző", @@ -75,8 +81,16 @@ "timelineWeek": "Idősor-hét", "timelineWorkWeek": "Idővonal munkahét", "timelineMonth": "Idővonal hónap", + "timelineYear": "Idővonal év", "expandAllDaySection": "kiterjed", - "collapseAllDaySection": "összeomlás" + "collapseAllDaySection": "összeomlás", + "editFollowingEvent": "Következő események", + "deleteTitle": "Esemény törlése", + "editTitle": "Esemény szerkesztése", + "beginFrom": "Kezdje", + "endAt": "Vége", + "searchTimezone": "Időzóna keresése", + "noRecords": "Nincs találat" }, "recurrenceeditor": { "none": "Egyik sem", diff --git a/ej2-asp-core-mvc/common/EJ2_ASP.NETCORE/showcase-samples.md b/ej2-asp-core-mvc/common/EJ2_ASP.NETCORE/showcase-samples.md index 2c525dd82e..d47f979e4a 100644 --- a/ej2-asp-core-mvc/common/EJ2_ASP.NETCORE/showcase-samples.md +++ b/ej2-asp-core-mvc/common/EJ2_ASP.NETCORE/showcase-samples.md @@ -18,3 +18,4 @@ Syncfusion has a collection of sample applications that demonstrate the use of S | [Expense Tracker](https://ej2.syncfusion.com/showcase/aspnetcore/expense-tracker/) | Track and visualize your daily expenses with a great UI. | [GitHub code](https://github.com/syncfusion/ej2-showcase-aspnetcore-expensetracker) | | [Loan Calculator](https://ej2.syncfusion.com/showcase/aspnetcore/loan-calculator/) | Calculate loan payments, interest rates, and amortization schedules. When you are planning for a personal loan or analyzing business financing options, this provides accurate results and helps you make informed financial decisions. | [GitHub code](https://github.com/syncfusion/ej2-showcase-aspnetcore-loan-calculator) | | [Web Mail](https://ej2.syncfusion.com/showcase/aspnetcore/webmail/) | Outlook like user interface to manage your mailbox. | [GitHub code](https://github.com/syncfusion/ej2-showcase-aspnetcore-outlook) | + diff --git a/ej2-asp-core-mvc/document-editor/faq/unsupported-file-format.md b/ej2-asp-core-mvc/document-editor/faq/unsupported-file-format.md new file mode 100644 index 0000000000..8ffd3eff1c --- /dev/null +++ b/ej2-asp-core-mvc/document-editor/faq/unsupported-file-format.md @@ -0,0 +1,29 @@ +--- +layout: post +title: Unsupported file in ##Platform_Name## Document Editor Component | Syncfusion +description: Learn here all about Unsupported file in Syncfusion ##Platform_Name## Document Editor component of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: Unsupported file +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Why Do I Get the Unsupported Warning Message When Opening a Document? + +If you receive an "The file format you have selected isn't supported. Please choose valid format." message when opening a document in the Document Editor, it typically indicates that the document format is not supported by the current version of the Document Editor. Here are some common reasons for this warning: +1. Unsupported File Format: The document you are trying to open might be in a format that the Document Editor does not support. Ensure you are using a supported format, such as SFDT. +2. Corrupted Document: The document file might be corrupted or improperly formatted. Try opening a different document to see if the issue persists. +To avoid this warning, always use the recommended document formats and features supported by the Document Editor. + +Document Editor supports the following file formats: +• Word Document (*.docx) +• Syncfusion Document Text (*.sfdt) +• Plain Text (*.txt) +• Word Template (*.dotx) +• HyperText Markup Language (*.html) +• Rich Text Format (*.rtf) +• Word XML Document(*.xml) +• Word 97-2003 Template (*.dot) +• Word 97-2003 Document (*.doc) + +By using these supported formats, you can ensure compatibility and avoid unsupported warning messages when opening documents in the Document Editor. \ No newline at end of file diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/cell.md b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/cell.md new file mode 100644 index 0000000000..7b4823c3e6 --- /dev/null +++ b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/cell.md @@ -0,0 +1,300 @@ +--- +layout: post +title: Cell in ##Platform_Name## Grid Component +description: Learn here all about Cell in Syncfusion ##Platform_Name## Grid component of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: Cell +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Cell in ##Platform_Name## Grid component + +In the Syncfusion ##Platform_Name## Grid, a **cell** refers to an individual data point or a unit within a grid column that displays data. It represents the intersection of a row and a column, and it contains specific information associated with that row and column. Each cell can display text, numbers, or other content related to the data it represents. + +The Grid component allows you to customize the appearance and behavior of cells using various features and options. You can define templates, format cell values, enable or disable editing, and perform various other operations on the cells to create interactive and informative data grids in your web applications. + +## Displaying the HTML content + +Displaying HTML content in a Grid can be useful in scenarios where you want to display formatted content, such as images, links, or tables, in a tabular format. Grid component allows you to display HTML tags in the Grid header and content. By default, the HTML content is encoded to prevent potential security vulnerabilities. However, you can enable the `DisableHtmlEncode` property by setting the value as **false** to display HTML tags without encoding. This feature is useful when you want to display HTML content in a grid cell. + +In the following example, the [EJ2 Toggle Switch Button](https://ej2.syncfusion.com/aspnetmvc/documentation/switch/getting-started) component is added to enable and disable the `DisableHtmlEncode` property. When the switch is toggled, the [Change](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Buttons.Switch.html#Syncfusion_EJ2_Buttons_Switch_Change) event is triggered and the `DisableHtmlEncode` property of the column is updated accordingly. The `refreshColumns` method is called to refresh the grid and display the updated content. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/grid/cell/display-html-content/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Html.cs" %} +{% include code-snippet/grid/cell/display-html-content/html.cs %} +{% endhighlight %} +{% endtabs %} + +![Display HTML content](../images/cell/display-html-content.gif) + +> * The `DisableHtmlEncode` property disables HTML encoding for the corresponding column in the grid. +> * If the property is set to **true**, any HTML tags in the column's data will be displayed. +> * If the property is set to **false**, the HTML tags will be removed and displayed as plain text. +> * Disabling HTML encoding can potentially introduce security vulnerabilities, so use caution when enabling this feature. +> * If [EnableHtmlSanitizer](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_EnableHtmlSanitizer) property of grid is set to true, then the content is sanitized to prevent any potential security vulnerabilities. +> * You can also disable the `DisableHtmlEncode` property of the column using `getColumns` method on [Change](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Buttons.Switch.html#Syncfusion_EJ2_Buttons_Switch_Change) event of Switch component.This is demonstrated in the below code snippet, + +```javascript +function change(args) { + if (args.checked) { + grid.getColumns()[1].disableHtmlEncode = false; + } else { + grid.getColumns()[1].disableHtmlEncode = true; + } + grid.refresh(); +} +``` + +## Autowrap the content + +The auto wrap feature allows the cell content in the grid to wrap to the next line when it exceeds the boundary of the specified cell width. The cell content wrapping works based on the position of white space between words. To support the Autowrap functionality in Syncfusion Grid, you should set the appropriate [Width](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_Width) for the columns. The column width defines the maximum width of a column and helps to wrap the content automatically. + +To enable auto wrap, set the [AllowTextWrap](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_AllowTextWrap) property to **true**. You can also configure the wrap mode by setting the [WrapMode](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.GridTextWrapSettings.html#Syncfusion_EJ2_Grids_GridTextWrapSettings_WrapMode) property. + +Grid provides the below three options for configuring: + +* **Both** - This is the default value for wrapMode. With this option, both the grid **Header** and **Content** text is wrapped. +* **Header** - With this option, only the grid header text is wrapped. +* **Content** - With this option, only the grid content is wrapped. + +The following example demonstrates how to set the `AllowTextWrap` property to **true** and specify the wrap mode as **Content** by setting the `WrapMode` property. Also change the `WrapMode` property to **Content** and **Both** on changing the dropdown value using the [Change](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.DropDowns.DropDownList.html#Syncfusion_EJ2_DropDowns_DropDownList_Change) event of the DropDownList component. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/grid/cell/autowrap/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Autowrap.cs" %} +{% include code-snippet/grid/cell/autowrap/autowrap.cs %} +{% endhighlight %} +{% endtabs %} + +![Auto Wrap the content ](../images/cell/auto-wrap.png) + +> * If a column width is not specified, then the Autowrap of columns will be adjusted with respect to the grid's width. +> * If a column's header text contains no white space, the text may not be wrapped. +> * If the content of a cell contains HTML tags, the Autowrap functionality may not work as expected. In such cases, you can use the `HeaderTemplate` and `Template` properties of the column to customize the appearance of the header and cell content. + +## Customize cell styles + +Customizing the grid cell styles allows you to modify the appearance of cells in the Grid control to meet your design requirements. You can customize the font, background color, and other styles of the cells. To customize the cell styles in the grid, you can use grid event, css, property or method support. + +### Using event + +To customize the appearance of the grid cell, you can use the [QueryCellInfo](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_QueryCellInfo) event of the grid. This event is triggered when each header cell is rendered in the grid, and provides an object that contains information about the header cell. You can use this object to modify the styles of the header cell. + +The following example demonstrates how to add a `QueryCellInfo` event handler to the grid. In the event handler, checked whether the current column is **Freight** field and then applied the appropriate CSS class to the cell based on its value. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/grid/cell/customize-cell-cs1/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Html.cs" %} +{% include code-snippet/grid/cell/customize-cell-cs1/customize.cs %} +{% endhighlight %} +{% endtabs %} + +![Customize cell using event](../images/cell/customize-cell-using-event.png) + +> * The [QueryCellInfo](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_QueryCellInfo) event is triggered for every cell of the grid, so it may impact the performance of the grid whether used to modify a large number of cells. + +### Using CSS + +You can apply styles to the cells using CSS selectors. The Grid provides a class name for each cell element, which you can use to apply styles to that specific cell or cells in a particular column. The `e-rowcell` class is used to style the row cells, and the `e-selectionbackground` class is used to change the background color of the selected row. + +```CSS +.e-grid td.e-cellselectionbackground { + background: #9ac5ee; + font-style: italic; +} +``` + +The following example demonstrates how to customize the appearance of a specific row in the grid on selection using `className`. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/grid/cell/customize-cell-cs2/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Html.cs" %} +{% include code-snippet/grid/cell/customize-cell-cs2/customize.cs %} +{% endhighlight %} +{% endtabs %} + +![Customize cell using css](../images/cell/customize-cell-using-css.png) + +### Using property + +To customize the style of grid cells, define `CustomAttributes` property to the column definition object. The `CustomAttributes` property takes an object with the name-value pair to customize the CSS properties for grid cells. You can also set multiple CSS properties to the custom class using the `CustomAttributes` property. + +```CSS +.custom-css { + background: #d7f0f4; + font-style: italic; + color:navy +} +``` +Here, setting the `CustomAttributes` property of the **ShipCity** column to an object that contains the CSS class **'custom-css'**. This CSS class will be applied to all the cells in the **ShipCity** column of the grid. + +```js + col.Field("ShipCity").HeaderText("Ship City").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).CustomAttributes(new { @class = "custom-css" }).Add(); +``` +The following example demonstrates how to customize the appearance of the **OrderID** and **ShipCity** columns using custom attributes. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/grid/cell/customize-cell-cs3/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Html.cs" %} +{% include code-snippet/grid/cell/customize-cell-cs3/customize.cs %} +{% endhighlight %} +{% endtabs %} + +![Customize cell using property](../images/cell/customize-cell-using-property.png) + +> Custom attributes can be used to customize any cell in the grid, including header and footer cells. + +### Using methods + +The Grid provides below methods to customize the appearance of the grid columns header and cell: + +1. **getHeaderContent**: The `getHeaderContent` method is used to customize the appearance of the column header in the grid and accessing the header element using the `querySelector` method and applying the style using the style property of the cell element. + +2. **getCellFromIndex**: The `getCellFromIndex` method is used to customize the appearance of a specific cell in the grid by specifying the index of the row and column for which you want to customize the appearance. + +The following example demonstrates how to use getColumnHeaderByIndex and getCellFromIndex methods to customize the appearance of the **CustomerID** column header and specific cell inside the [DataBound](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_DataBound) event of the grid. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/grid/cell/customize-cell-cs4/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Html.cs" %} +{% include code-snippet/grid/cell/customize-cell-cs4/customize.cs %} +{% endhighlight %} +{% endtabs %} + +![Customize cell using property](../images/cell/customize-cell-using-method.png) + +> Make sure to pass the correct row and column indices to `getCellFromIndex` method, or else the appearance of the wrong cell might get customized. + +## Clip Mode + +The clip mode feature is useful when you have a long text or content in a grid cell, which overflows the cell's width or height. It provides options to display the overflow content by either truncating it, displaying an ellipsis or displaying an ellipsis with a tooltip. You can enable this feature by setting [ClipMode](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.ClipMode.html) property to one of the below available options. + +There are three types of `ClipMode` available: + +* **Clip**: Truncates the cell content when it overflows its area. +* **Ellipsis**: Displays ellipsis when the cell content overflows its area. +* **EllipsisWithTooltip**: Displays ellipsis when the cell content overflows its area, also it will display the tooltip while hover on ellipsis is applied. Also it will display the tooltip while hover on ellipsis is applied. + +The following example demonstrates, how to set the `ClipMode` property to **Clip** , **Ellipsis** and **EllipsisWithTooltip** for the **Main Fields of Invention** column, on changing the dropdown value using the [Change](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.DropDowns.DropDownList.html#Syncfusion_EJ2_DropDowns_DropDownList_Change) event of the `DropDownList` component. The `refresh` method is used to refresh the grid and display the updated content. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/grid/cell/clipmode/razor %} +{% endhighlight %}c +{% highlight c# tabtitle="Clipmode.cs" %} +{% include code-snippet/grid/cell/clipmode/clipmode.cs %} +{% endhighlight %} +{% endtabs %} + +![Clip Mode](../images/cell/clip-mode.gif) + +> * By default, `ClipMode` value is **Ellipsis**. +> * If you set the [Width](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_Width) property of a column, the clip mode feature will be automatically applied to that column if the content exceeds the specified width. +> * Be careful when using the Clip mode, as it may result in important information being cut off. It is generally recommended to use the Ellipsis or EllipsisWithTooltip modes instead. + +## Tooltip + +The Syncfusion Grid allows you to display information about the grid columns to the user when they hover over them with the mouse. + +### Render bootstrap tooltip in grid cells + +The Grid control allows rendering Bootstrap tooltips in the cells. To enable this feature, you need to add the Bootstrap CDN link and call the tooltip() method to initialize the tooltip. + +This is demonstrated in the sample code below which shows how to enable Bootstrap tooltip for the **CustomerID** field using `Template` property in grid cells, + +Step 1: Add the CDN link of Boostrap in the `_Layout.cshtml` file. Place the `link` tag in the `head` for the CSS. + +```html + + + + + +``` + +Step 2: The following code demonstrates how to render Bootstrap tooltip for the **CustomerID** field with `Template` on grid cells. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/grid/cell/tooltip/razor %} +{% endhighlight %} +{% highlight c# tabtitle="tooltip.cs" %} +{% include code-snippet/grid/cell/tooltip/tooltip.cs %} +{% endhighlight %} +{% endtabs %} + +The following screenshot represents the Bootstrap tooltip for the **CustomerID** field, + +![ Render bootstrap tooltip in grid](../images/cell/render-tooltip.png) + +> * The Bootstrap CDN link must be added to the HTML file. + +### Display custom tooltip for columns + +The Grid provides a feature to display custom tooltips for its columns using the `EJ2 Tooltip` component. This allows you to provide additional information about the columns when the user hovers over them. + +To enable custom tooltips for columns in the Grid, you can render the Grid control inside the Tooltip component and set the target as `.e-rowcell`. This will display the tooltip when hovering over the grid cells. + +Change the tooltip content for the grid cells by using the following code in the [BeforeRender](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Popups.Tooltip.html#Syncfusion_EJ2_Popups_Tooltip_BeforeRender) event. + +```typescript + beforeRender(args): void { + if (args.target.classList.contains('e-rowcell')) { + // event triggered before render the tooltip on target element. + this.tooltip.content = 'This is value "' + args.target.innerText + '" '; + } + } + +``` + +The following example demonstrates how to customize the tooltip content for the grid cells by using the `BeforeRender` event of the EJ2 Tooltip component. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/grid/cell/custom-tooltip/razor %} +{% endhighlight %} +{% highlight c# tabtitle="tooltip.cs" %} +{% include code-snippet/grid/cell/custom-tooltip/tooltip.cs %} +{% endhighlight %} +{% endtabs %} + +![Display custom tooltip](../images/cell/custom-tooltip.png) + +## Grid lines + +The [GridLines](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_GridLines) in a grid are used to separate the cells with horizontal and vertical lines for better readability. You can enable the grid lines by setting the `GridLines` property to one of the following values: + +| Modes | Actions | +| ---------- | ----------------------------------------------------- | +| Both | Displays both the horizontal and vertical grid lines. | +| None | No grid lines are displayed. | +| Horizontal | Displays the horizontal grid lines only. | +| Vertical | Displays the vertical grid lines only. | +| Default | Displays grid lines based on the theme. | + +The following example demonstrates how to set the `GridLines` property based on changing the dropdown value using the [Change](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.DropDowns.DropDownList.html#Syncfusion_EJ2_DropDowns_DropDownList_Change) event of the DropDownList component. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/grid/cell/gridlines/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Gridlines.cs" %} +{% include code-snippet/grid/cell/gridlines/gridlines.cs %} +{% endhighlight %} +{% endtabs %} + +![Grid Lines](../images/cell/grid-lines.gif) diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/cell/auto-wrap.md b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/cell/auto-wrap.md deleted file mode 100644 index 382fa87262..0000000000 --- a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/cell/auto-wrap.md +++ /dev/null @@ -1,47 +0,0 @@ ---- -layout: post -title: Auto Wrap in ##Platform_Name## Grid Component -description: Learn here all about Auto Wrap in Syncfusion ##Platform_Name## Grid component of Syncfusion Essential JS 2 and more. -platform: ej2-asp-core-mvc -control: Auto Wrap -publishingplatform: ##Platform_Name## -documentation: ug ---- - -# Auto Wrap - -The auto wrap allows the cell content of the grid to wrap to the next line when it exceeds the boundary of the cell width. The Cell Content wrapping works based on the position of white space between words. To enable auto wrap, set the [`AllowTextWrap`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_AllowTextWrap) property to **true**. You can configure the auto wrap mode by setting the [`WrapMode`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridTextWrapSettings.html#Syncfusion_EJ2_Grids_GridTextWrapSettings_WrapMode) property of [`TextWrapSettings`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridTextWrapSettings.html). - -There are three types of [`WrapMode`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridTextWrapSettings.html#Syncfusion_EJ2_Grids_GridTextWrapSettings_WrapMode). They are: - -* **Both**: Both value is set by default. Auto wrap will be enabled for both the content and the header. -* **Header**: Auto wrap will be enabled only for the header. -* **Content**: Auto wrap will be enabled only for the content. - -N> When a column width is not specified, then auto wrap of columns will be adjusted with respect to the grid's width. - -In the following example, the [`WrapMode`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridTextWrapSettings.html#Syncfusion_EJ2_Grids_GridTextWrapSettings_WrapMode) is set to **Content**. - -{% if page.publishingplatform == "aspnet-core" %} - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/grid/cell/autowrap/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="Autowrap.cs" %} -{% include code-snippet/grid/cell/autowrap/autowrap.cs %} -{% endhighlight %} -{% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/grid/cell/autowrap/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Autowrap.cs" %} -{% include code-snippet/grid/cell/autowrap/autowrap.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/cell/cell.md b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/cell/cell.md deleted file mode 100644 index cd21fc257e..0000000000 --- a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/cell/cell.md +++ /dev/null @@ -1,118 +0,0 @@ ---- -layout: post -title: Cell in ##Platform_Name## Grid Component -description: Learn here all about Cell in Syncfusion ##Platform_Name## Grid component of Syncfusion Essential JS 2 and more. -platform: ej2-asp-core-mvc -control: Cell -publishingplatform: ##Platform_Name## -documentation: ug ---- - -# Cell - -## Cell customization - -The appearance of cells can be customized by using the [`QueryCellInfo`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_QueryCellInfo) event. The [`QueryCellInfo`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_QueryCellInfo) event triggers for every cell. In that event handler, you can get **QueryCellInfoEventArgs** that contains the details of the cell. - -{% if page.publishingplatform == "aspnet-core" %} - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/grid/cell/customize/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="Customize.cs" %} -{% include code-snippet/grid/cell/customize/customize.cs %} -{% endhighlight %} -{% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/grid/cell/customize/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Customize.cs" %} -{% include code-snippet/grid/cell/customize/customize.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - - -## Custom attributes - -You can customize the grid cells by adding a CSS class to the [`customAttribute`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_CustomAttributes) property of the column. - -```CSS -.e-attr { - background: #d7f0f4; -} -``` - -In the below example, we have customized the cells of **OrderID** and **ShipCity** columns. - -{% if page.publishingplatform == "aspnet-core" %} - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/grid/cell/customAttribute/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="CustomStyle.cs" %} -{% include code-snippet/grid/cell/customAttribute/customStyle.cs %} -{% endhighlight %} -{% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/grid/cell/customAttribute/razor %} -{% endhighlight %} -{% highlight c# tabtitle="CustomStyle.cs" %} -{% include code-snippet/grid/cell/customAttribute/customStyle.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - - -## Grid lines - -The [`GridLines`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_GridLines) have option to display cell border and it can be defined by the [`GridLines`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_GridLines) property. - -The available modes of grid lines are: - -| Modes | Actions | -|-------|---------| -| Both | Displays both the horizontal and vertical grid lines.| -| None | No grid lines are displayed.| -| Horizontal | Displays the horizontal grid lines only.| -| Vertical | Displays the vertical grid lines only.| -| Default | Displays grid lines based on the theme.| - -{% if page.publishingplatform == "aspnet-core" %} - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/grid/cell/gridlines/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="Gridlines.cs" %} -{% include code-snippet/grid/cell/gridlines/gridlines.cs %} -{% endhighlight %} -{% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/grid/cell/gridlines/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Gridlines.cs" %} -{% include code-snippet/grid/cell/gridlines/gridlines.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - - -N> By default, the grid renders with **Default** mode. \ No newline at end of file diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/cell/clip-mode.md b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/cell/clip-mode.md deleted file mode 100644 index 56801f3ef2..0000000000 --- a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/cell/clip-mode.md +++ /dev/null @@ -1,46 +0,0 @@ ---- -layout: post -title: Clip Mode in ##Platform_Name## Grid Component -description: Learn here all about Clip Mode in Syncfusion ##Platform_Name## Grid component of Syncfusion Essential JS 2 and more. -platform: ej2-asp-core-mvc -control: Clip Mode -publishingplatform: ##Platform_Name## -documentation: ug ---- - -# Clip Mode - -The clip mode provides options to display its overflow cell content and it can be defined by the [`ClipMode`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.ClipMode.html) property in [`Column`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html). - -There are three types of ClipMode. They are: - -* **Clip**: Truncates the cell content when it overflows its area. -* **Ellipsis**: Displays ellipsis when the cell content overflows its area. -* **EllipsisWithTooltip**: Displays ellipsis when the cell content overflows its area, also it will display the tooltip while hover on ellipsis is applied. - -{% if page.publishingplatform == "aspnet-core" %} - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/grid/cell/clipmode/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="Clipmode.cs" %} -{% include code-snippet/grid/cell/clipmode/clipmode.cs %} -{% endhighlight %} -{% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/grid/cell/clipmode/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Clipmode.cs" %} -{% include code-snippet/grid/cell/clipmode/clipmode.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - - -N> By default, [`ClipMode`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.ClipMode.html) value is **Ellipsis**. \ No newline at end of file diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/cell/content.md b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/cell/content.md deleted file mode 100644 index ef222d6a76..0000000000 --- a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/cell/content.md +++ /dev/null @@ -1,37 +0,0 @@ ---- -layout: post -title: Content in ##Platform_Name## Grid Component -description: Learn here all about Content in Syncfusion ##Platform_Name## Grid component of Syncfusion Essential JS 2 and more. -platform: ej2-asp-core-mvc -control: Content -publishingplatform: ##Platform_Name## -documentation: ug ---- - -# Displaying the HTML content - -The HTML tags can be displayed in the Grid header and content by enabling the [`DisableHtmlEncode`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_DisableHtmlEncode) property in [`Column`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html). - -{% if page.publishingplatform == "aspnet-core" %} - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/grid/cell/html/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="Html.cs" %} -{% include code-snippet/grid/cell/html/html.cs %} -{% endhighlight %} -{% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/grid/cell/html/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Html.cs" %} -{% include code-snippet/grid/cell/html/html.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/cell.md b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/cell.md new file mode 100644 index 0000000000..5c661011a9 --- /dev/null +++ b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/cell.md @@ -0,0 +1,301 @@ +--- +layout: post +title: Cell in ##Platform_Name## Syncfusion Grid Component +description: Learn here all about Cell in Syncfusion ##Platform_Name## Grid component of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: Cell +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Cell in ##Platform_Name## Syncfusion Grid component + +In the Syncfusion ##Platform_Name## Grid, a **cell** refers to an individual data point or a unit within a grid column that displays data. It represents the intersection of a row and a column, and it contains specific information associated with that row and column. Each cell can display text, numbers, or other content related to the data it represents. + +The Grid component allows you to customize the appearance and behavior of cells using various features and options. You can define templates, format cell values, enable or disable editing, and perform various other operations on the cells to create interactive and informative data grids in your web applications. + +## Displaying the HTML content + +Displaying HTML content in a Grid can be useful in scenarios where you want to display formatted content, such as images, links, or tables, in a tabular format. Grid component allows you to display HTML tags in the Grid header and content. By default, the HTML content is encoded to prevent potential security vulnerabilities. However, you can enable the `disableHtmlEncode` property by setting the value as **false** to display HTML tags without encoding. This feature is useful when you want to display HTML content in a grid cell. + +In the following example, the [EJ2 Toggle Switch Button](https://ej2.syncfusion.com/aspnetcore/documentation/switch/getting-started) component is added to enable and disable the `disableHtmlEncode` property. When the switch is toggled, the [change](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Buttons.Switch.html#Syncfusion_EJ2_Buttons_Switch_Change) event is triggered and the `disableHtmlEncode` property of the column is updated accordingly. The `refreshColumns` method is called to refresh the grid and display the updated content. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/grid/cell/display-html-content/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Html.cs" %} +{% include code-snippet/grid/cell/display-html-content/html.cs %} +{% endhighlight %} +{% endtabs %} + +![Display HTML content](../images/cell/display-html-content.gif) + +> * The `disableHtmlEncode` property disables HTML encoding for the corresponding column in the grid. +> * If the property is set to **true**, any HTML tags in the column's data will be displayed. +> * If the property is set to **false**, the HTML tags will be removed and displayed as plain text. +> * Disabling HTML encoding can potentially introduce security vulnerabilities, so use caution when enabling this feature. +> * If [enableHtmlSanitizer](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_EnableHtmlSanitizer) property of grid is set to true, then the content is sanitized to prevent any potential security vulnerabilities. +> * You can also disable the `disableHtmlEncode` property of the column using `getColumns` method on [change](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Buttons.Switch.html#Syncfusion_EJ2_Buttons_Switch_Change) event of Switch component.This is demonstrated in the below code snippet, + +```javascript +function change(args) { + if (args.checked) { + grid.getColumns()[1].disableHtmlEncode = false; + } else { + grid.getColumns()[1].disableHtmlEncode = true; + } + grid.refresh(); +} +``` + +## Autowrap the content + +The auto wrap feature allows the cell content in the grid to wrap to the next line when it exceeds the boundary of the specified cell width. The cell content wrapping works based on the position of white space between words. To support the Autowrap functionality in Syncfusion Grid, you should set the appropriate [width](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_Width) for the columns. The column width defines the maximum width of a column and helps to wrap the content automatically. + +To enable auto wrap, set the [allowTextWrap](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_AllowTextWrap) property to **true**. You can also configure the wrap mode by setting the [wrapMode](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridTextWrapSettings.html#Syncfusion_EJ2_Grids_GridTextWrapSettings_WrapMode) property. + +Grid provides the below three options for configuring: + +* **Both** - This is the default value for wrapMode. With this option, both the grid **Header** and **Content** text is wrapped. +* **Header** - With this option, only the grid header text is wrapped. +* **Content** - With this option, only the grid content is wrapped. + +The following example demonstrates how to set the `allowTextWrap` property to **true** and specify the wrap mode as **Content** by setting the `wrapMode` property. Also change the `wrapMode` property to **Content** and **Both** on changing the dropdown value using the [change](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.DropDowns.DropDownList.html#Syncfusion_EJ2_DropDowns_DropDownList_Change) event of the DropDownList component. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/grid/cell/autowrap/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Autowrap.cs" %} +{% include code-snippet/grid/cell/autowrap/autowrap.cs %} +{% endhighlight %} +{% endtabs %} + +![Auto Wrap the content ](../images/cell/auto-wrap.png) + +> * If a column width is not specified, then the Autowrap of columns will be adjusted with respect to the grid's width. +> * If a column's header text contains no white space, the text may not be wrapped. +> * If the content of a cell contains HTML tags, the Autowrap functionality may not work as expected. In such cases, you can use the `headerTemplate` and `template` properties of the column to customize the appearance of the header and cell content. + +## Customize cell styles + +Customizing the grid cell styles allows you to modify the appearance of cells in the Grid control to meet your design requirements. You can customize the font, background color, and other styles of the cells. To customize the cell styles in the grid, you can use grid event, css, property or method support. + +### Using event + +To customize the appearance of the grid cell, you can use the [queryCellInfo](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_QueryCellInfo) event of the grid. This event is triggered when each header cell is rendered in the grid, and provides an object that contains information about the header cell. You can use this object to modify the styles of the header cell. + +The following example demonstrates how to add a `queryCellInfo` event handler to the grid. In the event handler, checked whether the current column is **Freight** field and then applied the appropriate CSS class to the cell based on its value. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/grid/cell/customize-cell-cs1/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Html.cs" %} +{% include code-snippet/grid/cell/customize-cell-cs1/customize.cs %} +{% endhighlight %} +{% endtabs %} + +![Customize cell using event](../images/cell/customize-cell-using-event.png) + +> * The [queryCellInfo](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_QueryCellInfo) event is triggered for every cell of the grid, so it may impact the performance of the grid whether used to modify a large number of cells. + +### Using CSS + +You can apply styles to the cells using CSS selectors. The Grid provides a class name for each cell element, which you can use to apply styles to that specific cell or cells in a particular column. The `e-rowcell` class is used to style the row cells, and the `e-selectionbackground` class is used to change the background color of the selected row. + +```CSS +.e-grid td.e-cellselectionbackground { + background: #9ac5ee; + font-style: italic; +} +``` + +The following example demonstrates how to customize the appearance of a specific row in the grid on selection using `className`. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/grid/cell/customize-cell-cs2/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Html.cs" %} +{% include code-snippet/grid/cell/customize-cell-cs2/customize.cs %} +{% endhighlight %} +{% endtabs %} + +![Customize cell using css](../images/cell/customize-cell-using-css.png) + +### Using property + +To customize the style of grid cells, define `customAttributes` property to the column definition object. The `customAttributes` property takes an object with the name-value pair to customize the CSS properties for grid cells. You can also set multiple CSS properties to the custom class using the `customAttributes` property. + +```CSS +.custom-css { + background: #d7f0f4; + font-style: italic; + color:navy +} +``` +Here, setting the `customAttributes` property of the **ShipCity** column to an object that contains the CSS class **'custom-css'**. This CSS class will be applied to all the cells in the **ShipCity** column of the grid. + +```html + +``` +The following example demonstrates how to customize the appearance of the **OrderID** and **ShipCity** columns using custom attributes. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/grid/cell/customize-cell-cs3/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Html.cs" %} +{% include code-snippet/grid/cell/customize-cell-cs3/customize.cs %} +{% endhighlight %} +{% endtabs %} + +![Customize cell using property](../images/cell/customize-cell-using-property.png) + +> Custom attributes can be used to customize any cell in the grid, including header and footer cells. + +### Using methods + +The Grid provides below methods to customize the appearance of the grid columns header and cell: + +1. **getHeaderContent**: The `getHeaderContent` method is used to customize the appearance of the column header in the grid and accessing the header element using the `querySelector` method and applying the style using the style property of the cell element. + +2. **getCellFromIndex**: The `getCellFromIndex` method is used to customize the appearance of a specific cell in the grid by specifying the index of the row and column for which you want to customize the appearance. + +The following example demonstrates how to use getColumnHeaderByIndex and getCellFromIndex methods to customize the appearance of the **CustomerID** column header and specific cell inside the [dataBound](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_DataBound) event of the grid. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/grid/cell/customize-cell-cs4/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Html.cs" %} +{% include code-snippet/grid/cell/customize-cell-cs4/customize.cs %} +{% endhighlight %} +{% endtabs %} + +![Customize cell using property](../images/cell/customize-cell-using-method.png) + +> Make sure to pass the correct row and column indices to `getCellFromIndex` method, or else the appearance of the wrong cell might get customized. + +## Clip Mode + +The clip mode feature is useful when you have a long text or content in a grid cell, which overflows the cell's width or height. It provides options to display the overflow content by either truncating it, displaying an ellipsis or displaying an ellipsis with a tooltip. You can enable this feature by setting [clipMode](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.ClipMode.html) property to one of the below available options. + +There are three types of `clipMode` available: + +* **Clip**: Truncates the cell content when it overflows its area. +* **Ellipsis**: Displays ellipsis when the cell content overflows its area. +* **EllipsisWithTooltip**: Displays ellipsis when the cell content overflows its area, also it will display the tooltip while hover on ellipsis is applied. Also it will display the tooltip while hover on ellipsis is applied. + +The following example demonstrates, how to set the `clipMode` property to **Clip** , **Ellipsis** and **EllipsisWithTooltip** for the **Main Fields of Invention** column, on changing the dropdown value using the [change](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.DropDowns.DropDownList.html#Syncfusion_EJ2_DropDowns_DropDownList_Change) event of the `DropDownList` component. The `refresh` method is used to refresh the grid and display the updated content. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/grid/cell/clipmode/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Clipmode.cs" %} +{% include code-snippet/grid/cell/clipmode/clipmode.cs %} +{% endhighlight %} +{% endtabs %} + +![Clip Mode](../images/cell/clip-mode.gif) + +> * By default, `clipMode` value is **Ellipsis**. +> * If you set the [width](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_Width) property of a column, the clip mode feature will be automatically applied to that column if the content exceeds the specified width. +> * Be careful when using the Clip mode, as it may result in important information being cut off. It is generally recommended to use the Ellipsis or EllipsisWithTooltip modes instead. + +## Tooltip + +The Syncfusion Grid allows you to display information about the grid columns to the user when they hover over them with the mouse. + +### Render bootstrap tooltip in grid cells + +The Grid control allows rendering Bootstrap tooltips in the cells. To enable this feature, you need to add the Bootstrap CDN link and call the tooltip() method to initialize the tooltip. + +This is demonstrated in the sample code below which shows how to enable Bootstrap tooltip for the **CustomerID** field using `template` property in grid cells, + +Step 1: Add the CDN link of Boostrap in the `_Layout.cshtml` file. Place the `link` tag in the `head` for the CSS. + +```html + + + + + +``` + +Step 2: The following code demonstrates how to render Bootstrap tooltip for the **CustomerID** field with `template` on grid cells. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/grid/cell/tooltip/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="tooltip.cs" %} +{% include code-snippet/grid/cell/tooltip/tooltip.cs %} +{% endhighlight %} +{% endtabs %} + +The following screenshot represents the Bootstrap tooltip for the **CustomerID** field, + +![ Render bootstrap tooltip in grid](../images/cell/render-tooltip.png) + +> * The Bootstrap CDN link must be added to the HTML file. + +### Display custom tooltip for columns + +The Grid provides a feature to display custom tooltips for its columns using the `EJ2 Tooltip` component. This allows you to provide additional information about the columns when the user hovers over them. + +To enable custom tooltips for columns in the Grid, you can render the Grid control inside the Tooltip component and set the target as `.e-rowcell`. This will display the tooltip when hovering over the grid cells. + +Change the tooltip content for the grid cells by using the following code in the [beforeRender](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Popups.Tooltip.html#Syncfusion_EJ2_Popups_Tooltip_BeforeRender) event. + +```typescript + beforeRender(args): void { + if (args.target.classList.contains('e-rowcell')) { + // event triggered before render the tooltip on target element. + this.tooltip.content = 'This is value "' + args.target.innerText + '" '; + } + } + +``` + +The following example demonstrates how to customize the tooltip content for the grid cells by using the `beforeRender` event of the EJ2 Tooltip component. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/grid/cell/custom-tooltip/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="tooltip.cs" %} +{% include code-snippet/grid/cell/custom-tooltip/tooltip.cs %} +{% endhighlight %} +{% endtabs %} + +![Display custom tooltip](../images/cell/custom-tooltip.png) + +## Grid lines + +The [gridLines](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_GridLines) in a grid are used to separate the cells with horizontal and vertical lines for better readability. You can enable the grid lines by setting the `gridLines` property to one of the following values: + +| Modes | Actions | +| ---------- | ----------------------------------------------------- | +| Both | Displays both the horizontal and vertical grid lines. | +| None | No grid lines are displayed. | +| Horizontal | Displays the horizontal grid lines only. | +| Vertical | Displays the vertical grid lines only. | +| Default | Displays grid lines based on the theme. | + +The following example demonstrates how to set the `gridLines` property based on changing the dropdown value using the [change](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.DropDowns.DropDownList.html#Syncfusion_EJ2_DropDowns_DropDownList_Change) event of the DropDownList component. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/grid/cell/gridlines/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Gridlines.cs" %} +{% include code-snippet/grid/cell/gridlines/gridlines.cs %} +{% endhighlight %} +{% endtabs %} + +![Grid Lines](../images/cell/grid-lines.gif) diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/cell/auto-wrap.md b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/cell/auto-wrap.md deleted file mode 100644 index e3bc36cefe..0000000000 --- a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/cell/auto-wrap.md +++ /dev/null @@ -1,47 +0,0 @@ ---- -layout: post -title: Auto Wrap in ##Platform_Name## Grid Control | Syncfusion -description: Learn here all about Auto Wrap in Syncfusion ##Platform_Name## Grid component of Syncfusion Essential JS 2 and more. -platform: ej2-asp-core-mvc -control: Auto Wrap -publishingplatform: ##Platform_Name## -documentation: ug ---- - -# Auto Wrap in Grid Control - -The auto wrap allows the cell content of the grid to wrap to the next line when it exceeds the boundary of the cell width. The Cell Content wrapping works based on the position of white space between words. To enable auto wrap, set the [`allowTextWrap`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_AllowTextWrap) property to `true`. You can configure the auto wrap mode by setting the [`wrapMode`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridTextWrapSettings.html#Syncfusion_EJ2_Grids_GridTextWrapSettings_WrapMode) property of **e-grid-textwrapsettings** tag helper. - -There are three types of [`wrapMode`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridTextWrapSettings.html#Syncfusion_EJ2_Grids_GridTextWrapSettings_WrapMode). They are: - -* **Both**: Both value is set by default. Auto wrap will be enabled for both the content and the header. -* **Header**: Auto wrap will be enabled only for the header. -* **Content**: Auto wrap will be enabled only for the content. - -N> When a column width is not specified, then auto wrap of columns will be adjusted with respect to the grid's width. - -In the following example, the [`wrapMode`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridTextWrapSettings.html#Syncfusion_EJ2_Grids_GridTextWrapSettings_WrapMode) is set to **Content**. - -{% if page.publishingplatform == "aspnet-core" %} - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/grid/cell/autowrap/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="Autowrap.cs" %} -{% include code-snippet/grid/cell/autowrap/autowrap.cs %} -{% endhighlight %} -{% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/grid/cell/autowrap/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Autowrap.cs" %} -{% include code-snippet/grid/cell/autowrap/autowrap.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/cell/cell.md b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/cell/cell.md deleted file mode 100644 index 1ff608cd49..0000000000 --- a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/cell/cell.md +++ /dev/null @@ -1,120 +0,0 @@ ---- -layout: post -title: Cell in ##Platform_Name## Grid Component -description: Learn here all about Cell in Syncfusion ##Platform_Name## Grid component of Syncfusion Essential JS 2 and more. -platform: ej2-asp-core-mvc -control: Cell -publishingplatform: ##Platform_Name## -documentation: ug ---- - -# Cell - -## Cell customization - -The appearance of cells can be customized by using the [`queryCellInfo`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_QueryCellInfo) event. - -The [`queryCellInfo`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_QueryCellInfo) event triggers for every cell. - -{% if page.publishingplatform == "aspnet-core" %} - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/grid/cell/customize/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="Customize.cs" %} -{% include code-snippet/grid/cell/customize/customize.cs %} -{% endhighlight %} -{% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/grid/cell/customize/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Customize.cs" %} -{% include code-snippet/grid/cell/customize/customize.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - - -## Custom attributes - -You can customize the grid cells by adding a CSS class to the [`customAttribute`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_CustomAttributes) property of **e-grid-column** tag helper. - -```CSS -.e-attr { - background: #d7f0f4; -} -``` - -In the below example, we have customized the cells of **OrderID** and **ShipCity** columns. - -{% if page.publishingplatform == "aspnet-core" %} - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/grid/cell/customAttribute/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="CustomStyle.cs" %} -{% include code-snippet/grid/cell/customAttribute/customStyle.cs %} -{% endhighlight %} -{% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/grid/cell/customAttribute/razor %} -{% endhighlight %} -{% highlight c# tabtitle="CustomStyle.cs" %} -{% include code-snippet/grid/cell/customAttribute/customStyle.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - - -## Grid lines - -The **GridLines** have option to display cell border and it can be defined by the [`gridLines`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_GridLines) property. - -The available modes of grid lines are: - -| Modes | Actions | -|-------|---------| -| Both | Displays both the horizontal and vertical grid lines.| -| None | No grid lines are displayed.| -| Horizontal | Displays the horizontal grid lines only.| -| Vertical | Displays the vertical grid lines only.| -| Default | Displays grid lines based on the theme.| - -{% if page.publishingplatform == "aspnet-core" %} - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/grid/cell/gridlines/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="Gridlines.cs" %} -{% include code-snippet/grid/cell/gridlines/gridlines.cs %} -{% endhighlight %} -{% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/grid/cell/gridlines/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Gridlines.cs" %} -{% include code-snippet/grid/cell/gridlines/gridlines.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - - -N>By default, the grid renders with **Default** mode. diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/cell/clip-mode.md b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/cell/clip-mode.md deleted file mode 100644 index 374bdbb7bb..0000000000 --- a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/cell/clip-mode.md +++ /dev/null @@ -1,46 +0,0 @@ ---- -layout: post -title: Clip Mode in ##Platform_Name## Grid Component -description: Learn here all about Clip Mode in Syncfusion ##Platform_Name## Grid component of Syncfusion Essential JS 2 and more. -platform: ej2-asp-core-mvc -control: Clip Mode -publishingplatform: ##Platform_Name## -documentation: ug ---- - -# Clip Mode - -The clip mode provides options to display its overflow cell content and it can be defined by the [`clipMode`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.ClipMode.html) property of **e-grid-column** tag helper. - -There are three types of **ClipMode**. They are: - -* **Clip**: Truncates the cell content when it overflows its area. -* **Ellipsis**: Displays ellipsis when the cell content overflows its area. -* **EllipsisWithTooltip**: Displays ellipsis when the cell content overflows its area, also it will display the tooltip while hover on ellipsis is applied. - -{% if page.publishingplatform == "aspnet-core" %} - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/grid/cell/clipmode/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="Clipmode.cs" %} -{% include code-snippet/grid/cell/clipmode/clipmode.cs %} -{% endhighlight %} -{% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/grid/cell/clipmode/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Clipmode.cs" %} -{% include code-snippet/grid/cell/clipmode/clipmode.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - - - -N>By default, [`clipMode`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.ClipMode.html) value is **Ellipsis**. \ No newline at end of file diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/cell/content.md b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/cell/content.md deleted file mode 100644 index 58914d6011..0000000000 --- a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/cell/content.md +++ /dev/null @@ -1,37 +0,0 @@ ---- -layout: post -title: Content in ##Platform_Name## Grid Component -description: Learn here all about Content in Syncfusion ##Platform_Name## Grid component of Syncfusion Essential JS 2 and more. -platform: ej2-asp-core-mvc -control: Content -publishingplatform: ##Platform_Name## -documentation: ug ---- - -# Displaying the HTML content - -The HTML tags can be displayed in the Grid header and content by enabling the [`disableHtmlEncode`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_DisableHtmlEncode) property of **e-grid-column** tag helper. - -{% if page.publishingplatform == "aspnet-core" %} - -{% tabs %} -{% highlight cshtml tabtitle="CSHTML" %} -{% include code-snippet/grid/cell/html/tagHelper %} -{% endhighlight %} -{% highlight c# tabtitle="Html.cs" %} -{% include code-snippet/grid/cell/html/html.cs %} -{% endhighlight %} -{% endtabs %} - -{% elsif page.publishingplatform == "aspnet-mvc" %} - -{% tabs %} -{% highlight razor tabtitle="CSHTML" %} -{% include code-snippet/grid/cell/html/razor %} -{% endhighlight %} -{% highlight c# tabtitle="Html.cs" %} -{% include code-snippet/grid/cell/html/html.cs %} -{% endhighlight %} -{% endtabs %} -{% endif %} - diff --git a/ej2-asp-core-mvc/grid/images/cell/auto-wrap.png b/ej2-asp-core-mvc/grid/images/cell/auto-wrap.png new file mode 100644 index 0000000000..15ebcafde8 Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/cell/auto-wrap.png differ diff --git a/ej2-asp-core-mvc/grid/images/cell/clip-mode.gif b/ej2-asp-core-mvc/grid/images/cell/clip-mode.gif new file mode 100644 index 0000000000..5e8ecf0625 Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/cell/clip-mode.gif differ diff --git a/ej2-asp-core-mvc/grid/images/cell/custom-tooltip.png b/ej2-asp-core-mvc/grid/images/cell/custom-tooltip.png new file mode 100644 index 0000000000..cd675faaa0 Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/cell/custom-tooltip.png differ diff --git a/ej2-asp-core-mvc/grid/images/cell/customize-cell-using-css.png b/ej2-asp-core-mvc/grid/images/cell/customize-cell-using-css.png new file mode 100644 index 0000000000..1b0876a670 Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/cell/customize-cell-using-css.png differ diff --git a/ej2-asp-core-mvc/grid/images/cell/customize-cell-using-event.png b/ej2-asp-core-mvc/grid/images/cell/customize-cell-using-event.png new file mode 100644 index 0000000000..e425b4c197 Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/cell/customize-cell-using-event.png differ diff --git a/ej2-asp-core-mvc/grid/images/cell/customize-cell-using-method.png b/ej2-asp-core-mvc/grid/images/cell/customize-cell-using-method.png new file mode 100644 index 0000000000..7de67497a9 Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/cell/customize-cell-using-method.png differ diff --git a/ej2-asp-core-mvc/grid/images/cell/customize-cell-using-property.png b/ej2-asp-core-mvc/grid/images/cell/customize-cell-using-property.png new file mode 100644 index 0000000000..1aad6e5f5c Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/cell/customize-cell-using-property.png differ diff --git a/ej2-asp-core-mvc/grid/images/cell/display-html-content.gif b/ej2-asp-core-mvc/grid/images/cell/display-html-content.gif new file mode 100644 index 0000000000..a3f16b6b50 Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/cell/display-html-content.gif differ diff --git a/ej2-asp-core-mvc/grid/images/cell/grid-lines.gif b/ej2-asp-core-mvc/grid/images/cell/grid-lines.gif new file mode 100644 index 0000000000..2685b9c26e Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/cell/grid-lines.gif differ diff --git a/ej2-asp-core-mvc/grid/images/cell/render-tooltip.png b/ej2-asp-core-mvc/grid/images/cell/render-tooltip.png new file mode 100644 index 0000000000..f041ca82b6 Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/cell/render-tooltip.png differ diff --git a/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/how-to/add-save-button.md b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/how-to/add-save-button.md new file mode 100644 index 0000000000..9978b4d662 --- /dev/null +++ b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/how-to/add-save-button.md @@ -0,0 +1,132 @@ +--- +layout: post +title: Add Save Button in Built-In Toolbar | Syncfusion +description: Learn here all about adding save button in built-in Toolbar in Syncfusion ##Platform_Name## Pdfviewer component of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: Add Save Button +publishingplatform: ##Platform_Name## +documentation: ug +--- + + +# Add Save Button in Built-In Toolbar + +PDF Viewer allows you to customize(add, show, hide, enable, and disable) existing items in a toolbar. + +* Save button - New `save` button-item can be defined by **CustomToolbarItemModel** and with existing items in [**ToolbarSettings**](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.PdfViewer.PdfViewerToolbarSettings.html) property. `Save' button-item click action can be defined in `toolbarclick`. + +* Show, Hide - `Save` button-item can be shown or hidden using the [`ToolbarSettings`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.PdfViewer.PdfViewerToolbarSettings.html) property. Pre-defined toolbar items are available with [`ToolbarItem`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.PdfViewer.PdfViewerToolbarSettings.html#Syncfusion_EJ2_PdfViewer_PdfViewerToolbarSettings_ToolbarItems) . + +* Enable, Disable - `save` button-item can be enabled or disable using `enabletoolbaritem`. + +{% tabs %} +{% highlight html tabtitle="Standalone" %} + +
+
+

+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").ResourceUrl("https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2-pdfviewer-lib").ToolbarClick("toolbarClick").Render() +
+
+ + + +{% endhighlight %} +{% highlight html tabtitle="Server-Backed" %} + +
+
+

+ @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).ToolbarClick("toolbarClick").Render() +
+
+ + +{% endhighlight %} +{% endtabs %} + +N> Default value of toolbar items is ['OpenOption', 'PageNavigationTool','MagnificationTool', 'PanTool', 'SelectionTool', 'SearchOption', 'PrintOption', 'DownloadOption','UndoRedoTool', 'AnnotationEditTool', 'FormDesignerEditTool', 'CommentTool', 'SubmitForm'] + +### Align Property + +The align property is used to specify the alignment of a toolbar item within the toolbar. + +`Left`: Aligns the item to the left side of the toolbar. +`Right`: Aligns the item to the right side of the toolbar. + +### Tooltip Property + +The tooltip property is used to set the tooltip text for a `save` button-item. Tooltip provides additional information when a user hovers over the item. + +### CssClass Property + +The cssClass property is used to apply custom CSS classes to a `save` button-item. It allows custom styling of the `save` button-item. + +### Prefix Property + +The prefix property is used to set the CSS class or icon that should be added as a prefix to the existing content of the `save`button-item. + +### ID Property + +The id property within a CustomToolbarItemModel is a compulsory attribute that plays a vital role in toolbar customization. It serves as a unique identifier for each toolbar item, facilitating distinct references and interactions. + +When defining or customizing toolbar items, it is mandatory to assign a specific and descriptive id to each item. +These properties are commonly used when defining custom toolbar items with the `CustomToolbarItemModel`` in the context of Syncfusion PDF Viewer. When configuring the toolbar using the `ToolbarSettings`` property, you can include these properties to customize the appearance and behavior of each toolbar item. + +N> When customizing toolbar items, you have the flexibility to include either icons or text based on your design preference. + +[View sample in GitHub](https://github.com/SyncfusionExamples/mvc-pdf-viewer-examples/tree/master/How%20to) \ No newline at end of file diff --git a/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/how-to/restricting-zoom-in-mobile-mode.md b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/how-to/restricting-zoom-in-mobile-mode.md index 7e3dd63e12..2975876dd4 100644 --- a/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/how-to/restricting-zoom-in-mobile-mode.md +++ b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/how-to/restricting-zoom-in-mobile-mode.md @@ -56,4 +56,4 @@ In Syncfusion PDF Viewer, you can easily restrict the zoom percentage on mobile By implementing this, you ensure that the maximum zoom percentage on mobile devices is limited to 200% and the minimum zoom percentage is set to 10%. This prevents performance issues that may arise from excessive zooming on mobile platforms. -[View Sample in GitHub](https://github.com/SyncfusionExamples/mvc-pdf-viewer-examples/tree/master/How%20to/Restrict%20Zoom%20Percentage%20on%20Mobile%20Devices/PDFViewerSample) \ No newline at end of file +[View Sample in GitHub](https://github.com/SyncfusionExamples/mvc-pdf-viewer-examples/tree/master/How%20to/Restrict%20Zoom%20Percentage%20on%20Mobile%20Devices/PDFViewerSample) diff --git a/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/open-pdf-file/from-amazon-s3.md b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/open-pdf-file/from-amazon-s3.md index 9429f80f8e..1efa35cef8 100644 --- a/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/open-pdf-file/from-amazon-s3.md +++ b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/open-pdf-file/from-amazon-s3.md @@ -1,6 +1,6 @@ --- layout: post -title: AWS S3 in ##Platform_Name## PDF Viewer Component +title: AWS S3 in ##Platform_Name## Syncfusion PDF Viewer Component description: Learn here all about how to Open PDF files from AWS S3 in ASP.NET MVC PDF Viewer component of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: PDF Viewer @@ -10,6 +10,86 @@ documentation: ug # Open PDF file from AWS S3 +PDF Viewer allows to load PDF file from AWS S3 using either the Standalone or Server-backed PDF Viewer. Below are the steps and a sample to demonstrate how to open a PDF from AWS S3. + +## Using Standalone PDF Viewer + +To load a PDF file from AWS S3 in a PDF Viewer, you can follow the steps below + +**Step 1:** Create AWS S3 account + +Set up an AWS S3 account by following the instructions on the official AWS site: [AWS Management Console](https://docs.aws.amazon.com/AmazonS3/latest/userguide/Welcome.html). Create an S3 bucket and generate access keys while ensuring secure storage of credentials. + +**Step 2:** Create PDF Viewer Sample in ASP.NET MVC + +Follow instructions provided in the Syncfusion PDF Viewer Getting Started [Guide](https://ej2.syncfusion.com/aspnetmvc/documentation/pdfviewer/getting-started) to create a simple PDF Viewer sample in ASP.NET MVC. + +**Step 3:** Modify the `~/Views/Shared/_Layout.cshtml` File in the Project + +1. Add the required scripts using CDN inside the `` of `~/Views/Shared/_Layout.cshtml` file as follows, + +{% tabs %} +{% highlight c# tabtitle="~/_Layout.cshtml" %} + + + ... + + + +{% endhighlight %} +{% endtabs %} + +**Step 4:** Modify the `~/Views/Home/Index.cshtml` File in the Project + +1. Configures AWS SDK with the region, access key, and secret access key. This configuration allows the application to interact with AWS services like S3. + +N> Replace **Your Region** with the actual Region of your AWS S3 account and **Your Access Key** with the actual Access Key of your AWS S3 account and **Your Security Access Key** with the actual Security Access Key of your AWS S3 account. + +```csharp +AWS.config.update({ + region: '**Your Region**', // Update this your region + accessKeyId: '*Your Access Key*', // Update this with your access key id + secretAccessKey: '*Your Security Access Key*', // Update this with your secret access key +}); +``` + +2. Sets the parameters for fetching the PDF document from S3, including the bucket name and file key. Then Uses the getObject method of the S3 instance to retrieve the document. Converts the document data to a Base64 string and loads it into the Syncfusion PDF Viewer then load Base64 string generated into the viewer.load method. + +N> Replace **Your Bucket Name** with the actual Bucket name of your AWS S3 account and **Your Key** with the actual File Key of your AWS S3 account. + +```csharp +loadDocument() { + const s3 = new AWS.S3(); + const getObjectParams = { + Bucket: '**Your Bucket Name**', + Key: '**Your Key**', + }; + this.s3.getObject(getObjectParams, (err, data) => { + if (err) { + console.error('Error fetching document:', err); + } else { + if (data && data.Body) { + const bytes = new Uint8Array(data.Body as ArrayBuffer); + let binary = ''; + bytes.forEach((byte) => (binary += String.fromCharCode(byte))); + const base64String = window.btoa(binary); + console.log('Document data as Base64:', base64String); + var viewer = (document.getElementById("pdfViewer")).ej2_instances[0]; + setTimeout(() => { + viewer.load("data:application/pdf;base64,"+base64String); + }, 2000); + } + } + }); +} +``` + +N> The **AWSSDK.S3** NuGet package must be installed in your application to use the previous code example. + +[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-aws-s3/tree/master/Open%20and%20Save%20PDF%20in%20AWS%20S3%20using%20Standalone). + +## Using Server-Backed PDF Viewer + To load a PDF file from AWS S3 in a PDF Viewer, you can follow the steps below **Step 1:** Create AWS S3 account @@ -98,4 +178,4 @@ Set the `documentPath` property of the PDF viewer component to the desired name N> The **AWSSDK.S3** NuGet package must be installed in your application to use the previous code example. -[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-aws-s3) \ No newline at end of file +[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-aws-s3/tree/master/Open%20and%20Save%20PDF%20in%20AWS%20S3%20using%20Server-Backend) \ No newline at end of file diff --git a/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/save-pdf-file/to-amazon-s3.md b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/save-pdf-file/to-amazon-s3.md index 355e4bf8d2..b7d6fd2c18 100644 --- a/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/save-pdf-file/to-amazon-s3.md +++ b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/save-pdf-file/to-amazon-s3.md @@ -1,7 +1,7 @@ --- layout: post -title: AWS S3 in ##Platform_Name## PDF Viewer Component -description: Save PDF files to AWS S3 in ASP.NET MVC PDF Viewer component of Syncfusion Essential JS 2 and more. +title: AWS S3 in ##Platform_Name## Syncfusion PDF Viewer Component +description: Learn here all about how to Save PDF files from AWS S3 in ASP.NET MVC PDF Viewer component of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: PDF Viewer publishingplatform: ##Platform_Name## @@ -10,6 +10,121 @@ documentation: ug # Save PDF file to AWS S3 +PDF Viewer allows to save PDF file to AWS S3 using either the Standalone or Server-backed PDF Viewer. Below are the steps and a sample to demonstrate how to save PDF to AWS S3. + +## Using Standalone PDF Viewer + +To save a PDF file to AWS S3 bucket, you can follow the steps below + +**Step 1:** Create AWS S3 account + + Set up an AWS S3 account by following the instructions on the official AWS site: [AWS Management Console](https://docs.aws.amazon.com/AmazonS3/latest/userguide/Welcome.html). Create an S3 bucket and generate access keys while ensuring secure storage of credentials. + +**Step 2:** Create PDF Viewer Sample in ASP.NET MVC + +Follow instructions provided in the Syncfusion PDF Viewer Getting Started [Guide](https://ej2.syncfusion.com/aspnetmvc/documentation/pdfviewer/getting-started) to create a simple PDF Viewer sample in ASP.NET MVC. + +**Step 3:** Modify the `~/Views/Shared/_Layout.cshtml` File in the Project + +1. Add the required scripts using CDN inside the `` of `~/Views/Shared/_Layout.cshtml` file as follows, + +{% tabs %} +{% highlight c# tabtitle="~/_Layout.cshtml" %} + + + ... + + + +{% endhighlight %} +{% endtabs %} + +**Step 4:** Modify the `~/Views/Home/Index.cshtml` File in the Project + +1. Configures AWS SDK with the region, access key, and secret access key. This configuration allows the application to interact with AWS services like S3. + +N> Replace **Your Region** with the actual Region of your AWS S3 account and **Your Access Key** with the actual Access Key of your AWS S3 account and **Your Security Access Key** with the actual Security Access Key of your AWS S3 account. + +```csharp +AWS.config.update({ + region: '**Your Region**', // Update this your region + accessKeyId: '*Your Access Key*', // Update this with your access key id + secretAccessKey: '*Your Security Access Key*', // Update this with your secret access key +}); +``` + +2. Configure a custom toolbar item for the download function to save a PDF file in Azure Blob Storage. + +```csharp +
+
+ @Html.EJS().PdfViewer("pdfviewer").ResourceUrl("https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2-pdfviewer-lib").Created("loadDocument").ToolbarClick("toolbarClick").Render() +
+
+ + +``` + +3. Retrieve the PDF viewer instance and save the current PDF as a Blob. Then, read the Blob using a FileReader to convert it into an ArrayBuffer, and upload the ArrayBuffer to AWS S3 using the putObject method of the S3 instance. + +N> Replace **Your Bucket Name** with the actual Bucket name of your AWS S3 account and **Your Key** with the actual File Key of your AWS S3 account. + +```csharp +function saveDocument() { + const s3 = new AWS.S3(); + var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0]; + pdfViewer.saveAsBlob().then(function (value) { + var reader = new FileReader(); + reader.onload = () => { + const uint8Array = new Uint8Array(reader.result); + const putObjectParams = { + Bucket: '**Your Bucket Name**', + Key: '**Your Key**', + Body: uint8Array, + ContentType: 'application/pdf', + }; + s3.putObject(putObjectParams, (err, data) => { + if (err) { + console.error('Error uploading document:', err); + } else { + console.log('Document uploaded successfully:', data); + } + }); + }; + reader.readAsArrayBuffer(value); + }); +} +``` + +N> The **AWSSDK.S3** NuGet package must be installed in your application to use the previous code example. + +[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-aws-s3/tree/master/Open%20and%20Save%20PDF%20in%20AWS%20S3%20using%20Standalone). + +## Using Server-Backed PDF Viewer + To save a PDF file to AWS S3 bucket, you can follow the steps below **Step 1:** Create AWS S3 account @@ -90,4 +205,4 @@ Set the `documentPath` property of the PDF viewer component to the desired name N> The **AWSSDK.S3** NuGet package must be installed in your application to use the previous code example. -[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-aws-s3) \ No newline at end of file +[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-aws-s3/tree/master/Open%20and%20Save%20PDF%20in%20AWS%20S3%20using%20Server-Backend) \ No newline at end of file diff --git a/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/how-to/add-save-button.md b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/how-to/add-save-button.md new file mode 100644 index 0000000000..7692d1cf44 --- /dev/null +++ b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/how-to/add-save-button.md @@ -0,0 +1,138 @@ +--- +layout: post +title: Add Save Button in Built-In Toolbar | Syncfusion +description: Learn here all about adding save button in built-in Toolbar in Syncfusion ##Platform_Name## Pdfviewer component of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: PDF Viewer +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Add Save Button in Built-In toolbar + +PDF Viewer allows you to customize(add, show, hide, enable, and disable) existing items in a toolbar. + +* Save button - New `save` button-item can be defined by **CustomToolbarItemModel** and with existing items in [**ToolbarSettings**](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.PdfViewer.PdfViewerToolbarSettings.html) property. Save button-item click action can be defined in `toolbarclick`. + +* Show, Hide - `Save` button-item can be shown or hidden using the [`ToolbarSettings`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.PdfViewer.PdfViewerToolbarSettings.html) property. Pre-defined toolbar items are available with [`ToolbarItem`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.PdfViewer.PdfViewerToolbarSettings.html#Syncfusion_EJ2_PdfViewer_PdfViewerToolbarSettings_ToolbarItems). + +* Enable, Disable - `Save` button-item can be enabled or disable using `enabletoolbaritem`. + +{% tabs %} +{% highlight html tabtitle="Standalone" %} + +
+ + +
+ + + +{% endhighlight %} +{% highlight html tabtitle="Server-Backed" %} + +
+ + +
+ + + +{% endhighlight %} +{% endtabs %} + +N> Default value of toolbar items is ['OpenOption', 'PageNavigationTool','MagnificationTool', 'PanTool', 'SelectionTool', 'SearchOption', 'PrintOption', 'DownloadOption','UndoRedoTool', 'AnnotationEditTool', 'FormDesignerEditTool', 'CommentTool', 'SubmitForm'] + +### Align Property + +The align property is used to specify the alignment of a `save` button-item within the toolbar. + +`Left`: Aligns the item to the left side of the toolbar. +`Right`: Aligns the item to the right side of the toolbar. + +### Tooltip Property + +The tooltip property is used to set the tooltip text for a `save` button-item. Tooltip provides additional information when a user hovers over the item. + +### CssClass Property + +The cssClass property is used to apply custom CSS classes to a `save` button-item. It allows custom styling of the save button-item. + +### Prefix Property + +The prefix property is used to set the CSS class or icon that should be added as a prefix to the existing content of the toolbar item. + +### ID Property + +The id property within a CustomToolbarItemModel is a compulsory attribute that plays a vital role in toolbar customization. It serves as a unique identifier for each toolbar item, facilitating distinct references and interactions. + +When defining or customizing toolbar items, it is mandatory to assign a specific and descriptive id to each item. +These properties are commonly used when defining custom toolbar items with the `CustomToolbarItemModel`` in the context of Syncfusion PDF Viewer. When configuring the toolbar using the `ToolbarSettings`` property, you can include these properties to customize the appearance and behavior of each toolbar item. + +N> When customizing `save` button-item, you have the flexibility to include either icons or text based on your design preference. + +[View sample in GitHub](https://github.com/SyncfusionExamples/asp-core-pdf-viewer-examples/tree/master/How%20to) \ No newline at end of file diff --git a/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/how-to/resolve-pdfium-issue.md b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/how-to/resolve-pdfium-issue.md index b720ed80ca..1e4fb66578 100644 --- a/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/how-to/resolve-pdfium-issue.md +++ b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/how-to/resolve-pdfium-issue.md @@ -13,7 +13,7 @@ documentation: ug The issue, “The type initializer for 'Syncfusion.EJ2.PdfViewer.PdfiumNative' threw an exception” is due to the write access permission denied in the environment. The pdfium.dll will be created based on the operating system at the runtime. Due to the denial of permission, the pdfium.dll file couldn't have been created. So, copy the below x64 and x86 folders and paste them inside the folder into your project to resolve the issue or enable the write permission for that folder. -Pdfium dll: [pdfium.dll](https://www.syncfusion.com/downloads/support/directtrac/general/ze/Pdfium1515619754.zip) +Pdfium dll: [pdfium.dll](https://www.syncfusion.com/downloads/support/directtrac/general/ze/Pdfium1334927507.zip) N> Use both the client and server-side of the same version in your project.
Ensure whether the pdfium.dll file is created in your project during runtime. Else, place the pdfium assemblies in any of the production environment locations and refer to the path by using the ReferencePath API. @@ -27,7 +27,7 @@ N> Provide this path in the Load method of the PDFViewerController.cs N> PdfRenderer PdfRenderer = new PdfRenderer();
PdfRenderer.ReferencePath = @"C:/"; -## Steps to refer the Pdfium.dll +## Steps to refer the PDFium.dll 1. Extract the given file (Pdfium folder) and copy it in the sample’s root directory (parallel to Controllers folder) @@ -40,10 +40,45 @@ N> You need to refer the ParentFolder up to the x64/x86 folder. 4. Build and publish the application. -Also, install only the package related to that OS, then build and run the project on that platform. For Windows, Linux, and OSX operating systems, use the following corresponding libraries: +Also, install the below package, then build and run the project. This will work on Windows, Linux, and OSX operating systems. -* Syncfusion.EJ2.PdfViewer.AspNet.Core.Linux -* Syncfusion.EJ2.PdfViewer.AspNet.Core.Windows -* Syncfusion.EJ2.PdfViewer.AspNet.Core.OSX +* Syncfusion.EJ2.PdfViewer.AspNet.Core -Following these steps should resolve the issue. \ No newline at end of file +Following these steps should resolve the issue. + +## Steps to resolve the PDFium issue in Linux environment + +* The issue, “The type initializer for ‘Syncfusion.EJ2.PdfViewer.PdfiumNative’ threw an exception” occurs due to the missing of pdfium dependency in the Linux environment. To resolve this, Execute the following commands one by one to install the pdfium dependency package in the Linux machine. + +``` + sudo cp -u /lib/x86_64-linux-gnu/libdl.so.2 /lib/x86_64-linux-gnu/libdl.so + sudo apt-get update + sudo apt install libgdiplus +``` + +## Steps to resolve the PDFium issue in docker environment + +* The issue, “The type initializer for ‘Syncfusion.EJ2.PdfViewer.PdfiumNative’ threw an exception” occurs due to the missing of pdfium dependency in the docker environment. Please follow the steps below to resolve this issue on docker environment. + + +If you are using the PDF Viewer with Docker in .NET 6.0 framework, please incorporate the following commands into your Dockerfile to install the pdfium dependency: + +``` + RUN ln -s /lib/x86_64-linux-gnu/libdl-2.24.so /lib/x86_64-linux-gnu/libdl.so + # install System.Drawing native dependencies + RUN apt-get update && apt-get install -y --allow-unauthenticated libgdiplus libc6-dev libx11-dev + RUN ln -s libgdiplus.so gdiplus.dll +``` + +Dockerfile 6.0: [dockerfile](https://github.com/SyncfusionExamples/PdfViewer-Server/blob/master/Dockerfile) + +If you are using the PDF Viewer with Docker in .NET 8.0 framework, please incorporate the following commands into your Dockerfile to install the pdfium dependency: + +``` + RUN ln -s /lib/x86_64-linux-gnu/libdl.so.2 /lib/x86_64-linux-gnu/libdl.so + # install System.Drawing native dependencies + RUN apt-get update && apt-get install -y --allow-unauthenticated libgdiplus libc6-dev libx11-dev + RUN ln -s libgdiplus.so gdiplus.dll +``` + +Dockerfile 8.0: [dockerfile](https://github.com/SyncfusionExamples/PdfViewer-Server/blob/master/Dockerfile_NET80) \ No newline at end of file diff --git a/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/how-to/restricting-zoom-in-mobile-mode.md b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/how-to/restricting-zoom-in-mobile-mode.md index c4266795f8..7723ecc9ed 100644 --- a/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/how-to/restricting-zoom-in-mobile-mode.md +++ b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/how-to/restricting-zoom-in-mobile-mode.md @@ -64,4 +64,4 @@ In Syncfusion PDF Viewer, you can easily restrict the zoom percentage on mobile By implementing this, you ensure that the maximum zoom percentage on mobile devices is limited to 200% and the minimum zoom percentage is set to 10%. This prevents performance issues that may arise from excessive zooming on mobile platforms. -[View sample in GitHub](https://github.com/SyncfusionExamples/asp-core-pdf-viewer-examples/tree/master/How%20to/Restrict%20Zoom%20Percentage%20on%20Mobile%20Devices) \ No newline at end of file +[View sample in GitHub](https://github.com/SyncfusionExamples/asp-core-pdf-viewer-examples/tree/master/How%20to/Restrict%20Zoom%20Percentage%20on%20Mobile%20Devices) diff --git a/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/open-pdf-file/from-amazon-s3.md b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/open-pdf-file/from-amazon-s3.md index 0478ab7f21..82280a1a75 100644 --- a/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/open-pdf-file/from-amazon-s3.md +++ b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/open-pdf-file/from-amazon-s3.md @@ -1,6 +1,6 @@ --- layout: post -title: AWS S3 in ##Platform_Name## PDF Viewer Component +title: AWS S3 in ##Platform_Name## Syncfusion PDF Viewer Component description: Learn here all about how to Open PDF files from AWS S3 in ASP.NET CORE PDF Viewer component of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: PDF Viewer @@ -10,6 +10,86 @@ documentation: ug # Open PDF file from AWS S3 +PDF Viewer allows to load PDF file from AWS S3 using either the Standalone or Server-backed PDF Viewer. Below are the steps and a sample to demonstrate how to open a PDF from AWS S3. + +## Using Standalone PDF Viewer + +To load a PDF file from AWS S3 in a PDF Viewer, you can follow the steps below + +**Step 1:** Create AWS S3 account + + Set up an AWS S3 account by following the instructions on the official AWS site: [AWS Management Console](https://docs.aws.amazon.com/AmazonS3/latest/userguide/Welcome.html). Create an S3 bucket and generate access keys while ensuring secure storage of credentials. + +**Step 2:** Create PDF Viewer Sample in ASP.NET Core + +Follow instructions provided in the Syncfusion PDF Viewer Getting Started [Guide](https://ej2.syncfusion.com/aspnetcore/documentation/pdfviewer/getting-started) to create a simple PDF Viewer sample in ASP.NET Core. + +**Step 3:** Modify the `~/Pages/Shared/_Layout.cshtml` File in the Project + +1. Add the required scripts using CDN inside the `` of `~/Pages/Shared/_Layout.cshtml` file as follows, + +{% tabs %} +{% highlight c# tabtitle="~/_Layout.cshtml" %} + + + ... + + + +{% endhighlight %} +{% endtabs %} + +**Step 4:** Modify the `~/Pages/Index.cshtml` File in the Project + +1. Configures AWS SDK with the region, access key, and secret access key. This configuration allows the application to interact with AWS services like S3. + +N> Replace **Your Region** with the actual Region of your AWS S3 account and **Your Access Key** with the actual Access Key of your AWS S3 account and **Your Security Access Key** with the actual Security Access Key of your AWS S3 account. + +```csharp +AWS.config.update({ + region: '**Your Region**', // Update this your region + accessKeyId: '*Your Access Key*', // Update this with your access key id + secretAccessKey: '*Your Security Access Key*', // Update this with your secret access key +}); +``` + +2. Sets the parameters for fetching the PDF document from S3, including the bucket name and file key. Then Uses the getObject method of the S3 instance to retrieve the document. Converts the document data to a Base64 string and loads it into the Syncfusion PDF Viewer then load Base64 string generated into the viewer.load method. + +N> Replace **Your Bucket Name** with the actual Bucket name of your AWS S3 account and **Your Key** with the actual File Key of your AWS S3 account. + +```csharp +loadDocument() { + const s3 = new AWS.S3(); + const getObjectParams = { + Bucket: '**Your Bucket Name**', + Key: '**Your Key**', + }; + this.s3.getObject(getObjectParams, (err, data) => { + if (err) { + console.error('Error fetching document:', err); + } else { + if (data && data.Body) { + const bytes = new Uint8Array(data.Body as ArrayBuffer); + let binary = ''; + bytes.forEach((byte) => (binary += String.fromCharCode(byte))); + const base64String = window.btoa(binary); + console.log('Document data as Base64:', base64String); + var viewer = (document.getElementById("pdfViewer")).ej2_instances[0]; + setTimeout(() => { + viewer.load("data:application/pdf;base64,"+base64String); + }, 2000); + } + } + }); +} +``` + +N> The **AWSSDK.S3** NuGet package must be installed in your application to use the previous code example. + +[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-aws-s3/tree/master/Open%20and%20Save%20PDF%20in%20AWS%20S3%20using%20Standalone). + +## Using Server-Backed PDF Viewer + To load a PDF file from AWS S3 in a PDF Viewer, you can follow the steps below **Step 1:** Create AWS S3 account @@ -132,4 +212,4 @@ Set the `documentPath` property of the PDF viewer component to the desired name N> The **AWSSDK.S3** NuGet package must be installed in your application to use the previous code example. -[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-aws-s3) \ No newline at end of file +[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-aws-s3/tree/master/Open%20and%20Save%20PDF%20in%20AWS%20S3%20using%20Server-Backend) \ No newline at end of file diff --git a/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/save-pdf-file/to-amazon-s3.md b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/save-pdf-file/to-amazon-s3.md index c3d7a6fd60..29f481096e 100644 --- a/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/save-pdf-file/to-amazon-s3.md +++ b/ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/save-pdf-file/to-amazon-s3.md @@ -1,6 +1,6 @@ --- layout: post -title: AWS S3 in ##Platform_Name## PDF Viewer Component +title: AWS S3 in ##Platform_Name## Syncfusion PDF Viewer Component description: Save PDF files to AWS S3 in ASP.NET CORE PDF Viewer component of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: PDF Viewer @@ -10,6 +10,117 @@ documentation: ug # Save PDF file to AWS S3 +PDF Viewer allows to save PDF file to AWS S3 using either the Standalone or Server-backed PDF Viewer. Below are the steps and a sample to demonstrate how to save PDF to AWS S3. + +## Using Standalone PDF Viewer + +To save a PDF file to AWS S3, you can follow the steps below + +**Step 1:** Create AWS S3 account + + Set up an AWS S3 account by following the instructions on the official AWS site: [AWS Management Console](https://docs.aws.amazon.com/AmazonS3/latest/userguide/Welcome.html). Create an S3 bucket and generate access keys while ensuring secure storage of credentials. + +**Step 2:** Create PDF Viewer Sample in ASP.NET Core + +Follow instructions provided in the Syncfusion PDF Viewer Getting Started [Guide](https://ej2.syncfusion.com/aspnetcore/documentation/pdfviewer/getting-started) to create a simple PDF Viewer sample in ASP.NET Core. + +**Step 3:** Modify the `~/Pages/Shared/_Layout.cshtml` File in the Project + +1. Add the required scripts using CDN inside the `` of `~/Pages/Shared/_Layout.cshtml` file as follows, + +{% tabs %} +{% highlight c# tabtitle="~/_Layout.cshtml" %} + + + ... + + + +{% endhighlight %} +{% endtabs %} + +**Step 4:** Modify the `~/Pages/Index.cshtml` File in the Project + +1. Configures AWS SDK with the region, access key, and secret access key. This configuration allows the application to interact with AWS services like S3. + +N> Replace **Your Region** with the actual Region of your AWS S3 account and **Your Access Key** with the actual Access Key of your AWS S3 account and **Your Security Access Key** with the actual Security Access Key of your AWS S3 account. + +```csharp +AWS.config.update({ + region: '**Your Region**', // Update this your region + accessKeyId: '*Your Access Key*', // Update this with your access key id + secretAccessKey: '*Your Security Access Key*', // Update this with your secret access key +}); +``` + +2. Configure a custom toolbar item for the download function to save a PDF file in Azure Blob Storage. + +```csharp +
+ + +
+ + +``` + +3. Retrieve the PDF viewer instance and save the current PDF as a Blob. Then, read the Blob using a FileReader to convert it into an ArrayBuffer, and upload the ArrayBuffer to AWS S3 using the putObject method of the S3 instance. + +N> Replace **Your Bucket Name** with the actual Bucket name of your AWS S3 account and **Your Key** with the actual File Key of your AWS S3 account. + +```csharp +function saveDocument() { + const s3 = new AWS.S3(); + var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0]; + pdfViewer.saveAsBlob().then(function (value) { + var reader = new FileReader(); + reader.onload = () => { + const uint8Array = new Uint8Array(reader.result); + const putObjectParams = { + Bucket: '**Your Bucket Name**', + Key: '**Your Key**', + Body: uint8Array, + ContentType: 'application/pdf', + }; + s3.putObject(putObjectParams, (err, data) => { + if (err) { + console.error('Error uploading document:', err); + } else { + console.log('Document uploaded successfully:', data); + } + }); + }; + reader.readAsArrayBuffer(value); + }); +} +``` + +N> The **AWSSDK.S3** NuGet package must be installed in your application to use the previous code example. + +[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-aws-s3/tree/master/Open%20and%20Save%20PDF%20in%20AWS%20S3%20using%20Standalone). + +## Using Server-Backed PDF Viewer + To save a PDF file to AWS S3, you can follow the steps below **Step 1:** Create AWS S3 account @@ -124,4 +235,4 @@ Set the `documentPath` property of the PDF viewer component to the desired name N> The **AWSSDK.S3** NuGet package must be installed in your application to use the previous code example. -[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-aws-s3) \ No newline at end of file +[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-aws-s3/tree/master/Open%20and%20Save%20PDF%20in%20AWS%20S3%20using%20Server-Backend) \ No newline at end of file diff --git a/ej2-asp-core-mvc/pivot-table/EJ2_ASP.MVC/calculated-field.md b/ej2-asp-core-mvc/pivot-table/EJ2_ASP.MVC/calculated-field.md index 74b698b363..a5f9b39781 100644 --- a/ej2-asp-core-mvc/pivot-table/EJ2_ASP.MVC/calculated-field.md +++ b/ej2-asp-core-mvc/pivot-table/EJ2_ASP.MVC/calculated-field.md @@ -18,7 +18,7 @@ Calculated field can also be included in the pivot table through code behind usi * [`Formula`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.PivotView.PivotViewCalculatedFieldSetting.html#Syncfusion_EJ2_PivotView_PivotViewCalculatedFieldSetting_Formula): It allows to set the formula. * [`Format`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.PivotView.PivotViewFormatSetting.html#Syncfusion_EJ2_PivotView_PivotViewFormatSetting_Format): It helps to set the number format for the resultant value. -N> The calculated field is applicable only for value fields. Also, calculated field created through code behind will be automatically listed in the UI dialog as well. +N> The calculated field is applicable only for value fields. By default, the calculated fields created through code-behind are only added to the field list and calculated field dialog UI. To display the calculated field in the pivot table UI, it must be added to the [`Values`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.PivotView.PivotViewDataSourceSettings.html#Syncfusion_EJ2_PivotView_PivotViewDataSourceSettings_Values) property, as shown in the code below. {% if page.publishingplatform == "aspnet-core" %} diff --git a/ej2-asp-core-mvc/pivot-table/EJ2_ASP.MVC/getting-started.md b/ej2-asp-core-mvc/pivot-table/EJ2_ASP.MVC/getting-started.md index c5cf61f126..0ec2156ba7 100644 --- a/ej2-asp-core-mvc/pivot-table/EJ2_ASP.MVC/getting-started.md +++ b/ej2-asp-core-mvc/pivot-table/EJ2_ASP.MVC/getting-started.md @@ -96,7 +96,8 @@ Also, register the script manager `EJS().ScriptManager()` at the end of `` {% include code-snippet/pivot-table/getting-start-mvc/initial-pivot/razor %} {% endhighlight %} {% highlight c# tabtitle="HomeController.cs" %} - public class HomeController : Controller + +public class HomeController : Controller { public ActionResult Index() { @@ -288,7 +289,7 @@ The field list allows to add or remove fields and also rearrange the fields betw The calculated field feature allows user to insert or add a new calculated field based on the available fields from the bound data source using basic arithmetic operators. The calculated field can be included in pivot table using the [CalculatedFieldSetting](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.PivotView.PivotViewCalculatedFieldSetting.html) class from code behind. Or else, calculated fields can be added at run time through the built-in dialog by just setting the [AllowCalculatedField](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.PivotView.PivotView.html#Syncfusion_EJ2_PivotView_PivotView_AllowCalculatedField) property to **true** in pivot table. You will see a button enabled in the Field List UI automatically to invoke the calculated field dialog and perform necessary operation. -N> Calculated field is applicable only for value fields. +N> By default, the calculated fields created through code-behind are only added to the field list and calculated field dialog UI. To display the calculated field in the pivot table UI, it must be added to the [`Values`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.PivotView.PivotViewDataSourceSettings.html#Syncfusion_EJ2_PivotView_PivotViewDataSourceSettings_Values) property, as shown in the code below. Additionally, calculated fields can only be added to the value axis. {% tabs %} {% highlight razor tabtitle="CSHTML" %} @@ -298,4 +299,4 @@ N> Calculated field is applicable only for value fields. ![ASP.NET MVC Pivot Table with Calculate Field](images/pivottable-calculatefield.png) -N> [View Sample in GitHub](https://github.com/SyncfusionExamples/ASP-NET-MVC-Getting-Started-Examples/tree/main/PivotTable/ASP.NET%20MVC%20Razor%20Examples). \ No newline at end of file +N> [View Sample in GitHub](https://github.com/SyncfusionExamples/ASP-NET-MVC-Getting-Started-Examples/tree/main/PivotTable/ASP.NET%20MVC%20Razor%20Examples). diff --git a/ej2-asp-core-mvc/pivot-table/EJ2_ASP.NETCORE/calculated-field.md b/ej2-asp-core-mvc/pivot-table/EJ2_ASP.NETCORE/calculated-field.md index cbb398ebcf..75fcb8b114 100644 --- a/ej2-asp-core-mvc/pivot-table/EJ2_ASP.NETCORE/calculated-field.md +++ b/ej2-asp-core-mvc/pivot-table/EJ2_ASP.NETCORE/calculated-field.md @@ -18,7 +18,7 @@ Calculated field can also be included in the pivot table through code behind usi * [`formula`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.PivotView.PivotViewCalculatedFieldSetting.html#Syncfusion_EJ2_PivotView_PivotViewCalculatedFieldSetting_Formula): It allows to set the formula. * [`format`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.PivotView.PivotViewFormatSetting.html#Syncfusion_EJ2_PivotView_PivotViewFormatSetting_Format): It helps to set the number format for the resultant value. -N> The calculated field is applicable only for value fields. Also, calculated field created through code behind will be automatically listed in the UI dialog as well. +N> The calculated field is applicable only for value fields. By default, the calculated fields created through code-behind are only added to the field list and calculated field dialog UI. To display the calculated field in the pivot table UI, it must be added to the [`Values`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.PivotView.PivotViewDataSourceSettings.html#Syncfusion_EJ2_PivotView_PivotViewDataSourceSettings_Values) property, as shown in the code below. {% if page.publishingplatform == "aspnet-core" %} diff --git a/ej2-asp-core-mvc/pivot-table/EJ2_ASP.NETCORE/getting-started.md b/ej2-asp-core-mvc/pivot-table/EJ2_ASP.NETCORE/getting-started.md index b0747a5287..e3a643c966 100644 --- a/ej2-asp-core-mvc/pivot-table/EJ2_ASP.NETCORE/getting-started.md +++ b/ej2-asp-core-mvc/pivot-table/EJ2_ASP.NETCORE/getting-started.md @@ -1,6 +1,6 @@ --- layout: post -title: Getting Started with ##Platform_Name## Pivot Table Control +title: Getting Started with ##Platform_Name## Pivot Table Control | Syncfusion description: Checkout and learn about getting started with ##Platform_Name## Pivot Table control of Syncfusion Essential JS 2 and more details. platform: ej2-asp-core-mvc control: Getting Started @@ -231,7 +231,7 @@ public class PivotData The calculated field feature allows user to insert or add a new calculated field based on the available fields from the bound data source using basic arithmetic operators. The calculated field can be included in pivot table using the [`e-calculatedFieldSetting`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.PivotView.PivotViewCalculatedFieldSetting.html) tag from code behind. Or else, calculated fields can be added at run time through the built-in dialog by just setting the [`allowCalculatedField`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.PivotView.PivotView.html#Syncfusion_EJ2_PivotView_PivotView_AllowCalculatedField) property to **true** in pivot table. You will see a button enabled in the Field List UI automatically to invoke the calculated field dialog and perform necessary operation. -N> Calculated field is applicable only for value fields. +N> By default, the calculated fields created through code-behind are only added to the field list and calculated field dialog UI. To display the calculated field in the pivot table UI, it must be added to the [`Values`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.PivotView.PivotViewDataSourceSettings.html#Syncfusion_EJ2_PivotView_PivotViewDataSourceSettings_Values) property, as shown in the code below. Additionally, calculated fields can only be added to the value axis. {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} @@ -257,4 +257,4 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/ASP-NET-Core-Ge ## See also * [Getting Started with Syncfusion ASP.NET Core using Razor Pages](https://ej2.syncfusion.com/aspnetcore/documentation/getting-started/razor-pages/) -* [Getting Started with Syncfusion ASP.NET Core MVC using Tag Helper](https://ej2.syncfusion.com/aspnetcore/documentation/getting-started/aspnet-core-mvc-taghelper) \ No newline at end of file +* [Getting Started with Syncfusion ASP.NET Core MVC using Tag Helper](https://ej2.syncfusion.com/aspnetcore/documentation/getting-started/aspnet-core-mvc-taghelper) diff --git a/ej2-asp-core-mvc/schedule/EJ2_ASP.MVC/appointments.md b/ej2-asp-core-mvc/schedule/EJ2_ASP.MVC/appointments.md index 62aae81dfc..5a66cbe21d 100644 --- a/ej2-asp-core-mvc/schedule/EJ2_ASP.MVC/appointments.md +++ b/ej2-asp-core-mvc/schedule/EJ2_ASP.MVC/appointments.md @@ -61,7 +61,7 @@ N> For example, if an appointment is created for two days say from November 25, Represents an appointment that is created for an entire day such as holiday events. It is usually displayed separately in an all-day row, a separate row for all-day appointments below the date header section. In Timeline views, the all-day appointments displays in the working space area, and no separate all-day row is present in that view. -N> To change normal appointment into all-day event, set `IsAllDay` field to true. +N> To change normal appointment into all-day event, set [`IsAllDay`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_IsAllDay) field to `true`. ### Hide all-day row events @@ -77,7 +77,7 @@ N> You can also enable scroller for all-day row, [refer](./how-to/enable-scroll- ## Customize the rendering of the spanned events -By default, Scheduler will renders the spanned events (appointment with more than 24 hours duration) in the all-day row by setting `AllDayRow` will the default type renders to the `SpannedEventPlacement` option within the `EventSettings` property. Now we can customize rendering of the that events inside the work cells itself by modifying the `SpannedEventPlacement` option as `TimeSlot`. In this following example, shows how to render the spanned appointments inside the work cells as follows. +By default, Scheduler will renders the spanned events (appointment with more than 24 hours duration) in the all-day row by setting `AllDayRow` will the default type renders to the [`SpannedEventPlacement`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.ScheduleEventSettings.html#Syncfusion_EJ2_Schedule_ScheduleEventSettings_SpannedEventPlacement) option within the [`EventSettings`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_EventSettings) property. Now we can customize rendering of the that events inside the work cells itself by modifying the [`SpannedEventPlacement`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.ScheduleEventSettings.html#Syncfusion_EJ2_Schedule_ScheduleEventSettings_SpannedEventPlacement) option as `TimeSlot`. In this following example, shows how to render the spanned appointments inside the work cells as follows. {% if page.publishingplatform == "aspnet-core" %} @@ -139,7 +139,7 @@ The following example depicts how to create a recurring event on Scheduler with ### Adding exceptions -A few instance of the recurrence series can be excluded on specific dates, by adding those exceptional dates to the `RecurrenceException` field. These date values should be given in the ISO date time format with no hyphens(-) separating the date elements. +A few instance of the recurrence series can be excluded on specific dates, by adding those exceptional dates to the [`RecurrenceException`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_RecurrenceException) field. These date values should be given in the ISO date time format with no hyphens(-) separating the date elements. For example, 22nd February 2018 can be represented as 20180222. Also, the time part being represented in UTC format needs to add "Z" after the time portion with no space. "07:30:00 UTC" is therefore represented as "073000Z". @@ -170,9 +170,9 @@ For example, 22nd February 2018 can be represented as 20180222. Also, the time p ### Editing an occurrence from a series -To dynamically edit a particular occurrence from an event series and display it on the initial load of Scheduler, the edited occurrence needs to be added as a new event to the dataSource collection, with an additional `RecurrenceID` field defined to it. The `RecurrenceID` field of edited occurrence usually maps the ID value of the parent event. +To dynamically edit a particular occurrence from an event series and display it on the initial load of Scheduler, the edited occurrence needs to be added as a new event to the dataSource collection, with an additional [`RecurrenceID`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_RecurrenceID) field defined to it. The [`RecurrenceID`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_RecurrenceID) field of edited occurrence usually maps the ID value of the parent event. -In this example, a recurring instance that displays on the date 30th Jan 2018 is edited with different timings. Therefore, this particular date is excluded from the parent recurring event that repeats from 28th January 2018 to 4th February 2018. This can be done by adding the `RecurrenceException` field with the excluded date value on the parent event. Also, the edited occurrence event which is created as a new event should carry the `RecurrenceID` field pointing to the parent event's `Id` value. +In this example, a recurring instance that displays on the date 30th Jan 2018 is edited with different timings. Therefore, this particular date is excluded from the parent recurring event that repeats from 28th January 2018 to 4th February 2018. This can be done by adding the [`RecurrenceException`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_RecurrenceException) field with the excluded date value on the parent event. Also, the edited occurrence event which is created as a new event should carry the [`RecurrenceID`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_RecurrenceID) field pointing to the parent event's [`Id`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_Id) value. {% if page.publishingplatform == "aspnet-core" %} @@ -201,9 +201,9 @@ In this example, a recurring instance that displays on the date 30th Jan 2018 is ### Edit only the current and following events -To edit only the current and following events enable the property `editFollowingEvents` within `eventSettings` property. The edited occurrence needs to be added as a new event to the dataSource collection, with an additional `followingID` field defined to it. The `followingID` field of edited occurrence usually maps the ID value of the immediate parent event. +To edit only the current and following events enable the property [`editFollowingEvents`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.ScheduleEventSettings.html#Syncfusion_EJ2_Schedule_ScheduleEventSettings_EditFollowingEvents) within [`eventSettings`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_EventSettings) property. The edited occurrence needs to be added as a new event to the dataSource collection, with an additional [`followingID`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_FollowingID) field defined to it. The [`followingID`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_FollowingID) field of edited occurrence usually maps the ID value of the immediate parent event. -In this example, a recurring instance that displays on the date 30th Jan 2018 and its following dates are edited with different subject. Therefore, this particular date and its following dates are excluded from the parent recurring event that repeats from 28th January 2018 to 4th February 2018. This can be done by updating the `recurrenceRule` field with the until date value on the parent event. Also, the edited events which is created as a new event should carry the `followingID` field pointing to the immediate parent event's `Id` value. +In this example, a recurring instance that displays on the date 30th Jan 2018 and its following dates are edited with different subject. Therefore, this particular date and its following dates are excluded from the parent recurring event that repeats from 28th January 2018 to 4th February 2018. This can be done by updating the [`recurrenceRule`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_RecurrenceRule) field with the until date value on the parent event. Also, the edited events which is created as a new event should carry the [`followingID`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_FollowingID) field pointing to the immediate parent event's [`Id`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_Id) value. {% if page.publishingplatform == "aspnet-core" %} @@ -232,7 +232,7 @@ In this example, a recurring instance that displays on the date 30th Jan 2018 an ### Recurrence options and rules -Events can be repeated on a daily, weekly, monthly or yearly basis based on the recurrence rule which accepts the string value. The following details should be assigned to the `RecurrenceRule` property to generate the recurring instances. +Events can be repeated on a daily, weekly, monthly or yearly basis based on the recurrence rule which accepts the string value. The following details should be assigned to the [`RecurrenceRule`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_RecurrenceRule) property to generate the recurring instances. * Repeat type - daily/weekly/monthly/yearly. * How many times it needs to be repeated? @@ -321,7 +321,7 @@ The built-in validation support has been added by default for recurring appointm The Scheduler dataSource usually holds the event instances, where each of the instance includes a collection of appropriate [fields](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2~Syncfusion.EJ2.Schedule.ScheduleField_properties.html). It is mandatory to map these fields with the equivalent fields of database, when remote data is bound to it. When the local JSON data is bound, then the field names defined within the instances needs to be mapped with the scheduler event fields correctly. -N> To create an event on Scheduler, it is enough to define the `startTime` and `endTime`. Also `id` field becomes mandatory to process CRUD actions on appropriate events. +N> To create an event on Scheduler, it is enough to define the [`startTime`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_StartTime) and [`endTime`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_EndTime). Also [`Id`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_Id) field becomes mandatory to process CRUD actions on appropriate events. ### Built-in fields @@ -329,24 +329,24 @@ The built-in fields available on Scheduler event object are as follows. | Field name | Description | |-------|---------| -| `Id` | The `id` field needs to be defined as mandatory and this field usually assigns a unique ID value to each of the events.| -| `Subject` | The `Subject` field is optional, and usually assigns the summary text to each of the events.| -| `StartTime` | The `StartTime` field defines the start time of an event and it is mandatory to provide it for any of the valid event objects.| -| `EndTime` | The `EndTime` field defines the end time of an event and it is mandatory to provide the end time for any of the valid event objects.| -| `StartTimezone` | It maps the `StartTimezone` field from the dataSource and usually accepts the valid IANA timezone names. It is assumed that the value provided for this field is taken into consideration while processing the `StartTime` field. When this field is not mapped with any timezone names, then the events will be processed based on the timezone assigned to the Scheduler.| -| `EndTimezone` | It maps the `EndTimezone` field from the dataSource and usually accepts the valid IANA timezone names. It is assumed that the value provided for this field is taken into consideration while processing the `EndTime` field. When this field is not mapped with any timezone names, then the events will be processed based on the timezone assigned to the Scheduler.| -| `Location` | It maps the `Location` field from the dataSource and the location text value will be displayed over the events.| -| `Description` | It maps the `Description` field from the dataSource and denotes the event description which is optional.| -| `IsAllDay` | The `IsAllDay` field is mapped from the dataSource and is used to denote whether an event is created for an entire day or for specific time alone. Usually, an event with `IsAllDay` field set to true will be considered as an all-day event. | -| `RecurrenceID` | It maps the `RecurrenceID` field from dataSource and usually holds the ID value of the parent recurrence event. This field is applicable only for the edited occurrence events.| -| `RecurrenceRule` | It maps the `RecurrenceRule` field from dataSource and holds the recurrence rule value in a string format. Also, it uniquely identifies whether the event belongs to a recurring type or normal ones. | -| `RecurrenceException` | It maps the `RecurrenceException` field from dataSource and is used to hold the collection of exception dates, on which the recurring occurrences needs to be excluded. The `RecurrenceException` should be specified in UTC format. | -| `IsReadonly` | It maps the `IsReadonly` field from dataSource. It is mainly used to make specific appointments as readonly when set to `true`. | -| `IsBlock` | It maps the `IsBlock` field from dataSource. It is used to block the particular time ranges in the Scheduler and prevents the event creation on those time slots. | +| id | The [`Id`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_Id) field needs to be defined as mandatory and this field usually assigns a unique ID value to each of the events.| +| Subject | The [`Subject`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_Subject) field is optional, and usually assigns the summary text to each of the events.| +| StartTime | The [`StartTime`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_StartTime) field defines the start time of an event and it is mandatory to provide it for any of the valid event objects.| +| EndTime | The [`EndTime`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_EndTime) field defines the end time of an event and it is mandatory to provide the end time for any of the valid event objects.| +| StartTimezone | It maps the [`StartTimezone`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_StartTimezone) field from the dataSource and usually accepts the valid IANA timezone names. It is assumed that the value provided for this field is taken into consideration while processing the `StartTime` field. When this field is not mapped with any timezone names, then the events will be processed based on the timezone assigned to the Scheduler.| +| EndTimezone | It maps the [`EndTimezone`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_EndTimezone) field from the dataSource and usually accepts the valid IANA timezone names. It is assumed that the value provided for this field is taken into consideration while processing the `EndTime` field. When this field is not mapped with any timezone names, then the events will be processed based on the timezone assigned to the Scheduler.| +| Location | It maps the [`Location`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_Location) field from the dataSource and the location text value will be displayed over the events.| +| Description | It maps the [`Description`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_Description) field from the dataSource and denotes the event description which is optional.| +| IsAllDay | The [`IsAllDay`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_IsAllDay) field is mapped from the dataSource and is used to denote whether an event is created for an entire day or for specific time alone. Usually, an event with `IsAllDay` field set to true will be considered as an all-day event. | +| RecurrenceID | It maps the [`RecurrenceID`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_RecurrenceID) field from dataSource and usually holds the ID value of the parent recurrence event. This field is applicable only for the edited occurrence events.| +| RecurrenceRule | It maps the [`RecurrenceRule`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_RecurrenceRule) field from dataSource and holds the recurrence rule value in a string format. Also, it uniquely identifies whether the event belongs to a recurring type or normal ones. | +| RecurrenceException | It maps the [`RecurrenceException`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_RecurrenceException) field from dataSource and is used to hold the collection of exception dates, on which the recurring occurrences needs to be excluded. The `RecurrenceException` should be specified in UTC format. | +| IsReadonly | It maps the [`IsReadonly`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_IsReadonly) field from dataSource. It is mainly used to make specific appointments as readonly when set to `true`. | +| IsBlock | It maps the [`IsBlock`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_IsBlock) field from dataSource. It is used to block the particular time ranges in the Scheduler and prevents the event creation on those time slots. | ### Binding different field names -When the fields of event instances has the default mapping name, it is not mandatory to map them manually. If a Scheduler's dataSource holds the events collection with different field names, then it is necessary to map them with its equivalent field name within the `EventSettings` property. +When the fields of event instances has the default mapping name, it is not mandatory to map them manually. If a Scheduler's dataSource holds the events collection with different field names, then it is necessary to map them with its equivalent field name within the [`EventSettings`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_EventSettings) property. {% if page.publishingplatform == "aspnet-core" %} @@ -373,7 +373,7 @@ When the fields of event instances has the default mapping name, it is not manda -N> The mapper field `Id` is of string type and has no additional validation options, whereas all other fields are of `Object` type and has additional options. +N> The mapper field [`Id`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_Id) is of string type and has no additional validation options, whereas all other fields are of `Object` type and has additional options. ### Event field settings @@ -415,7 +415,7 @@ In following example, the Subject field in event editor will display its appropr ## Adding Custom fields -Apart from the default Scheduler fields, the user can include 'n' number of custom fields for appointments. The following code example shows how to include two custom fields namely **Status** and **Priority** within event collection. It is not necessary to bind the custom fields within the `EventSettings`. However, those additional fields can be accessed easily, for internal processing as well as from application end. +Apart from the default Scheduler fields, the user can include 'n' number of custom fields for appointments. The following code example shows how to include two custom fields namely **Status** and **Priority** within event collection. It is not necessary to bind the custom fields within the [`EventSettings`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_EventSettings). However, those additional fields can be accessed easily, for internal processing as well as from application end. {% if page.publishingplatform == "aspnet-core" %} @@ -444,7 +444,7 @@ Apart from the default Scheduler fields, the user can include 'n' number of cust ## Customize the order of the overlapping events -By default, the scheduler will render the overlapping events based on the start and end time. Now we can customize the order of the overlapping events based on the custom fields by using the `SortComparer` property grouped under the `EventSettings` property. The following code example shows how to sort the appointments based on the custom field as follows. +By default, the scheduler will render the overlapping events based on the start and end time. Now we can customize the order of the overlapping events based on the custom fields by using the [`SortComparer`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.ScheduleEventSettings.html#Syncfusion_EJ2_Schedule_ScheduleEventSettings_SortComparer) property grouped under the [`EventSettings`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_EventSettings) property. The following code example shows how to sort the appointments based on the custom field as follows. {% if page.publishingplatform == "aspnet-core" %} @@ -473,13 +473,13 @@ By default, the scheduler will render the overlapping events based on the start ## Drag and drop appointments -Appointments can be rescheduled to any time by dragging and dropping them onto the desired location. To work with drag and drop functionality make sure that `AllowDragAndDrop` is set to **true** on Scheduler. In mobile mode, you can drag and drop the events by tap holding an event and dropping them on to the desired location. +Appointments can be rescheduled to any time by dragging and dropping them onto the desired location. To work with drag and drop functionality make sure that [`AllowDragAndDrop`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_AllowDragAndDrop) is set to **true** on Scheduler. In mobile mode, you can drag and drop the events by tap holding an event and dropping them on to the desired location. N> By default, drag and drop action is applicable on all Scheduler views, except Agenda, Month-Agenda and Year view. ### Drag and drop multiple appointments -We can drag and drop multiple appointments by enabling the `allowMultiDrag` property. We can select multiple appointments by holding the CTRL key. Once the events are selected, we can leave the CTRL key and start dragging the event. +We can drag and drop multiple appointments by enabling the [`allowMultiDrag`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_AllowMultiDrag) property. We can select multiple appointments by holding the CTRL key. Once the events are selected, we can leave the CTRL key and start dragging the event. We can also drag multiple events from one resource to another resource. In this case, if all the selected events are in the different resources, then all the events should be moved to the single resource that is related to the target event. @@ -512,7 +512,7 @@ N> Multiple events drag and drop is not supported on mobile devices. ### Disable the drag action -By default, you can drag and drop the events within any of the applicable scheduler views, and to disable it, set **false** to the `AllowDragAndDrop` property. +By default, you can drag and drop the events within any of the applicable scheduler views, and to disable it, set **false** to the [`AllowDragAndDrop`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_AllowDragAndDrop) property. {% if page.publishingplatform == "aspnet-core" %} @@ -541,7 +541,7 @@ By default, you can drag and drop the events within any of the applicable schedu ### Preventing drag and drop on specific targets -It is possible to prevent the drag action on particular target, by passing the target to be excluded in the `excludeSelectors` option within `DragStart` event arguments. In this example, we have prevented the drag action on all-day row. +It is possible to prevent the drag action on particular target, by passing the target to be excluded in the `excludeSelectors` option within [`DragStart`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_DragStart) event arguments. In this example, we have prevented the drag action on all-day row. {% if page.publishingplatform == "aspnet-core" %} @@ -570,7 +570,7 @@ It is possible to prevent the drag action on particular target, by passing the t ### Disable scrolling on drag action -By default, while dragging an appointment to the edges, either top/bottom in the vertical Scheduler or left/right in the timeline Scheduler, scrolling action takes place automatically. To prevent this scrolling, set `false` to the `scroll` value within `DragStart` event arguments. +By default, while dragging an appointment to the edges, either top/bottom in the vertical Scheduler or left/right in the timeline Scheduler, scrolling action takes place automatically. To prevent this scrolling, set `false` to the `scroll` value within [`DragStart`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_DragStart) event arguments. {% if page.publishingplatform == "aspnet-core" %} @@ -599,7 +599,7 @@ By default, while dragging an appointment to the edges, either top/bottom in the ### Controlling scroll speed while dragging an event -The speed of the scrolling action while dragging an appointment to the Scheduler edges, can be controlled within `DragStart` event arguments by setting the desired value to the `scrollBy` and `timeDelay` option whereas its default value is 30 minutes and 100 ms. +The speed of the scrolling action while dragging an appointment to the Scheduler edges, can be controlled within [`DragStart`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_DragStart) event arguments by setting the desired value to the `scrollBy` and `timeDelay` option whereas its default value is 30 minutes and 100 ms. {% if page.publishingplatform == "aspnet-core" %} @@ -628,9 +628,9 @@ The speed of the scrolling action while dragging an appointment to the Scheduler ### Auto navigation of date ranges on dragging an event -When an event is dragged either to the left or right extreme edges of the Scheduler and kept hold for few seconds without dropping, the auto navigation of date ranges will be enabled allowing the Scheduler to navigate from current date range to back and forth respectively. This action is set to `false` by default and to enable it, you need to set `navigation` to true within `DragStart` event. +When an event is dragged either to the left or right extreme edges of the Scheduler and kept hold for few seconds without dropping, the auto navigation of date ranges will be enabled allowing the Scheduler to navigate from current date range to back and forth respectively. This action is set to `false` by default and to enable it, you need to set `navigation` to true within [`DragStart`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_DragStart) event. -By default, the navigation delay is set to 2000 ms. The navigation delay decides how long the user needs to drag and hold the appointments at the extremities. You can also set your own delay value for letting the users to navigate based on it, using the `timeDelay` within `DragStart` event. +By default, the navigation delay is set to 2000 ms. The navigation delay decides how long the user needs to drag and hold the appointments at the extremities. You can also set your own delay value for letting the users to navigate based on it, using the `timeDelay` within [`DragStart`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_DragStart) event. {% if page.publishingplatform == "aspnet-core" %} @@ -659,7 +659,7 @@ By default, the navigation delay is set to 2000 ms. The navigation delay decides ### Setting drag time interval -By default, while dragging an appointment, it moves at an interval of 30 minutes. To change the dragging time interval, pass the appropriate values to the `interval` option within `DragStart`event. +By default, while dragging an appointment, it moves at an interval of 30 minutes. To change the dragging time interval, pass the appropriate values to the `interval` option within [`DragStart`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_DragStart)event. {% if page.publishingplatform == "aspnet-core" %} @@ -719,7 +719,7 @@ In this example, we have used the tree view control as an external source and th ### Opening the editor window on drag stop -There are scenarios where you want to open the editor filled with data on newly dropped location and may need to proceed to save it, only when `Save` button is clicked on the editor and on clicking the cancel button should revert these changes. This can be achieved using the `DragStop` event of Scheduler. +There are scenarios where you want to open the editor filled with data on newly dropped location and may need to proceed to save it, only when `Save` button is clicked on the editor and on clicking the cancel button should revert these changes. This can be achieved using the [`DragStop`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_DragStop) event of Scheduler. {% if page.publishingplatform == "aspnet-core" %} @@ -756,7 +756,7 @@ To enable the inline edit mode, single click on any of the existing appointment The inline option can be enabled/disabled on the Scheduler by using the allowInline API, whereas its default value is set to false. -While using the `allowInline` the `showQuickInfo` will be turned off. The `quickPopup` will not show on clicking the work cell or clicking the appointment when the `allowInline` property is set to true. +While using the [`allowInline`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_AllowInline) the [`showQuickInfo`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_ShowQuickInfo) will be turned off. The `quickPopup` will not show on clicking the work cell or clicking the appointment when the [`allowInline`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_AllowInline) property is set to `true`. In work cells, select multiple cells using keyboard, and then press enter key. The appointment wrapper will be created, and focus will be on the subject field. Also, consider the overlapping scenarios when creating an inline event. ### Normal Event @@ -794,11 +794,11 @@ While editing the occurrence from the recurrence series, it is only possible to ## Appointment Resizing -Another way of rescheduling an appointment can be done by resizing it through either of its handlers. To work with resizing functionality make sure that `AllowResizing` property is set to **true**. +Another way of rescheduling an appointment can be done by resizing it through either of its handlers. To work with resizing functionality make sure that [`AllowResizing`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_AllowResizing) property is set to **true**. ### Disable the resize action -By default, resizing of events is allowed on all Scheduler views except Agenda and Month-Agenda view. To disable this event resizing action, set false to the `AllowResizing` property. +By default, resizing of events is allowed on all Scheduler views except Agenda and Month-Agenda view. To disable this event resizing action, set `false` to the [`AllowResizing`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_AllowResizing) property. {% if page.publishingplatform == "aspnet-core" %} @@ -827,7 +827,7 @@ By default, resizing of events is allowed on all Scheduler views except Agenda a ### Disable scrolling on resize action -By default, while resizing an appointment, when its handler reaches the extreme edges of the Scheduler, scrolling action will takes place along with event resizing. To prevent this scrolling action, set **false** to `scroll` value within the `ResizeStart` event. +By default, while resizing an appointment, when its handler reaches the extreme edges of the Scheduler, scrolling action will takes place along with event resizing. To prevent this scrolling action, set **false** to `scroll` value within the [`ResizeStart`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_ResizeStart) event. {% if page.publishingplatform == "aspnet-core" %} @@ -856,7 +856,7 @@ By default, while resizing an appointment, when its handler reaches the extreme ### Controlling scroll speed while resizing an event -The speed of the scrolling action while resizing an appointment to the Scheduler edges, can be controlled within the `ResizeStart` event by setting the desired value to the `scrollBy` option. +The speed of the scrolling action while resizing an appointment to the Scheduler edges, can be controlled within the [`ResizeStart`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_ResizeStart) event by setting the desired value to the `scrollBy` option. {% if page.publishingplatform == "aspnet-core" %} @@ -885,7 +885,7 @@ The speed of the scrolling action while resizing an appointment to the Scheduler ### Setting resize time interval -By default, while resizing an appointment, it extends or shrinks at an interval of 30 minutes. To change this default resize interval, set appropriate values to `interval` option within the `ResizeStart`. +By default, while resizing an appointment, it extends or shrinks at an interval of 30 minutes. To change this default resize interval, set appropriate values to `interval` option within the [`ResizeStart`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_ResizeStart). {% if page.publishingplatform == "aspnet-core" %} @@ -922,7 +922,7 @@ The look and feel of the Scheduler events can be customized using any one of the ### Using template -Any kind of text, images and links can be added to customize the look of the events. The user can format and change the default appearance of the events by making use of the `Template` option available within the `EventSettings` property. The following code example customizes the appointment's default color and time format. +Any kind of text, images and links can be added to customize the look of the events. The user can format and change the default appearance of the events by making use of the `Template` option available within the [`EventSettings`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_EventSettings) property. The following code example customizes the appointment's default color and time format. {% if page.publishingplatform == "aspnet-core" %} @@ -949,11 +949,11 @@ Any kind of text, images and links can be added to customize the look of the eve -N> All the built-in fields that are mapped to the appropriate field properties within the `EventSettings`, as well as custom mapped fields from the Scheduler dataSource can be accessed within the template code. +N> All the built-in fields that are mapped to the appropriate field properties within the [`EventSettings`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_EventSettings), as well as custom mapped fields from the Scheduler dataSource can be accessed within the template code. ### Using eventRendered event -The `EventRendered` event triggers before the appointment renders on the Scheduler. Therefore, this client-side event can be utilized to customize the look of events based on any specific criteria, before rendering them on the scheduler. +The [`EventRendered`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_EventRendered) event triggers before the appointment renders on the Scheduler. Therefore, this client-side event can be utilized to customize the look of events based on any specific criteria, before rendering them on the scheduler. {% if page.publishingplatform == "aspnet-core" %} @@ -982,7 +982,7 @@ The `EventRendered` event triggers before the appointment renders on the Schedul ### Using cssClass -The customization of events can also be achieved using `CssClass` property of the Scheduler. In the following example, the background of appointments has been changed using the cssClass. +The customization of events can also be achieved using [`CssClass`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_CssClass) property of the Scheduler. In the following example, the background of appointments has been changed using the cssClass. {% if page.publishingplatform == "aspnet-core" %} @@ -1011,7 +1011,7 @@ The customization of events can also be achieved using `CssClass` property of th ## Setting minimum height -It is possible to set minimal height for appointments on Scheduler using `EventRendered` event, when its start and end time duration is less than the default duration of a single slot. +It is possible to set minimal height for appointments on Scheduler using [`EventRendered`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_EventRendered) event, when its start and end time duration is less than the default duration of a single slot. {% if page.publishingplatform == "aspnet-core" %} @@ -1040,7 +1040,7 @@ It is possible to set minimal height for appointments on Scheduler using `EventR ## Block Dates and Times -It is possible to block a set of dates or a particular time ranges on the Scheduler. To do so, define an appointment object within `EventSettings` along with the required time range to block and set the `IsBlock` field to **true**. Usually, the event objects defined with `IsBlock` field set to true will block the entire time cells lying within the appropriate time ranges specified through `StartTime` and `EndTime` fields. +It is possible to block a set of dates or a particular time ranges on the Scheduler. To do so, define an appointment object within [`EventSettings`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_EventSettings) along with the required time range to block and set the [`IsBlock`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_IsBlock) field to **true**. Usually, the event objects defined with [`IsBlock`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_IsBlock) field set to true will block the entire time cells lying within the appropriate time ranges specified through [`StartTime`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_StartTime) and [`EndTime`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_EndTime) fields. {% if page.publishingplatform == "aspnet-core" %} @@ -1096,7 +1096,7 @@ Block events can also be defined to repeat on several days as shown in the follo ## Readonly -An interaction with the appointments of Scheduler can be enabled/disabled using the `Readonly` property. With this property enabled, you can simply navigate between the Scheduler dates, views and can be able to view the appointment details in the quick info window. Most importantly, the users are not allowed to perform any CRUD actions on Scheduler, when this property is set to true. By default, it is set as **false**. +An interaction with the appointments of Scheduler can be enabled/disabled using the [`Readonly`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_Readonly) property. With this property enabled, you can simply navigate between the Scheduler dates, views and can be able to view the appointment details in the quick info window. Most importantly, the users are not allowed to perform any CRUD actions on Scheduler, when this property is set to true. By default, it is set as **false**. {% if page.publishingplatform == "aspnet-core" %} @@ -1125,7 +1125,7 @@ An interaction with the appointments of Scheduler can be enabled/disabled using ## Make specific events readonly -There are scenarios where you need to restrict the CRUD action on specific appointments alone based on certain conditions. In the following example, the events that has occurred on the past hours from the current date of the Scheduler are made as read-only and the CRUD actions has been prevented only on those appointments. This can be achieved by setting `IsReadonly` field of read-only events to `true`. +There are scenarios where you need to restrict the CRUD action on specific appointments alone based on certain conditions. In the following example, the events that has occurred on the past hours from the current date of the Scheduler are made as read-only and the CRUD actions has been prevented only on those appointments. This can be achieved by setting [`IsReadonly`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_IsReadonly) field of read-only events to `true`. {% if page.publishingplatform == "aspnet-core" %} @@ -1152,7 +1152,7 @@ There are scenarios where you need to restrict the CRUD action on specific appoi -N> By default, the event editor is prevented to open on the read-only events when `isReadonly` (for Core) / `IsReadonly` (for MVC) field is set to **true**. +N> By default, the event editor is prevented to open on the read-only events when [`IsReadonly`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_IsReadonly) (for Core) / [`IsReadonly`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_IsReadonly) (for MVC) field is set to **true**. ## Restricting event creation on specific time slots @@ -1185,7 +1185,7 @@ You can restrict the users to create and update more than one appointment on spe ## Differentiate the past time events -To differentiate the appearance of the appointments based on specific criteria such as displaying the past hour appointments with different colors on Scheduler, `EventRendered` event can be used which triggers before the appointment renders on the Scheduler. +To differentiate the appearance of the appointments based on specific criteria such as displaying the past hour appointments with different colors on Scheduler, [`EventRendered`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_EventRendered) event can be used which triggers before the appointment renders on the Scheduler. {% if page.publishingplatform == "aspnet-core" %} @@ -1214,9 +1214,9 @@ To differentiate the appearance of the appointments based on specific criteria s ## Appointments occupying entire cell -The Scheduler allows the event to occupies the full height of the cell without its header part by setting `true` for `EnableMaxHeight` Property. +The Scheduler allows the event to occupies the full height of the cell without its header part by setting `true` for [`EnableMaxHeight`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.ScheduleEventSettings.html#Syncfusion_EJ2_Schedule_ScheduleEventSettings_EnableMaxHeight) Property. -We can show more indicator if more than one appointment is available in a same cell by setting `true` to `EnableIndicator` property whereas its default value is false. +We can show more indicator if more than one appointment is available in a same cell by setting `true` to [`EnableIndicator`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.ScheduleEventSettings.html#Syncfusion_EJ2_Schedule_ScheduleEventSettings_EnableIndicator) property whereas its default value is `false`. {% if page.publishingplatform == "aspnet-core" %} @@ -1249,7 +1249,7 @@ The tooltip shows the Scheduler appointment's information in a formatted style b ### Show or hide built-in tooltip -The tooltip can be displayed for appointments by setting `true` to the `EnableTooltip` option within the `EventSettings` property. +The tooltip can be displayed for appointments by setting `true` to the [`EnableTooltip`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.ScheduleEventSettings.html#Syncfusion_EJ2_Schedule_ScheduleEventSettings_EnableTooltip) option within the [`EventSettings`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_EventSettings) property. {% if page.publishingplatform == "aspnet-core" %} @@ -1278,7 +1278,7 @@ The tooltip can be displayed for appointments by setting `true` to the `EnableTo ### Customizing event tooltip using template -After enabling the default tooltip, it is possible to customize the display of needed event information on tooltip by making use of the `TooltipTemplate` option within the `EventSettings`. +After enabling the default tooltip, it is possible to customize the display of needed event information on tooltip by making use of the [`TooltipTemplate`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.ScheduleEventSettings.html#Syncfusion_EJ2_Schedule_ScheduleEventSettings_TooltipTemplate) option within the [`EventSettings`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_EventSettings). {% if page.publishingplatform == "aspnet-core" %} @@ -1305,7 +1305,7 @@ After enabling the default tooltip, it is possible to customize the display of n -N> All the field names that are mapped from the Scheduler dataSource to the appropriate field properties such as subject, description, location, startTime and endTime within the `EventSettings` can be accessed within the template. +N> All the field names that are mapped from the Scheduler dataSource to the appropriate field properties such as subject, description, location, startTime and endTime within the [`EventSettings`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_EventSettings) can be accessed within the template. ## Appointment selection @@ -1353,7 +1353,7 @@ In the following example, the subject of the appointment clicked has been displa ## Get the current view appointments -To retrieve the appointments present in the current view of the Scheduler, you can make use of the `getCurrentViewEvents` public method. In the following example, the count of current view appointment collection rendered has been traced in `DataBound` event. +To retrieve the appointments present in the current view of the Scheduler, you can make use of the `getCurrentViewEvents` public method. In the following example, the count of current view appointment collection rendered has been traced in [`DataBound`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_DataBound) event. {% if page.publishingplatform == "aspnet-core" %} @@ -1382,7 +1382,7 @@ To retrieve the appointments present in the current view of the Scheduler, you c ## Get the entire appointment collections -The entire collection of appointments rendered on the Scheduler can be accessed using the `getEvents` public method. In the following example, the count of entire appointment collection rendered on the Scheduler has been traced in `DataBound` event. +The entire collection of appointments rendered on the Scheduler can be accessed using the `getEvents` public method. In the following example, the count of entire appointment collection rendered on the Scheduler has been traced in [`DataBound`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_DataBound) event. {% if page.publishingplatform == "aspnet-core" %} diff --git a/ej2-asp-core-mvc/schedule/EJ2_ASP.MVC/cell-customization.md b/ej2-asp-core-mvc/schedule/EJ2_ASP.MVC/cell-customization.md index 1f0403c133..d6f6afc45f 100644 --- a/ej2-asp-core-mvc/schedule/EJ2_ASP.MVC/cell-customization.md +++ b/ej2-asp-core-mvc/schedule/EJ2_ASP.MVC/cell-customization.md @@ -1,6 +1,6 @@ --- layout: post -title: Cell Customization in ##Platform_Name## Schedule Component +title: Cell Customization in ##Platform_Name## Schedule Component| Syncfusion description: Learn here all about Cell Customization in Syncfusion ##Platform_Name## Schedule component of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Cell Customization @@ -9,13 +9,13 @@ documentation: ug --- -# Cell Customization +# Cell Customization in ##Platform_Name## Schedule Component -The cells of the Scheduler can be easily customized either using the cell template or `RenderCell` event. +The cells of the Scheduler can be easily customized either using the cell template or [`RenderCell`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_RenderCell) event. ## Setting cell dimensions in all views -The height and width of the Scheduler cells can be customized either to increase or reduce its size through the `CssClass` property, which overrides the default CSS applied on cells. +The height and width of the Scheduler cells can be customized either to increase or reduce its size through the [`CssClass`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_CssClass) property, which overrides the default CSS applied on cells. {% if page.publishingplatform == "aspnet-core" %} @@ -73,11 +73,11 @@ You can check whether the given time range slots are available for event creatio ## Customizing cells in all the views -It is possible to customize the appearance of the cells using both template options and `RenderCell` event on all the views. +It is possible to customize the appearance of the cells using both template options and [`RenderCell`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_RenderCell) event on all the views. ### Using template -The `CellTemplate` option accepts the template string and is used to customize the cell background with specific images or appropriate text on the given date values. +The [`CellTemplate`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_CellTemplate) option accepts the template string and is used to customize the cell background with specific images or appropriate text on the given date values. {% if page.publishingplatform == "aspnet-core" %} @@ -106,7 +106,7 @@ The `CellTemplate` option accepts the template string and is used to customize t ### Using renderCell event -An alternative to `CellTemplate` is the `RenderCell` event, which can also be used to customize the cells with appropriate images or formatted text values. +An alternative to [`CellTemplate`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_CellTemplate) is the [`RenderCell`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_RenderCell) event, which can also be used to customize the cells with appropriate images or formatted text values. {% if page.publishingplatform == "aspnet-core" %} @@ -133,7 +133,7 @@ An alternative to `CellTemplate` is the `RenderCell` event, which can also be us -You can customize cells such as work cells, month cells, all-day cells, header cells, resource header cells using `RenderCell` event by checking the `elementType` option within the event. You can check `elementType` with any of the following. +You can customize cells such as work cells, month cells, all-day cells, header cells, resource header cells using [`RenderCell`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_RenderCell) event by checking the `elementType` option within the event. You can check `elementType` with any of the following. | Element type | Description | |-------|---------| @@ -151,7 +151,7 @@ You can customize cells such as work cells, month cells, all-day cells, header c ## Customizing cell header in month view -The month header of each date cell in the month view can be customized using the `CellHeaderTemplate` option which accepts the string or HTMLElement. The corresponding date can be accessed with the template. +The month header of each date cell in the month view can be customized using the [`CellHeaderTemplate`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_CellHeaderTemplate) option which accepts the string or HTMLElement. The corresponding date can be accessed with the template. {% if page.publishingplatform == "aspnet-core" %} @@ -178,7 +178,7 @@ The month header of each date cell in the month view can be customized using the ## Customizing the minimum and maximum date values -Providing the `minDate` and `maxDate` property with some date values, allows the Scheduler to set the minimum and maximum date range. The Scheduler date that lies beyond this minimum and maximum date range will be in a disabled state so that the date navigation will be blocked beyond the specified date range. +Providing the [`minDate`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_MinDate) and [`maxDate`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_MaxDate) property with some date values, allows the Scheduler to set the minimum and maximum date range. The Scheduler date that lies beyond this minimum and maximum date range will be in a disabled state so that the date navigation will be blocked beyond the specified date range. {% if page.publishingplatform == "aspnet-core" %} @@ -205,7 +205,7 @@ Providing the `minDate` and `maxDate` property with some date values, allows the -N>By default, the `minDate` property value is set to new Date(1900, 0, 1) and `maxDate` property value is set to new Date(2099, 11, 31). The user can also set the customized `minDate` and `maxDate` property values. +N>By default, the [`minDate`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_MinDate) property value is set to new Date(1900, 0, 1) and [`maxDate`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_MaxDate) property value is set to new Date(2099, 11, 31). The user can also set the customized [`minDate`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_MinDate) and [`maxDate`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_MaxDate) property values. ## Customizing the weekend cells background color @@ -260,6 +260,6 @@ And, the background color for weekend cells in the Month view through the [`cssC ## How to disable multiple cell and row selection in Schedule -By default, the `AllowMultiCellSelection` and `AllowMultiRowSelection` properties of the Schedule are set to `true`. So, the Schedule allows user to select multiple cells and rows. If the user want to disable this multiple cell and row selection. The user can disable this feature by setting up `false` to these properties. +By default, the [`AllowMultiCellSelection`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_AllowMultiCellSelection) and [`AllowMultiRowSelection`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_AllowMultiRowSelection) properties of the Schedule are set to `true`. So, the Schedule allows user to select multiple cells and rows. If the user want to disable this multiple cell and row selection. The user can disable this feature by setting up `false` to these properties. N> You can refer to our [ASP.NET MVC Scheduler](https://www.syncfusion.com/aspnet-mvc-ui-controls/scheduler) feature tour page for its groundbreaking feature representations. You can also explore our [ASP.NET MVC Scheduler](https://ej2.syncfusion.com/aspnetmvc/Schedule/Overview#/material) example to knows how to present and manipulate data. diff --git a/ej2-asp-core-mvc/schedule/EJ2_ASP.MVC/context-menu.md b/ej2-asp-core-mvc/schedule/EJ2_ASP.MVC/context-menu.md index b51dff731f..49a218c166 100644 --- a/ej2-asp-core-mvc/schedule/EJ2_ASP.MVC/context-menu.md +++ b/ej2-asp-core-mvc/schedule/EJ2_ASP.MVC/context-menu.md @@ -1,6 +1,6 @@ --- layout: post -title: Context Menu in ##Platform_Name## Schedule Component +title: Context Menu in ##Platform_Name## Schedule Component| Syncfusion description: Learn here all about Context Menu in Syncfusion ##Platform_Name## Schedule component of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Context Menu @@ -9,13 +9,13 @@ documentation: ug --- -# Context menu +# Context menu in ##Platform_Name## Schedule Component -You can display context menu on work cells and appointments of Scheduler by making use of the `ContextMenu` control manually from the application end. In the following code example, context menu control is being added from sample end and set its target as `Scheduler`. +You can display context menu on work cells and appointments of Scheduler by making use of the [`ContextMenu`](https://ej2.syncfusion.com/aspnetmvc/documentation/context-menu/getting-started) control manually from the application end. In the following code example, context menu control is being added from sample end and set its target as `Scheduler`. On Scheduler cells, you can display the menu items such as `New Event`, `New Recurring Event` and `Today` option. For appointments, you can display its related options such as `Edit Event` and `Delete Event`. The default event window can be opened for appointment creation and editing using the `openEditor` method of Scheduler. -The deletion of appointments can be done by using the `deleteEvent` public method. Also, the `SelectedDate` property can be used to navigate between different dates. +The deletion of appointments can be done by using the `deleteEvent` public method. Also, the [`SelectedDate`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_SelectedDate) property can be used to navigate between different dates. N> You can also display custom menu options on Scheduler cells and appointments. Context menu will open on tap-hold in responsive mode. diff --git a/ej2-asp-core-mvc/schedule/EJ2_ASP.MVC/crud-actions.md b/ej2-asp-core-mvc/schedule/EJ2_ASP.MVC/crud-actions.md index 4d37356450..361505c482 100644 --- a/ej2-asp-core-mvc/schedule/EJ2_ASP.MVC/crud-actions.md +++ b/ej2-asp-core-mvc/schedule/EJ2_ASP.MVC/crud-actions.md @@ -1,6 +1,6 @@ --- layout: post -title: Crud Actions in ##Platform_Name## Schedule Component +title: Crud Actions in ##Platform_Name## Schedule Component| Syncfusion description: Learn here all about Crud Actions in Syncfusion ##Platform_Name## Schedule component of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Crud Actions @@ -9,7 +9,7 @@ documentation: ug --- -# CRUD Actions +# CRUD Actions in ##Platform_Name## Schedule Component Events, a.k.a. Appointments, play an important role in Scheduler with which the users mostly interact. You can easily manipulate (add/edit/delete) the desired appointments as and when required either using the editor window or through the drag and resize action. @@ -119,7 +119,7 @@ Additionally, the regex condition has been added to the Location field, so that -You can also dynamically prevent the creation of appointments on Scheduler. For example, say if you want to decline the creation of appointments on weekend days, you can check for its appropriate condition within the `ActionBegin` event. +You can also dynamically prevent the creation of appointments on Scheduler. For example, say if you want to decline the creation of appointments on weekend days, you can check for its appropriate condition within the [`ActionBegin`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_ActionBegin) event. {% if page.publishingplatform == "aspnet-core" %} @@ -190,11 +190,11 @@ The appointments can be edited and updated manually using the `saveEvent` method -**Recurring event** - The following code example shows how to edit a single occurrence of a recurring event. In this case, the modified data should hold an additional field namely `RecurrenceID` mapping to its parent recurring event's Id value. Also, this modified occurrence will be considered as a new event in the Scheduler dataSource, where it is linked with its parent event through the `RecurrenceID` field value. The `saveEvent` method takes 2 arguments, first one accepting the modified event data object and second argument accepting either of the 2 text values - `EditOccurrence` or `EditSeries`. +**Recurring event** - The following code example shows how to edit a single occurrence of a recurring event. In this case, the modified data should hold an additional field namely [`RecurrenceID`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_RecurrenceID) mapping to its parent recurring event's Id value. Also, this modified occurrence will be considered as a new event in the Scheduler dataSource, where it is linked with its parent event through the [`RecurrenceID`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_RecurrenceID) field value. The `saveEvent` method takes 2 arguments, first one accepting the modified event data object and second argument accepting either of the 2 text values - `EditOccurrence` or `EditSeries`. When the second argument is passed as `EditOccurrence`, which means that the passed event data is a single modified occurrence - whereas if the second argument is passed as `EditSeries`, it means that the modified data needs to be edited as a whole series and therefore no new event object will be maintained in the Scheduler dataSource. -In case of modifying the single occurrence, it is also necessary to update the `RecurrenceException` field of parent event altogether with the occurrence editing. To know more about how to set `RecurrenceException` values, refer the [recurring events](./appointments/#adding-exceptions) topic. +In case of modifying the single occurrence, it is also necessary to update the [`RecurrenceException`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_RecurrenceException) field of parent event altogether with the occurrence editing. To know more about how to set [`RecurrenceException`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_RecurrenceException) values, refer the [recurring events](./appointments/#adding-exceptions) topic. {% if page.publishingplatform == "aspnet-core" %} @@ -260,9 +260,9 @@ The recurring appointments can be edited in either of the following two ways. **Editing single occurrence** - When you double click on a recurring event, a popup prompts you to choose either to edit the single event or entire series. From this, if you choose to select **EDIT EVENT** option, a single occurrence of the recurring appointment alone will be edited. The following process takes place while editing a single occurrence, -* A new event will be created from the parent event data and added to the Scheduler dataSource, with all its default field values overwritten with the newly modified data and additionally, the `RecurrenceID` field will be added to it, that holds the `Id` value of the parent recurring event. Also, a new `Id` will be generated for this event in the dataSource. +* A new event will be created from the parent event data and added to the Scheduler dataSource, with all its default field values overwritten with the newly modified data and additionally, the [`RecurrenceID`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_RecurrenceID) field will be added to it, that holds the `Id` value of the parent recurring event. Also, a new `Id` will be generated for this event in the dataSource. -* The parent recurring event needs to be updated with appropriate `RecurrenceException` field to hold the edited occurrence appointment's date collection. +* The parent recurring event needs to be updated with appropriate [`RecurrenceException`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_RecurrenceException) field to hold the edited occurrence appointment's date collection. Therefore, when a single occurrence is edited from a recurring event, the batch action takes place by allowing both the `Add` and `Edit` action requests to take place together. @@ -370,9 +370,9 @@ The recurring appointments can be edited from current and following events when **Editing Following Events** - When you double click on a recurring event, a popup prompts you to choose either to edit the single event or Edit Following Events or entire series. From this, if you choose to select **EDIT FOLLOWING EVENTS** option, a current and following events of the recurring appointment will be edited. The following process takes place while editing a following events, -* A new event will be created from the parent event data and added to the Scheduler dataSource, with all its default field values overwritten with the newly modified data and additionally, the `followingID` field will be added to it, that holds the `id` value of the immediate parent recurring event. Also, a new `Id` will be generated for this event in the dataSource. +* A new event will be created from the parent event data and added to the Scheduler dataSource, with all its default field values overwritten with the newly modified data and additionally, the [`followingID`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_FollowingID) field will be added to it, that holds the `id` value of the immediate parent recurring event. Also, a new [`Id`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_Id) will be generated for this event in the dataSource. -* The parent recurring event needs to be updated with appropriate `recurrenceRule` field to hold the modified occurrence appointment's end date. +* The parent recurring event needs to be updated with appropriate [`recurrenceRule`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_RecurrenceRule) field to hold the modified occurrence appointment's end date. Therefore, when a following events are edited from a recurring event, the batch action takes place by allowing the `Add`, `Edit` and `Delete` action requests to take place together. @@ -444,7 +444,7 @@ if (param.action == "remove" || (param.action == "batch" && param.deleted != nul ### Restricting edit action based on specific criteria -You can also dynamically prevent the editing of appointments on Scheduler. For example, say if you want to decline the updating of appointments on non-working hours, you can check for its appropriate condition within the `ActionBegin` event. +You can also dynamically prevent the editing of appointments on Scheduler. For example, say if you want to decline the updating of appointments on non-working hours, you can check for its appropriate condition within the [`ActionBegin`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_ActionBegin) event. {% if page.publishingplatform == "aspnet-core" %} @@ -581,7 +581,7 @@ The recurring events can be deleted in either of the following two ways. **Single occurrence** - When you attempt to delete the recurring events, a popup prompts you to choose either to delete the single event or entire series. From this, if you choose to select **DELETE EVENT** option, a single occurrence of the recurring appointment alone will be removed. The following process takes place while removing a single occurrence, * The selected occurrence will be deleted from the Scheduler user interface. -* In code, the parent recurring event object will be updated with appropriate `RecurrenceException` field, to hold the deleted occurrence appointment's date collection. +* In code, the parent recurring event object will be updated with appropriate [`RecurrenceException`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_RecurrenceException) field, to hold the deleted occurrence appointment's date collection. Therefore, when a single occurrence is deleted from a recurring event, the `update` action takes place on the parent recurring event as shown in the following code example. @@ -641,7 +641,7 @@ The recurring events can be deleted from current and following events only when **Delete Following Events** - When you attempt to delete the recurring events, a popup prompts you to choose either to delete the single event or Following Events or entire series. From this, if you choose to select **FOLLOWING EVENT** option, a current and following events of the recurring appointment alone will be removed. The following process takes place while removing a single occurrence, * The selected occurrence and the following events in same series will be deleted from the Scheduler user interface. -* In code, the parent recurring event object will be updated with appropriate `recurrenceRule` field, to update the end date of the recurring events. +* In code, the parent recurring event object will be updated with appropriate [`recurrenceRule`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_RecurrenceRule) field, to update the end date of the recurring events. Therefore, when following events are deleted from a recurring event, the `remove` and `update` action takes place on the immediate parent recurring event as shown in the following code example. diff --git a/ej2-asp-core-mvc/schedule/EJ2_ASP.MVC/data-binding.md b/ej2-asp-core-mvc/schedule/EJ2_ASP.MVC/data-binding.md index 65125966cc..044c158e79 100644 --- a/ej2-asp-core-mvc/schedule/EJ2_ASP.MVC/data-binding.md +++ b/ej2-asp-core-mvc/schedule/EJ2_ASP.MVC/data-binding.md @@ -1,6 +1,6 @@ --- layout: post -title: Data Binding in ##Platform_Name## Schedule Component +title: Data Binding in ##Platform_Name## Schedule Component| Syncfusion description: Learn here all about Data Binding in Syncfusion ##Platform_Name## Schedule component of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Data Binding @@ -9,7 +9,7 @@ documentation: ug --- -# Data-binding +# Data-binding in ##Platform_Name## Schedule Component The Scheduler uses `DataManager`, which supports both RESTful JSON data services binding and local JavaScript object array binding. The [`DataSource`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2~Syncfusion.EJ2.Schedule.ScheduleEventSettings~DataSource.html) property can be assigned either with the instance of `DataManager` or JavaScript object array collection. It supports two kinds of data binding method: @@ -47,7 +47,7 @@ To bind local JSON data to the Scheduler, you can simply assign a JavaScript obj N> By default, `DataManager` uses `JsonAdaptor` for local data-binding. -You can also bind different field names to the default event fields as well as include additional custom fields to the event object collection which can be referred [here](./appointments/#binding-different-field-names). +> You can also bind different field names to the default event fields as well as include additional `custom fields` to the event object collection which can be referred [here](./appointments/#binding-different-field-names). ## Binding remote data @@ -144,7 +144,7 @@ It is possible to create your own custom adaptor by extending the built-in avail ## Loading data via AJAX post -You can bind the event data through external ajax request and assign it to the `DataSource` property of Scheduler. In the following code example, we have retrieved the data from server with the help of ajax request and assigned the resultant data to the `DataSource` property of Scheduler within the `onSuccess` event of Ajax. +You can bind the event data through external ajax request and assign it to the [`DataSource`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2~Syncfusion.EJ2.Schedule.ScheduleEventSettings~DataSource.html) property of Scheduler. In the following code example, we have retrieved the data from server with the help of ajax request and assigned the resultant data to the [`DataSource`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2~Syncfusion.EJ2.Schedule.ScheduleEventSettings~DataSource.html) property of Scheduler within the `onSuccess` event of Ajax. {% if page.publishingplatform == "aspnet-core" %} @@ -233,7 +233,7 @@ During the time of Scheduler interacting with server, there are chances that som -The argument passed to the `ActionFailure` event contains the error details returned from the server. +The argument passed to the [`ActionFailure`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2~Syncfusion.EJ2.Schedule.Schedule~ActionFailure.html) event contains the error details returned from the server. ## Scheduler CRUD actions @@ -358,7 +358,7 @@ namespace ScheduleSample.Controllers ## Configuring Scheduler with Google API service -We have assigned our custom created Google Calendar url to the DataManager and assigned the same to the Scheduler `DataSource`. Since the events data retrieved from the Google Calendar will be in its own object format, therefore it needs to be resolved manually within the Scheduler’s `DataBinding` event. Within this event, the event fields needs to be mapped properly and then assigned to the result. +We have assigned our custom created Google Calendar url to the DataManager and assigned the same to the Scheduler [`DataSource`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2~Syncfusion.EJ2.Schedule.ScheduleEventSettings~DataSource.html). Since the events data retrieved from the Google Calendar will be in its own object format, therefore it needs to be resolved manually within the Scheduler’s [`DataBinding`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_DataBinding) event. Within this event, the event fields needs to be mapped properly and then assigned to the result. {% if page.publishingplatform == "aspnet-core" %} diff --git a/ej2-asp-core-mvc/schedule/EJ2_ASP.MVC/editor-template.md b/ej2-asp-core-mvc/schedule/EJ2_ASP.MVC/editor-template.md index 61b0d6dda8..ccf4cb41ef 100644 --- a/ej2-asp-core-mvc/schedule/EJ2_ASP.MVC/editor-template.md +++ b/ej2-asp-core-mvc/schedule/EJ2_ASP.MVC/editor-template.md @@ -19,7 +19,7 @@ The editor window usually opens on the Scheduler, when a cell or event is double In mobile devices, you can open the detailed editor window in edit mode by clicking the edit icon on the popup, that opens on single tapping an event. You can also open it in add mode by single tapping a cell, which will display a `+` indication, clicking on it again will open the editor window. -N> You can also prevent the editor window from opening, by rendering Scheduler in a `Readonly` mode or by doing code customization within the `PopupOpen` event. +N> You can also prevent the editor window from opening, by rendering Scheduler in a [`Readonly`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_Readonly) mode or by doing code customization within the [`PopupOpen`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_PopupOpen) event. ### How to change the editor window header title and text of footer buttons @@ -52,7 +52,7 @@ You can change the header title and the text of buttons displayed at the footer ### How to change the label text of default editor fields -To change the default labels such as Subject, Location and other field names in the editor window, make use of the `Title` property available within the field option of `EventSettings`. +To change the default labels such as Subject, Location and other field names in the editor window, make use of the `Title` property available within the field option of [`EventSettings`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_EventSettings). {% if page.publishingplatform == "aspnet-core" %} @@ -112,7 +112,7 @@ N> Applicable validation rules can be referred from [form validation](http://ej2 ### Add additional fields to the default editor -The additional fields can be added to the default event editor by making use of the `PopupOpen` event which gets triggered before the event editor opens on the Scheduler. The `PopupOpen` is a client-side event that triggers before any of the generic popups opens on the Scheduler. The additional field (any of the form elements) should be added with a common class name `e-field`, so as to handle and process those additional data along with the default event object. In the following example, an additional field `Event Type` has been added to the default event editor and its value is processed accordingly. +The additional fields can be added to the default event editor by making use of the [`PopupOpen`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_PopupOpen) event which gets triggered before the event editor opens on the Scheduler. The [`PopupOpen`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_PopupOpen) is a client-side event that triggers before any of the generic popups opens on the Scheduler. The additional field (any of the form elements) should be added with a common class name `e-field`, so as to handle and process those additional data along with the default event object. In the following example, an additional field `Event Type` has been added to the default event editor and its value is processed accordingly. {% if page.publishingplatform == "aspnet-core" %} @@ -141,7 +141,7 @@ The additional fields can be added to the default event editor by making use of ### Customizing the default time duration in editor window -In default event editor window, start and end time duration are processed based on the `interval` value set within the `TimeScale` property. By default, `interval` value is set to 30, and therefore the start/end time duration within the event editor will be in a 30 minutes time difference. You can change this duration value by changing the `duration` option within the `PopupOpen` event as shown in the following code example. +In default event editor window, start and end time duration are processed based on the `interval` value set within the [`TimeScale`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_TimeScale) property. By default, `interval` value is set to 30, and therefore the start/end time duration within the event editor will be in a 30 minutes time difference. You can change this duration value by changing the `duration` option within the [`PopupOpen`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_PopupOpen) event as shown in the following code example. {% if page.publishingplatform == "aspnet-core" %} @@ -170,7 +170,7 @@ In default event editor window, start and end time duration are processed based ### How to prevent the display of editor and quick popups -It is possible to prevent the display of editor and quick popup windows by passing the value `true` to `cancel` option within the `PopupOpen` event. +It is possible to prevent the display of editor and quick popup windows by passing the value `true` to `cancel` option within the [`PopupOpen`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_PopupOpen) event. {% if page.publishingplatform == "aspnet-core" %} @@ -197,7 +197,7 @@ It is possible to prevent the display of editor and quick popup windows by passi -In case, if you need to prevent only specific popups on Scheduler, then you can check the condition based on the popup type. The types of the popup that can be checked within the `PopupOpen` event are as follows. +In case, if you need to prevent only specific popups on Scheduler, then you can check the condition based on the popup type. The types of the popup that can be checked within the [`PopupOpen`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_PopupOpen) event are as follows. | Type | Description | |-----|-----| @@ -211,7 +211,7 @@ In case, if you need to prevent only specific popups on Scheduler, then you can The quick info popups are the ones that gets opened, when a cell or appointment is single clicked on the desktop mode. On single clicking a cell, you can simply provide a subject and save it. Also, while single clicking on an event, a popup will be displayed where you can get the overview of the event information. You can also edit or delete those events through the options available in it. -By default, these popups are displayed over cells and appointments of Scheduler and to disable this action, set `false` to `ShowQuickInfo` property. +By default, these popups are displayed over cells and appointments of Scheduler and to disable this action, set `false` to [`ShowQuickInfo`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_ShowQuickInfo) property. {% if page.publishingplatform == "aspnet-core" %} @@ -242,7 +242,7 @@ N> The quick popup that opens while single clicking on the cells are not applica ### How to open Quick Info popup on multiple cell selection -By default the `QuickInfo` popup will open on single click of the cell. To open the quick info popup on multiple cell selection, you need to select the cells and press `enter` key. You can open this popup immediately after multiple cell selection by setting up `true` to `QuickInfoOnSelectionEnd` property where as its default value is `false`. +By default the `QuickInfo` popup will open on single click of the cell. To open the quick info popup on multiple cell selection, you need to select the cells and press `enter` key. You can open this popup immediately after multiple cell selection by setting up `true` to [`QuickInfoOnSelectionEnd`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_QuickInfoOnSelectionEnd) property where as its default value is `false`. {% if page.publishingplatform == "aspnet-core" %} @@ -286,7 +286,7 @@ L10n.load({ ### Customizing quick popups -The look and feel of the built-in quick popup window, which opens when single clicked on the cells or appointments can be customized by making use of the `QuickInfoTemplates` property of the Scheduler. There are 3 sub-options available to customize them easily, +The look and feel of the built-in quick popup window, which opens when single clicked on the cells or appointments can be customized by making use of the [`QuickInfoTemplates`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_QuickInfoTemplates) property of the Scheduler. There are 3 sub-options available to customize them easily, * header - Accepts the template design that customizes the header part of the quick popup. * content - Accepts the template design that customizes the content part of the quick popup. @@ -317,11 +317,11 @@ The look and feel of the built-in quick popup window, which opens when single cl -N> The quick popup in adaptive mode can also be customized using `QuickInfoTemplates` using `e-device` class. +N> The quick popup in adaptive mode can also be customized using [`QuickInfoTemplates`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_QuickInfoTemplates) using `e-device` class. ### Customizing timezone collection in the editor window -By default, the timezone collections in the editor window have been loaded with built-in timezone collections. Now we can be able to customize the timezone collections using the `TimezoneDataSource` property with the collection of `TimezoneFields` data. +By default, the timezone collections in the editor window have been loaded with built-in timezone collections. Now we can be able to customize the timezone collections using the [`TimezoneDataSource`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_TimezoneDataSource) property with the collection of `TimezoneFields` data. {% if page.publishingplatform == "aspnet-core" %} @@ -350,13 +350,13 @@ By default, the timezone collections in the editor window have been loaded with ## Customizing event editor using template -The event editor window can be customized by making use of the `EditorTemplate` option. Here, the custom window design is built with the required fields using the script template and its type should be of **text/x-template**. +The event editor window can be customized by making use of the [`EditorTemplate`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_EditorTemplate) option. Here, the custom window design is built with the required fields using the script template and its type should be of **text/x-template**. -Each field defined within template should contain the **e-field** class, so as to allow the processing of those field values internally. The ID of this customized script template section is assigned to the `EditorTemplate` option, so that these customized fields will be replaced onto the default editor window. +Each field defined within template should contain the **e-field** class, so as to allow the processing of those field values internally. The ID of this customized script template section is assigned to the [`EditorTemplate`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_EditorTemplate) option, so that these customized fields will be replaced onto the default editor window. >Note: **e-field** class only applicable for **DropDownList**, **DateTimePicker**, **MultiSelect**, **DatePicker**, **CheckBox** and **TextBox** components. Since we have processed the field values internally for the above mentioned components. -As we are using our Syncfusion sub-components within our editor using template in the following example, the custom defined form elements needs to be configured as required Syncfusion components such as **DropDownList** and **DateTimePicker** within the `PopupOpen` event. This particular step can be skipped, if the user needs to simply use the usual form elements. +As we are using our Syncfusion sub-components within our editor using template in the following example, the custom defined form elements needs to be configured as required Syncfusion components such as **DropDownList** and **DateTimePicker** within the [`PopupOpen`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_PopupOpen) event. This particular step can be skipped, if the user needs to simply use the usual form elements. {% if page.publishingplatform == "aspnet-core" %} @@ -410,7 +410,6 @@ met. {% endhighlight %} {% endtabs %} {% endif %} -![ ### How to add resource options within editor template @@ -439,8 +438,6 @@ The resource field can be added within editor template with MultiSelect control {% endtabs %} {% endif %} - - ### Apply validations on editor template fields In the following code example, validation has been added to the status field. @@ -469,14 +466,13 @@ In the following code example, validation has been added to the status field. {% endif %} - ### How to save the customized event editor using template -The **e-field** class is not added to each field defined within the template, so you should allow to set those field values externally by using the `popupClose` event. +The **e-field** class is not added to each field defined within the template, so you should allow to set those field values externally by using the [`popupClose`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_PopupClose) event. N> You can allow to retrieve the data only on the `save` and `delete` option. Data cannot be retrieved on the `close` and `cancel` options in the editor window. -The following code example shows how to save the customized event editor using a template by the `popupClose` event. +The following code example shows how to save the customized event editor using a template by the [`popupClose`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_PopupClose) event. {% if page.publishingplatform == "aspnet-core" %} @@ -503,7 +499,7 @@ The following code example shows how to save the customized event editor using a -In case, if you need to prevent only specific popups on Scheduler, then you can check the condition based on the popup type. The types of the popup that can be checked within the `popupClose` event are as follows. +In case, if you need to prevent only specific popups on Scheduler, then you can check the condition based on the popup type. The types of the popup that can be checked within the [`popupClose`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_PopupClose) event are as follows. | Type | Description | |------|-------------| @@ -521,7 +517,7 @@ In case, if you need to prevent only specific popups on Scheduler, then you can When the number of appointments count that lies on a particular time range * default appointment height exceeds the default height of a cell in month view and all other timeline views, a `+ more` text indicator will be displayed at the bottom of those cells. This indicator denotes that the cell contains few more appointments in it and clicking on that will display a popup displaying all the appointments present on that day. -N> To disable this option of showing popup with all hidden appointments, while clicking on the text indicator, you can do code customization within the `PopupOpen` event. +N> To disable this option of showing popup with all hidden appointments, while clicking on the text indicator, you can do code customization within the [`PopupOpen`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_PopupOpen) event. The same indicator is displayed on all-day row in calendar views such as day, week and work week views alone, when the number of appointment count present in a cell exceeds three. Clicking on the text indicator here will not open a popup, but will allow the expand/collapse option for viewing the remaining appointments present in the all-day row. @@ -583,7 +579,7 @@ The following code example shows you how to customize the default more indicator ### How to prevent the display of popup when clicking on the more text indicator -It is possible to prevent the display of popup window by passing the value `true` to `cancel` option within the `MoreEventsClick` event. +It is possible to prevent the display of popup window by passing the value `true` to `cancel` option within the [`MoreEventsClick`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_MoreEventsClick) event. {% if page.publishingplatform == "aspnet-core" %} @@ -612,7 +608,7 @@ It is possible to prevent the display of popup window by passing the value `true ### How to navigate Day view when clicking on more text indicator -The following code example shows you how to customize the `moreEventsClick` property to navigate to the Day view when clicking on the more text indicator. +The following code example shows you how to customize the [`moreEventsClick`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_MoreEventsClick) property to navigate to the Day view when clicking on the more text indicator. {% if page.publishingplatform == "aspnet-core" %} diff --git a/ej2-asp-core-mvc/schedule/EJ2_ASP.MVC/exporting.md b/ej2-asp-core-mvc/schedule/EJ2_ASP.MVC/exporting.md index 83209577d1..b1304802f6 100644 --- a/ej2-asp-core-mvc/schedule/EJ2_ASP.MVC/exporting.md +++ b/ej2-asp-core-mvc/schedule/EJ2_ASP.MVC/exporting.md @@ -15,7 +15,7 @@ The Scheduler supports exporting all its appointments both to an Excel or ICS ex ## Excel Exporting -The Scheduler allows you to export all its events into an Excel format file by using the [`exportToExcel`] client-side method. By default, it exports all the default fields of Scheduler mapped through `eventSettings` property. +The Scheduler allows you to export all its events into an Excel format file by using the [`exportToExcel`] client-side method. By default, it exports all the default fields of Scheduler mapped through [`EventSettings`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_EventSettings) property. N> Before you start with excel exporting functionality, you need to import and inject the `ExcelExport` module from the `'@syncfusion/ej2-schedule'` package using the `Inject` method of Scheduler. @@ -46,7 +46,7 @@ N> Before you start with excel exporting functionality, you need to import and i ### Exporting with custom fields -By default, Scheduler exports all the default event fields that are mapped to it through the `eventSettings` property. To limit the number of fields on the exported excel file, it provides an option to export only the custom fields of the event data. To export such custom fields alone, define the required `fields` and pass it as argument to the `exportToExcel` method as shown in the following example. For example: `['Id', 'Subject', 'StartTime', 'EndTime', 'Location']`. +By default, Scheduler exports all the default event fields that are mapped to it through the [`EventSettings`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_EventSettings) property. To limit the number of fields on the exported excel file, it provides an option to export only the custom fields of the event data. To export such custom fields alone, define the required `fields` and pass it as argument to the `exportToExcel` method as shown in the following example. For example: `['Id', 'Subject', 'StartTime', 'EndTime', 'Location']`. {% if page.publishingplatform == "aspnet-core" %} diff --git a/ej2-asp-core-mvc/schedule/EJ2_ASP.MVC/header-bar.md b/ej2-asp-core-mvc/schedule/EJ2_ASP.MVC/header-bar.md index a30f59dd7e..6b9af4e78a 100644 --- a/ej2-asp-core-mvc/schedule/EJ2_ASP.MVC/header-bar.md +++ b/ej2-asp-core-mvc/schedule/EJ2_ASP.MVC/header-bar.md @@ -15,7 +15,7 @@ The header part of Scheduler can be customized easily with the built-in options ## Show or Hide header bar -By default, the header bar holds the date and view navigation options, through which the user can switch between the dates and various views. This header bar can be hidden from the UI by setting `false` to the `ShowHeaderBar` property. It's default value is `true`. +By default, the header bar holds the date and view navigation options, through which the user can switch between the dates and various views. This header bar can be hidden from the UI by setting `false` to the [`showHeaderBar`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_ShowHeaderBar) property. It's default value is `true`. {% if page.publishingplatform == "aspnet-core" %} @@ -44,7 +44,7 @@ By default, the header bar holds the date and view navigation options, through w ## Customizing header bar -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. +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`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_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. {% if page.publishingplatform == "aspnet-core" %} @@ -73,7 +73,7 @@ Apart from the default date navigation and view options available on the header ## How to display the view options within the header bar popup -By default, the header bar holds the view navigation options, through which the user can switch between various views. You can move this view options to the header bar popup by setting `true` to the `EnableAdaptiveUI` property. +By default, the header bar holds the view navigation options, through which the user can switch between various views. You can move this view options to the header bar popup by setting `true` to the [`EnableAdaptiveUI`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_EnableAdaptiveUI) property. {% if page.publishingplatform == "aspnet-core" %} @@ -104,11 +104,11 @@ N> Refer [here](./resources/#adaptive-ui-in-desktop) to know more about adaptive ## Date header customization -The Scheduler UI that displays the date text on all views are considered as the date header cells. You can customize the date header cells of Scheduler either using `DateHeaderTemplate` or `RenderCell` event. +The Scheduler UI that displays the date text on all views are considered as the date header cells. You can customize the date header cells of Scheduler either using [`DateHeaderTemplate`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_DateHeaderTemplate) or [`RenderCell`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_RenderCell) event. ### Using date header template -The `DateHeaderTemplate` option is used to customize the date header cells of day, week and work-week views. +The [`DateHeaderTemplate`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_DateHeaderTemplate) option is used to customize the date header cells of day, week and work-week views. {% if page.publishingplatform == "aspnet-core" %} @@ -137,7 +137,7 @@ The `DateHeaderTemplate` option is used to customize the date header cells of da ### Using renderCell event -In month view, the date header template is not applicable and therefore the same customization can be added beside the date text in month cells by making use of the `RenderCell` event. +In month view, the date header template is not applicable and therefore the same customization can be added beside the date text in month cells by making use of the [`RenderCell`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_RenderCell) event. {% if page.publishingplatform == "aspnet-core" %} @@ -164,9 +164,9 @@ In month view, the date header template is not applicable and therefore the same ## Customizing the date range text -The `DateRangeTemplate` option allows you to customize the text content of the date range displayed in the scheduler. By default, the date range text is determined by the scheduler view being used. However, you can use the `DateRangeTemplate` option to override the default text and specify your own custom text to be displayed. +The [`DateRangeTemplate`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_DateRangeTemplate) option allows you to customize the text content of the date range displayed in the scheduler. By default, the date range text is determined by the scheduler view being used. However, you can use the [`DateRangeTemplate`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_DateRangeTemplate) option to override the default text and specify your own custom text to be displayed. -The `DateRangeTemplate` property includes `startDate`, `endDate` and `currentView` options, you can customize the date range text using these available options. +The [`DateRangeTemplate`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_DateRangeTemplate) property includes `startDate`, `endDate` and `currentView` options, you can customize the date range text using these available options. {% if page.publishingplatform == "aspnet-core" %} diff --git a/ej2-asp-core-mvc/schedule/EJ2_ASP.MVC/header-rows.md b/ej2-asp-core-mvc/schedule/EJ2_ASP.MVC/header-rows.md index 4aaa569ed0..bd9040114d 100644 --- a/ej2-asp-core-mvc/schedule/EJ2_ASP.MVC/header-rows.md +++ b/ej2-asp-core-mvc/schedule/EJ2_ASP.MVC/header-rows.md @@ -1,6 +1,6 @@ --- layout: post -title: Header Rows in ##Platform_Name## Schedule Component +title: Header Rows in ##Platform_Name## Schedule Component| Syncfusion description: Learn here all about Header Rows in Syncfusion ##Platform_Name## Schedule component of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Header Rows @@ -11,7 +11,7 @@ documentation: ug # Timeline header rows -The Timeline views can have additional header rows other than its default date and time header rows. It is possible to show individual header rows for displaying year, month and week separately using the `HeaderRows` property. This property is applicable only on the timeline views. The possible rows which can be added using `HeaderRows` property are as follows. +The Timeline views can have additional header rows other than its default date and time header rows. It is possible to show individual header rows for displaying year, month and week separately using the [`HeaderRows`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_HeaderRows) property. This property is applicable only on the timeline views. The possible rows which can be added using `HeaderRows` property are as follows. * `Year` * `Month` @@ -50,7 +50,7 @@ The following example shows the Scheduler displaying all the available header ro ## Display year and month rows in timeline views -To display the timeline Scheduler simply with year and month names alone, define the option `Year` and `Month` within the `HeaderRows` property. +To display the timeline Scheduler simply with year and month names alone, define the option `Year` and `Month` within the [`HeaderRows`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_HeaderRows) property. {% if page.publishingplatform == "aspnet-core" %} @@ -79,7 +79,7 @@ To display the timeline Scheduler simply with year and month names alone, define ## Display week numbers in timeline views -The week number can be displayed in a separate header row of the timeline Scheduler by setting `Week` option within `HeaderRows` property. +The week number can be displayed in a separate header row of the timeline Scheduler by setting `Week` option within [`HeaderRows`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_HeaderRows) property. {% if page.publishingplatform == "aspnet-core" %} @@ -108,7 +108,7 @@ The week number can be displayed in a separate header row of the timeline Schedu ## Timeline view displaying dates of a complete year -It is possible to display a complete year in a timeline view by setting `Interval` value as 12 and defining **TimelineMonth** view option within the `Views` property of Scheduler. +It is possible to display a complete year in a timeline view by setting [`Interval`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.ScheduleTimeScale.html#Syncfusion_EJ2_Schedule_ScheduleTimeScale_Interval) value as 12 and defining **TimelineMonth** view option within the [`Views`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_Views) property of Scheduler. {% if page.publishingplatform == "aspnet-core" %} @@ -137,7 +137,7 @@ It is possible to display a complete year in a timeline view by setting `Interva ## Customizing the header rows using template -You can customize the text of the header rows and display any images or formatted text on each individual header rows using the built-in `Template` option available within the `HeaderRows` property. +You can customize the text of the header rows and display any images or formatted text on each individual header rows using the built-in `Template` option available within the [`HeaderRows`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_HeaderRows) property. {% if page.publishingplatform == "aspnet-core" %} diff --git a/ej2-asp-core-mvc/schedule/EJ2_ASP.MVC/how-to/enable-scroll-option-on-all-day-section.md b/ej2-asp-core-mvc/schedule/EJ2_ASP.MVC/how-to/enable-scroll-option-on-all-day-section.md index 28240e4c36..0106f09361 100644 --- a/ej2-asp-core-mvc/schedule/EJ2_ASP.MVC/how-to/enable-scroll-option-on-all-day-section.md +++ b/ej2-asp-core-mvc/schedule/EJ2_ASP.MVC/how-to/enable-scroll-option-on-all-day-section.md @@ -1,6 +1,6 @@ --- layout: post -title: Enable Scroll Option On All Day Section in ##Platform_Name## Schedule Component +title: Enable Scroll Option On All Day Section in ##Platform_Name## Schedule| Syncfusion description: Learn here all about Enable Scroll Option On All Day Section in Syncfusion ##Platform_Name## Schedule component of syncfusion and more. platform: ej2-asp-core-mvc control: Enable Scroll Option On All Day Section @@ -11,7 +11,7 @@ documentation: ug # Enable scroll option on all-day section -When you have larger number of appointments in all-day row, it is difficult to view all the appointments properly. In that case you can enable scroller option for all-day row by setting true to `EnableAllDayScroll` whereas its default value is false. When setting this property to true, individual scroller for all-day row is enabled when it reaches its maximum height on expanding. +When you have larger number of appointments in all-day row, it is difficult to view all the appointments properly. In that case you can enable scroller option for all-day row by setting true to [`EnableAllDayScroll`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_EnableAllDayScroll) whereas its default value is `false`. When setting this property to true, individual scroller for all-day row is enabled when it reaches its maximum height on expanding. N> This property is not applicable for Scheduler with Height `auto`. diff --git a/ej2-asp-core-mvc/schedule/EJ2_ASP.MVC/how-to/open-event-editor-manually.md b/ej2-asp-core-mvc/schedule/EJ2_ASP.MVC/how-to/open-event-editor-manually.md index 25c2d92aec..c565061151 100644 --- a/ej2-asp-core-mvc/schedule/EJ2_ASP.MVC/how-to/open-event-editor-manually.md +++ b/ej2-asp-core-mvc/schedule/EJ2_ASP.MVC/how-to/open-event-editor-manually.md @@ -1,6 +1,6 @@ --- layout: post -title: Open Event Editor Manually in ##Platform_Name## Schedule Component +title: Open Event Editor Manually in ##Platform_Name## Schedule | Syncfusion description: Learn here all about Open Event Editor Manually in Syncfusion ##Platform_Name## Schedule component of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Open Event Editor Manually @@ -41,7 +41,7 @@ Scheduler allows the user to manually open the event editor on specific time or ## Open editor window on single click -By default, Scheduler Editor window will open when double clicking the cells or appointments. You can also open the editor window with single click by using `openEditor` method in `EventClick` and `CellClick` events of scheduler and setting false to `ShowQuickInfo`. The following example shows how to open editor window on single click of cells and appointments. +By default, Scheduler Editor window will open when double clicking the cells or appointments. You can also open the editor window with single click by using `openEditor` method in [`EventClick`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_EventClick) and [`CellClick`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_CellClick) events of scheduler and setting false to [`ShowQuickInfo`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_ShowQuickInfo). The following example shows how to open editor window on single click of cells and appointments. {% if page.publishingplatform == "aspnet-core" %} diff --git a/ej2-asp-core-mvc/schedule/EJ2_ASP.MVC/how-to/prevent-date-navigation.md b/ej2-asp-core-mvc/schedule/EJ2_ASP.MVC/how-to/prevent-date-navigation.md index f24335660d..fc371f01cd 100644 --- a/ej2-asp-core-mvc/schedule/EJ2_ASP.MVC/how-to/prevent-date-navigation.md +++ b/ej2-asp-core-mvc/schedule/EJ2_ASP.MVC/how-to/prevent-date-navigation.md @@ -1,6 +1,6 @@ --- layout: post -title: Prevent Date Navigation in ##Platform_Name## Schedule Component +title: Prevent Date Navigation in ##Platform_Name## Schedule | Syncfusion description: Learn here all about Prevent Date Navigation in Syncfusion ##Platform_Name## Schedule component of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Prevent Date Navigation @@ -10,7 +10,7 @@ documentation: ug # Prevent the Date Navigation -We can prevent navigation while clicking on the date header by simply removing `e-navigate` class from header cells which can be achieved in the `RenderCell` event as shown in the following code example. +We can prevent navigation while clicking on the date header by simply removing `e-navigate` class from header cells which can be achieved in the [`RenderCell`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_RenderCell) event as shown in the following code example. {% if page.publishingplatform == "aspnet-core" %} diff --git a/ej2-asp-core-mvc/schedule/EJ2_ASP.MVC/how-to/set-different-work-hours.md b/ej2-asp-core-mvc/schedule/EJ2_ASP.MVC/how-to/set-different-work-hours.md index 07bc6d04e4..ba4a9d0a72 100644 --- a/ej2-asp-core-mvc/schedule/EJ2_ASP.MVC/how-to/set-different-work-hours.md +++ b/ej2-asp-core-mvc/schedule/EJ2_ASP.MVC/how-to/set-different-work-hours.md @@ -1,6 +1,6 @@ --- layout: post -title: Set Different Work Hours in ##Platform_Name## Schedule Component +title: Set Different Work Hours in ##Platform_Name## Schedule | Syncfusion description: Learn here all about Set Different Work Hours in Syncfusion ##Platform_Name## Schedule component of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Set Different Work Hours @@ -10,7 +10,7 @@ documentation: ug # Set Different Working Hours on Different Days -By default, the work hours of the Scheduler is highlighted based on the start and end values provided within the `WorkHours` property which remains same for all days. To highlight different work hours range for different days,`setWorkHours` method. You can pass date object/ multiple date objects collection as first argument and start and end time need to be added as work hours should be passed as second and third arguments respectively. In the following code example, on button click 11:00 AM to 08:00 PM of 15th and 17th February has been added in work hours. +By default, the work hours of the Scheduler is highlighted based on the start and end values provided within the [`WorkHours`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_WorkHours) property which remains same for all days. To highlight different work hours range for different days,`setWorkHours` method. You can pass date object/ multiple date objects collection as first argument and start and end time need to be added as work hours should be passed as second and third arguments respectively. In the following code example, on button click 11:00 AM to 08:00 PM of 15th and 17th February has been added in work hours. {% if page.publishingplatform == "aspnet-core" %} diff --git a/ej2-asp-core-mvc/schedule/EJ2_ASP.MVC/localization.md b/ej2-asp-core-mvc/schedule/EJ2_ASP.MVC/localization.md index 64dabbe252..9342640264 100644 --- a/ej2-asp-core-mvc/schedule/EJ2_ASP.MVC/localization.md +++ b/ej2-asp-core-mvc/schedule/EJ2_ASP.MVC/localization.md @@ -128,7 +128,7 @@ For example, the following code example lets you to define the Hungarian transla ## Setting date format -Scheduler can be used with all valid date formats and by default it follows the universal date format "MM/dd/yyyy". If the `DateFormat` property is not specified particularly, then it will work based on the locale that is assigned to the Scheduler. As the default locale applied on Scheduler is "en-US", this makes it to follow the "MM/dd/yyyy" pattern. +Scheduler can be used with all valid date formats and by default it follows the universal date format "MM/dd/yyyy". If the [`DateFormat`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_DateFormat) property is not specified particularly, then it will work based on the locale that is assigned to the Scheduler. As the default locale applied on Scheduler is "en-US", this makes it to follow the "MM/dd/yyyy" pattern. {% if page.publishingplatform == "aspnet-core" %} @@ -157,7 +157,7 @@ Scheduler can be used with all valid date formats and by default it follows the ## Setting the time format -Time formats is a way of representing the time value in different string formats in the Scheduler. By default, the time mode of the Scheduler can be either 12 or 24 hours format which is completely based on the `locale` set to the Scheduler. Since the default `locale` value of the Scheduler is en-US, the time mode will be set to 12 hours format automatically. You can also customize the format by using the `timeFormat` property. To know more about the time format standards, refer to the [Date and Time Format](https://ej2.syncfusion.com/aspnetmvc/documentation/common/internationalization/#custom-formats) section. +Time formats is a way of representing the time value in different string formats in the Scheduler. By default, the time mode of the Scheduler can be either 12 or 24 hours format which is completely based on the `locale` set to the Scheduler. Since the default `locale` value of the Scheduler is en-US, the time mode will be set to 12 hours format automatically. You can also customize the format by using the [`timeFormat`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_TimeFormat) property. To know more about the time format standards, refer to the [Date and Time Format](https://ej2.syncfusion.com/aspnetmvc/documentation/common/internationalization/#custom-formats) section. The following example demonstrates the Scheduler component in 24 hours format. @@ -186,11 +186,11 @@ The following example demonstrates the Scheduler component in 24 hours format. -N> `timeFormat` property only accepts the valid time format's. +N> [`timeFormat`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_TimeFormat) property only accepts the valid time format's. ## Displaying Scheduler in RTL mode -The Scheduler layout and its behavior can be changed as per the common RTL (Right to Left) conventions by setting `EnableRtl` to `true`. By doing so, the Scheduler will display its usual layout from right to left. It's default value is `false`. +The Scheduler layout and its behavior can be changed as per the common RTL (Right to Left) conventions by setting [`EnableRtl`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_EnableRtl) to `true`. By doing so, the Scheduler will display its usual layout from right to left. It's default value is `false`. {% if page.publishingplatform == "aspnet-core" %} diff --git a/ej2-asp-core-mvc/schedule/EJ2_ASP.MVC/recurrence-editor.md b/ej2-asp-core-mvc/schedule/EJ2_ASP.MVC/recurrence-editor.md index 5f9cf3293b..6682a538aa 100644 --- a/ej2-asp-core-mvc/schedule/EJ2_ASP.MVC/recurrence-editor.md +++ b/ej2-asp-core-mvc/schedule/EJ2_ASP.MVC/recurrence-editor.md @@ -1,6 +1,6 @@ --- layout: post -title: Recurrence Editor in ##Platform_Name## Schedule Component +title: Recurrence Editor in ##Platform_Name## Schedule Component| Syncfusion description: Learn here all about Recurrence Editor in Syncfusion ##Platform_Name## Schedule component of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Recurrence Editor @@ -9,7 +9,7 @@ documentation: ug --- -# Recurrence editor +# Recurrence editor in ##Platform_Name## Schedule Component The Recurrence editor is integrated into Scheduler editor window by default, to process the recurrence rule generation for events. Apart from this, it can also be used as an individual component referring from the Scheduler repository to work with the recurrence related processes. @@ -25,7 +25,7 @@ By default, there are 5 types of repeat options available in recurrence editor s * Monthly * Yearly -It is possible to customize the recurrence editor to display only the specific repeat options such as `Daily` and `Weekly` options alone by setting the appropriate `frequencies` option. +It is possible to customize the recurrence editor to display only the specific repeat options such as `Daily` and `Weekly` options alone by setting the appropriate [`frequencies`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.RecurrenceEditor.html#Syncfusion_EJ2_Schedule_RecurrenceEditor_Frequencies) option. {% if page.publishingplatform == "aspnet-core" %} diff --git a/ej2-asp-core-mvc/schedule/EJ2_ASP.MVC/resources.md b/ej2-asp-core-mvc/schedule/EJ2_ASP.MVC/resources.md index 4c8e2e1c6c..5cf77af18f 100644 --- a/ej2-asp-core-mvc/schedule/EJ2_ASP.MVC/resources.md +++ b/ej2-asp-core-mvc/schedule/EJ2_ASP.MVC/resources.md @@ -19,7 +19,7 @@ The Scheduler groups the resources based on different criteria. It includes grou ## Resource fields -The default options available within the `Resources` collection are as follows, +The default options available within the [`Resources`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.ScheduleGroup.html#Syncfusion_EJ2_Schedule_ScheduleGroup_Resources) collection are as follows, | Field name | Type | Description | |-------|---------| --------------- | @@ -45,7 +45,7 @@ The data for resources can bind with Scheduler either as a local JSON collection ### Using local JSON data -The following code example depicts how to bind the local JSON data to the `DataSource` of `Resources` collection. +The following code example depicts how to bind the local JSON data to the `DataSource` of [`Resources`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.ScheduleGroup.html#Syncfusion_EJ2_Schedule_ScheduleGroup_Resources) collection. * Give the resource datasource in Index method * Add the Scheduler code in View page @@ -113,7 +113,7 @@ It is possible to display the Scheduler in default mode without visually showcas The appointments belonging to the different resources will be displayed altogether on the default Scheduler, which will be differentiated based on the resource color assigned in the `Resources` (depicting to which resource that particular appointment belongs) collection. -**Example:** To display default Scheduler with multiple resource options in the event editor, ignore the group option and simply define the `Resources` property with all its internal options. +**Example:** To display default Scheduler with multiple resource options in the event editor, ignore the group option and simply define the [`Resources`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.ScheduleGroup.html#Syncfusion_EJ2_Schedule_ScheduleGroup_Resources) property with all its internal options. {% if page.publishingplatform == "aspnet-core" %} @@ -237,7 +237,7 @@ This kind of grouping allows the Scheduler to display all the resources at a sin -N> The `Name` field defined in the **resources** collection namely `Owners` will be mapped within the `Group` property, in order to enable the grouping option with those resource levels on the Scheduler. +N> The `Name` field defined in the **resources** collection namely `Owners` will be mapped within the [`Group`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_Group) property, in order to enable the grouping option with those resource levels on the Scheduler. ### Grouping multi-level resources @@ -270,7 +270,7 @@ It is possible to group the resources of Scheduler in multiple levels, by mappin ### One-to-One grouping -In multi-level grouping, Scheduler usually groups the resources on the child level based on the `GroupIDField` that maps with the `IdField` field of parent level resources (as `ByGroupID` set to true by default). There are also option which allows you to group all the child resource(s) against each of its parent resource(s). To enable this kind of grouping, set `false` to the `ByGroupID` option within the `Group` property. In the following code example, there are two levels of resources, on which all the 3 resources at the child level is mapped one to one with each resource on the first level. +In multi-level grouping, Scheduler usually groups the resources on the child level based on the `GroupIDField` that maps with the `IdField` field of parent level resources (as [`ByGroupID`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.ScheduleGroup.html#Syncfusion_EJ2_Schedule_ScheduleGroup_ByGroupID) set to true by default). There are also option which allows you to group all the child resource(s) against each of its parent resource(s). To enable this kind of grouping, set `false` to the [`ByGroupID`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.ScheduleGroup.html#Syncfusion_EJ2_Schedule_ScheduleGroup_ByGroupID) option within the [`Group`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_Group) property. In the following code example, there are two levels of resources, on which all the 3 resources at the child level is mapped one to one with each resource on the first level. {% if page.publishingplatform == "aspnet-core" %} @@ -299,7 +299,7 @@ In multi-level grouping, Scheduler usually groups the resources on the child lev ### Grouping resources by date -It groups the number of resources under each date and is applicable only on the calendar views such as Day, Week, Work Week, Month, Agenda and Month-Agenda. To enable such grouping, set `ByDate` option to `true` within the `Group` property. +It groups the number of resources under each date and is applicable only on the calendar views such as Day, Week, Work Week, Month, Agenda and Month-Agenda. To enable such grouping, set [`ByDate`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.ScheduleGroup.html#Syncfusion_EJ2_Schedule_ScheduleGroup_ByDate) option to `true` within the [`Group`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_Group) property. **Example:** To display the Scheduler with resources grouped by date, @@ -332,7 +332,7 @@ N> This kind of grouping by date is not applicable on any of the **timeline view ## Customizing parent resource cells -In timeline view work cells of parent resource can be customized by checking the `elementType` as `resourceGroupCells` in the event `RenderCell`. In the following code example, background color of the work hours has been changed. +In timeline view work cells of parent resource can be customized by checking the `elementType` as `resourceGroupCells` in the event [`RenderCell`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_RenderCell). In the following code example, background color of the work hours has been changed. {% if page.publishingplatform == "aspnet-core" %} @@ -361,7 +361,7 @@ In timeline view work cells of parent resource can be customized by checking the ## Working with shared events -Multiple resources can share the same events, thus allowing the CRUD action made on it to reflect on all other shared instances simultaneously. To enable such option, set `AllowGroupEdit` option to `true` within the `Group` property. With this property enabled, a single appointment object will be maintained within the appointment collection, even if it is shared by more than one resource – whereas the resource fields of such appointment object will be in array which hold the IDs of the multiple resources. +Multiple resources can share the same events, thus allowing the CRUD action made on it to reflect on all other shared instances simultaneously. To enable such option, set [`AllowGroupEdit`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.ScheduleGroup.html#Syncfusion_EJ2_Schedule_ScheduleGroup_AllowGroupEdit) option to `true` within the [`Group`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_Group) property. With this property enabled, a single appointment object will be maintained within the appointment collection, even if it is shared by more than one resource – whereas the resource fields of such appointment object will be in array which hold the IDs of the multiple resources. N> Any actions such as create, edit or delete held on any one of the shared event instances, will be reflected on all other related instances visible on the UI. @@ -486,7 +486,7 @@ It is possible to expand and collapse the resources which have child resource in ## Displaying tooltip for resource headers -It is possible to display tooltip over the resource headers showing the resource information. By default, there won't be any tooltip displayed on the resource headers, and to enable it, you need to assign the customized template design to the `HeaderTooltipTemplate` option within the `Group` property. +It is possible to display tooltip over the resource headers showing the resource information. By default, there won't be any tooltip displayed on the resource headers, and to enable it, you need to assign the customized template design to the [`HeaderTooltipTemplate`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.ScheduleGroup.html#Syncfusion_EJ2_Schedule_ScheduleGroup_HeaderTooltipTemplate) option within the [`Group`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_Group) property. {% if page.publishingplatform == "aspnet-core" %} @@ -515,7 +515,7 @@ It is possible to display tooltip over the resource headers showing the resource ## Choosing between resource colors for appointments -By default, the colors defined on the top level resources collection will be applied for the events. In case, if you want to apply specific resource color to events irrespective of its top-level parent resource color, it can be achieved by defining `ResourceColorField` option within the `EventSettings` property. +By default, the colors defined on the top level resources collection will be applied for the events. In case, if you want to apply specific resource color to events irrespective of its top-level parent resource color, it can be achieved by defining [`ResourceColorField`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.ScheduleEventSettings.html#Syncfusion_EJ2_Schedule_ScheduleEventSettings_ResourceColorField) option within the [`EventSettings`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_EventSettings) property. In the following example, the colors mentioned in the second level will get applied over the events. @@ -544,7 +544,7 @@ In the following example, the colors mentioned in the second level will get appl -N> The value of the `ResourceColorField` field should be mapped with the `Name` value given within the `Resources` property. +N> The value of the `ResourceColorField` field should be mapped with the `Name` value given within the [`Resources`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_Resources) property. ## Dynamically add and remove resources @@ -579,11 +579,14 @@ To remove the resources dynamically, `removeResource` method is used which accep ## Setting different working days and hours for resources -Each resource in the Scheduler can have different working hours as well as different working days set to it. There are default options available within the `Resources` collection, to customize the default working hours and days of the Scheduler. +Each resource in the Scheduler can have different `working hours` as well as different `working days` set to it. There are default options available within the `Resources` collection, to customize the default working hours and days of the Scheduler. + +* [Using the work day field for different work days](#Set-different-work-days) +* [Using the start hour and end hour fields for different work hours](#Set-different-work-hours) ### Set different work days -Different working days can be set for the resources of Scheduler using the `WorkDaysField` property which maps the working days field from the resource dataSource. This field accepts the collection of day indexes (from 0 to 6) of a week. By default, it is set to [1, 2, 3, 4, 5] and in the following example, each resource has been set with different values and therefore each of them will render only those working days. This option is applicable only on the calendar views and is not applicable on timeline views. +Different `working days` can be set for the resources of Scheduler using the `WorkDaysField` property which maps the working days field from the resource dataSource. This field accepts the collection of day indexes (from 0 to 6) of a week. By default, it is set to [1, 2, 3, 4, 5] and in the following example, each resource has been set with different values and therefore each of them will render only those working days. This option is applicable only on the calendar views and is not applicable on timeline views. {% if page.publishingplatform == "aspnet-core" %} @@ -612,11 +615,13 @@ Different working days can be set for the resources of Scheduler using the `Work ### Set different work hours -Working hours indicates the work hour duration of a day, which is highlighted visually with active color over the work cells. Each resource on the Scheduler can be defined with its own set of working hours as depicted in the following example. +Different `working Hours` can be set for the resources of Scheduler using the `startHourField` and `endHourField` property which maps the `startHourField` and `endHourField` field from the resource dataSource. * `StartHourField` - Denotes the start time of the working/business hour in a day. * `EndHourField` - Denotes the end time limit of the working/business hour in a day. +Working hours indicates the work hour duration of a day, which is highlighted visually with active color over the work cells. Each resource on the Scheduler can be defined with its own set of working hours as depicted in the following example. + {% if page.publishingplatform == "aspnet-core" %} {% tabs %} @@ -681,7 +686,7 @@ N> The `HideNonWorkingDays` property only applies when the Scheduler is grouped ## Compact view in mobile -Although the Scheduler views are designed keeping in mind the responsiveness of the control in mobile devices, however when using Scheduler with multiple resources - it is difficult to view all the resources and its relevant events at once on the mobile. Therefore, we have introduced a new compact mode specially for displaying multiple resources of Scheduler on mobile devices. By default, this mode is enabled while using Scheduler with multiple resources on mobile devices. If in case, you need to disable this compact mode, set `false` to the `EnableCompactView` option within the `Group` property. Disabling this option will display the exact desktop mode of Scheduler view on mobile devices. +Although the Scheduler views are designed keeping in mind the responsiveness of the control in mobile devices, however when using Scheduler with multiple resources - it is difficult to view all the resources and its relevant events at once on the mobile. Therefore, we have introduced a new compact mode specially for displaying multiple resources of Scheduler on mobile devices. By default, this mode is enabled while using Scheduler with multiple resources on mobile devices. If in case, you need to disable this compact mode, set `false` to the [`EnableCompactView`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.ScheduleGroup.html#Syncfusion_EJ2_Schedule_ScheduleGroup_EnableCompactView) option within the [`Group`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_Group) property. Disabling this option will display the exact desktop mode of Scheduler view on mobile devices. With this compact view enabled on mobile, you can view only single resource at a time and to switch to other resources, there is a TreeView at the left listing out all other available resources - clicking on which will display that particular resource and its related appointments. @@ -689,7 +694,7 @@ With this compact view enabled on mobile, you can view only single resource at a ## Adaptive UI in desktop -By default, the Scheduler layout adapts automatically in the desktop and mobile devices with appropriate UI changes. In case, if the user wants to display the Adaptive scheduler in desktop mode with adaptive enhancements, then the property `EnableAdaptiveUI` can be set to true. Enabling this option will display the exact mobile mode of Scheduler view on desktop devices. +By default, the Scheduler layout adapts automatically in the desktop and mobile devices with appropriate UI changes. In case, if the user wants to display the Adaptive scheduler in desktop mode with adaptive enhancements, then the property [`EnableAdaptiveUI`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_EnableAdaptiveUI) can be set to true. Enabling this option will display the exact mobile mode of Scheduler view on desktop devices. Some of the default changes made for compact Scheduler to render in desktop devices are as follows, * View options displayed in the Navigation drawer. diff --git a/ej2-asp-core-mvc/schedule/EJ2_ASP.MVC/row-auto-height.md b/ej2-asp-core-mvc/schedule/EJ2_ASP.MVC/row-auto-height.md index 4c202afdbe..fc96532926 100644 --- a/ej2-asp-core-mvc/schedule/EJ2_ASP.MVC/row-auto-height.md +++ b/ej2-asp-core-mvc/schedule/EJ2_ASP.MVC/row-auto-height.md @@ -1,6 +1,6 @@ --- layout: post -title: Row Auto Height in ##Platform_Name## Schedule Component +title: Row Auto Height in ##Platform_Name## Schedule Component| Syncfusion description: Learn here all about Row Auto Height in Syncfusion ##Platform_Name## Schedule component of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Row Auto Height @@ -9,11 +9,11 @@ documentation: ug --- -# Row Auto Height +# Row Auto Height in ##Platform_Name## Schedule Component By default, the height of the Scheduler rows in Timeline views are static and therefore, when the same time range holds multiple overlapping appointments, a `+n more` text indicator will be displayed. With this feature enabled, you can now view all the overlapping appointments present in those specific time range by auto-adjusting the row height based on the presence of the appointments count, instead of displaying the `+n more` text indicators. -To enable auto row height adjustments on Scheduler Timeline views and Month view, set `true` to the `rowAutoHeight` property whose default value is `false`. +To enable auto row height adjustments on Scheduler Timeline views and Month view, set `true` to the [`rowAutoHeight`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_RowAutoHeight) property whose default value is `false`. N> This auto row height adjustment is applicable only on all the Timeline views as well as on the calendar Month view. @@ -21,7 +21,7 @@ Now, let's see how it works on those applicable views with examples. ## Calendar month view -By default, the rows of the calendar Month view can hold only the limited appointments count based on its row height, and the rest of the overlapping appointments are indicated with a `+n more` text indicator. The following example shows how the month view row auto-adjusts based on the number of appointments count, when this `RowAutoHeight` feature is enabled. +By default, the rows of the calendar Month view can hold only the limited appointments count based on its row height, and the rest of the overlapping appointments are indicated with a `+n more` text indicator. The following example shows how the month view row auto-adjusts based on the number of appointments count, when this [`RowAutoHeight`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_RowAutoHeight) feature is enabled. {% if page.publishingplatform == "aspnet-core" %} @@ -50,7 +50,7 @@ By default, the rows of the calendar Month view can hold only the limited appoin ## Timeline views -When the feature `RowAutoHeight` is enabled in Timeline views, the row height gets auto-adjusted based on the number of overlapping events occupied on the same time range, which is demonstrated in the following example. +When the feature [`RowAutoHeight`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_RowAutoHeight) is enabled in Timeline views, the row height gets auto-adjusted based on the number of overlapping events occupied on the same time range, which is demonstrated in the following example. {% if page.publishingplatform == "aspnet-core" %} @@ -108,7 +108,7 @@ The following example shows how the auto row adjustment feature works on timelin ## Appointments occupying entire cell -By default, with the feature `RowAutoHeight`, there will be a space in the bottom of the cell when appointment is rendered. To avoid this space, we can set true to the property `IgnoreWhitespace` with in `EventSettings` whereas its default property value is false. In the following code example, the whitespace below the appointments has been ignored. +By default, with the feature [`RowAutoHeight`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_RowAutoHeight), there will be a space in the bottom of the cell when appointment is rendered. To avoid this space, we can set true to the property [`IgnoreWhitespace`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.ScheduleEventSettings.html#Syncfusion_EJ2_Schedule_ScheduleEventSettings_IgnoreWhitespace) with in [`EventSettings`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_EventSettings) whereas its default property value is false. In the following code example, the whitespace below the appointments has been ignored. {% if page.publishingplatform == "aspnet-core" %} @@ -135,6 +135,6 @@ By default, with the feature `RowAutoHeight`, there will be a space in the botto -**Note**: The property `IgnoreWhitespace` will be applicable only when `RowAutoHeight` feature is enabled in the Scheduler +**Note**: The property [`IgnoreWhitespace`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.ScheduleEventSettings.html#Syncfusion_EJ2_Schedule_ScheduleEventSettings_IgnoreWhitespace) will be applicable only when [`RowAutoHeight`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_RowAutoHeight) feature is enabled in the Scheduler N> You can refer to our [ASP.NET MVC Scheduler](https://www.syncfusion.com/aspnet-mvc-ui-controls/scheduler) feature tour page for its groundbreaking feature representations. You can also explore our [ASP.NET MVC Scheduler](https://ej2.syncfusion.com/aspnetmvc/Schedule/Overview#/material) example to knows how to present and manipulate data. diff --git a/ej2-asp-core-mvc/schedule/EJ2_ASP.MVC/timescale.md b/ej2-asp-core-mvc/schedule/EJ2_ASP.MVC/timescale.md index fa22dc01f3..d77e52a97f 100644 --- a/ej2-asp-core-mvc/schedule/EJ2_ASP.MVC/timescale.md +++ b/ej2-asp-core-mvc/schedule/EJ2_ASP.MVC/timescale.md @@ -1,6 +1,6 @@ --- layout: post -title: Timescale in ##Platform_Name## Schedule Component +title: Timescale in ##Platform_Name## Schedule Component | Syncfusion description: Learn here all about Timescale in Syncfusion ##Platform_Name## Schedule component of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Timescale @@ -11,17 +11,17 @@ documentation: ug # TimeScale Customization -The time slots are usually the time cells that are displayed on the Day, Week and Work Week views of both the calendar (to the left most position) and timeline views (at the top position). The `TimeScale` property allows you to control and set the required time slot duration for the work cells displayed on Scheduler. It includes the following sub-options such as, +The time slots are usually the time cells that are displayed on the Day, Week and Work Week views of both the calendar (to the left most position) and timeline views (at the top position). The [`TimeScale`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_TimeScale) property allows you to control and set the required time slot duration for the work cells displayed on Scheduler. It includes the following sub-options such as, -* `Enable` - When set to `true`, allows the Scheduler to display the appointments accurately against the exact time duration. If set to `false`, all the appointments of a day will be displayed one below the other with no grid lines displayed. Its default value is `true`. -* `Interval` – Defines the time duration on which the time axis to be displayed either in 1 hour or 30 minutes interval and so on. It accepts the values in minutes and defaults to 60. -* `SlotCount` – Decides the number of slot count to be split for the specified time interval duration. It defaults to 2, thus displaying two slots to represent an hour(each slot depicting 30 minutes duration). +* [`Enable`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.ScheduleTimeScale.html#Syncfusion_EJ2_Schedule_ScheduleTimeScale_Enable) - When set to `true`, allows the Scheduler to display the appointments accurately against the exact time duration. If set to `false`, all the appointments of a day will be displayed one below the other with no grid lines displayed. Its default value is `true`. +* [`Interval`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.ScheduleTimeScale.html#Syncfusion_EJ2_Schedule_ScheduleTimeScale_Interval) – Defines the time duration on which the time axis to be displayed either in 1 hour or 30 minutes interval and so on. It accepts the values in minutes and defaults to 60. +* [`SlotCount`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.ScheduleTimeScale.html#Syncfusion_EJ2_Schedule_ScheduleTimeScale_SlotCount) – Decides the number of slot count to be split for the specified time interval duration. It defaults to 2, thus displaying two slots to represent an hour(each slot depicting 30 minutes duration). >Note: The upper limit for rendering slots within a single day, utilizing the **Interval** and **SlotCount** properties of the **TimeScale**, stands at 1000. This constraint aligns with the maximum **colspan** value permissible for the **table** element, also capped at 1000. This particular restriction is relevant exclusively to the `TimelineDay`, `TimelineWeek` and `TimelineWorkWeek` views. ## Setting different time slot duration -The `Interval` and `SlotCount` properties can be used together on the Scheduler to set different time slot duration which is depicted in the following code example. Here, six time slots together represents an hour. +The [`Interval`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.ScheduleTimeScale.html#Syncfusion_EJ2_Schedule_ScheduleTimeScale_Interval) and [`SlotCount`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.ScheduleTimeScale.html#Syncfusion_EJ2_Schedule_ScheduleTimeScale_SlotCount) properties can be used together on the Scheduler to set different time slot duration which is depicted in the following code example. Here, six time slots together represents an hour. {% if page.publishingplatform == "aspnet-core" %} @@ -50,10 +50,10 @@ The `Interval` and `SlotCount` properties can be used together on the Scheduler ## Customizing time cells using template -The `TimeScale` property also provides template option to allow customization of time slots which are as follows, +The [`TimeScale`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_TimeScale) property also provides template option to allow customization of time slots which are as follows, -* `MajorSlotTemplate` - The template option to be applied for major time slots. Here, the template accepts either the string or HTMLElement as template design and then the parsed design is displayed onto the time cells. The time details can be accessed within this template. -* `MinorSlotTemplate` - The template option to be applied for minor time slots. Here, the template accepts either the string or HTMLElement as template design and then the parsed design is displayed onto the time cells. The time details can be accessed within this template. +* [`MajorSlotTemplate`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.ScheduleTimeScale.html#Syncfusion_EJ2_Schedule_ScheduleTimeScale_MajorSlotTemplate) - The template option to be applied for major time slots. Here, the template accepts either the string or HTMLElement as template design and then the parsed design is displayed onto the time cells. The time details can be accessed within this template. +* [`MinorSlotTemplate`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.ScheduleTimeScale.html#Syncfusion_EJ2_Schedule_ScheduleTimeScale_MinorSlotTemplate) - The template option to be applied for minor time slots. Here, the template accepts either the string or HTMLElement as template design and then the parsed design is displayed onto the time cells. The time details can be accessed within this template. {% if page.publishingplatform == "aspnet-core" %} @@ -82,7 +82,7 @@ The `TimeScale` property also provides template option to allow customization of ## Hide the timescale -The grid lines which indicates the exact time duration can be enabled or disabled on the Scheduler, by setting `true` or `false` to the `Enable` option within the `TimeScale` property. It's default value is `true`. +The grid lines which indicates the exact time duration can be enabled or disabled on the Scheduler, by setting `true` or `false` to the `Enable` option within the [`TimeScale`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_TimeScale) property. It's default value is `true`. {% if page.publishingplatform == "aspnet-core" %} @@ -111,7 +111,7 @@ The grid lines which indicates the exact time duration can be enabled or disable ## Highlighting current date and time -By default, Scheduler indicates current date with a highlighted date header on all views, as well as marks accurately the system's current time on specific views such as Day, Week, Work Week, Timeline Day, Timeline Week and Timeline Work Week views. To stop highlighting the current time indicator on Scheduler views, set `false` to the `ShowTimeIndicator` property which defaults to `true`. +By default, Scheduler indicates current date with a highlighted date header on all views, as well as marks accurately the system's current time on specific views such as Day, Week, Work Week, Timeline Day, Timeline Week and Timeline Work Week views. To stop highlighting the current time indicator on Scheduler views, set `false` to the [`ShowTimeIndicator`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_ShowTimeIndicator) property which defaults to `true`. {% if page.publishingplatform == "aspnet-core" %} diff --git a/ej2-asp-core-mvc/schedule/EJ2_ASP.MVC/timezone.md b/ej2-asp-core-mvc/schedule/EJ2_ASP.MVC/timezone.md index 0db3098892..ca9fcdf506 100644 --- a/ej2-asp-core-mvc/schedule/EJ2_ASP.MVC/timezone.md +++ b/ej2-asp-core-mvc/schedule/EJ2_ASP.MVC/timezone.md @@ -1,6 +1,6 @@ --- layout: post -title: Timezone in ##Platform_Name## Schedule Component +title: Timezone in ##Platform_Name## Schedule Component | Syncfusion description: Learn here all about Timezone in Syncfusion ##Platform_Name## Schedule component of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Timezone @@ -9,9 +9,9 @@ documentation: ug --- -# Timezone +# Timezone Customization -The Scheduler makes use of the current system time zone by default. If it needs to follow some other user-specific time zone, then the `Timezone` property needs to be used. Apart from the default action of applying specific timezone to the Scheduler, it is also possible to set different time zone values for each appointments through the properties `StartTimezone` and `EndTimezone` which can be defined as separate fields within the event fields collection. +The Scheduler makes use of the current system time zone by default. If it needs to follow some other user-specific time zone, then the [`Timezone`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_Timezone) property needs to be used. Apart from the default action of applying specific timezone to the Scheduler, it is also possible to set different time zone values for each appointments through the properties [`StartTimezone`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_StartTimezone) and [`EndTimezone`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_EndTimezone) which can be defined as separate fields within the event fields collection. >Note: **Timezone** property only applicable for the appointment processing and current time indication. @@ -52,7 +52,7 @@ The following code example displays an appointment from 9.00 AM to 10.00 AM when ## Scheduler set to specific timezone -When a time zone is set to Scheduler through `Timezone` property, the appointments will be displayed exactly based on the Scheduler timezone regardless of its client timezone. In the following code example, appointments will be displayed based on Eastern Time (UTC -05:00). +When a time zone is set to Scheduler through [`Timezone`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_Timezone) property, the appointments will be displayed exactly based on the Scheduler timezone regardless of its client timezone. In the following code example, appointments will be displayed based on Eastern Time (UTC -05:00). {% if page.publishingplatform == "aspnet-core" %} @@ -81,7 +81,7 @@ When a time zone is set to Scheduler through `Timezone` property, the appointmen ## Display events on same time everywhere with no time difference -Setting `Timezone` to UTC for Scheduler will display the appointments on same time as in the database for all the users in different time zone. +Setting [`Timezone`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_Timezone) to UTC for Scheduler will display the appointments on same time as in the database for all the users in different time zone. {% if page.publishingplatform == "aspnet-core" %} @@ -110,7 +110,7 @@ Setting `Timezone` to UTC for Scheduler will display the appointments on same ti ## Set specific timezone for events -It is possible to set different timezone for Scheduler events by setting `StartTimezone` and `EndTimezone` properties within the `EventSettings` option. It allows each appointment to maintain different timezone and displays on Scheduler with appropriate time differences. +It is possible to set different timezone for Scheduler events by setting [`StartTimezone`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_StartTimezone) and [`EndTimezone`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_EndTimezone) properties within the [`EventSettings`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_EventSettings) option. It allows each appointment to maintain different timezone and displays on Scheduler with appropriate time differences. {% if page.publishingplatform == "aspnet-core" %} diff --git a/ej2-asp-core-mvc/schedule/EJ2_ASP.MVC/views.md b/ej2-asp-core-mvc/schedule/EJ2_ASP.MVC/views.md index 5e47bdad0b..a5df09baf5 100644 --- a/ej2-asp-core-mvc/schedule/EJ2_ASP.MVC/views.md +++ b/ej2-asp-core-mvc/schedule/EJ2_ASP.MVC/views.md @@ -1,6 +1,6 @@ --- layout: post -title: Views in ##Platform_Name## Schedule Component +title: Views in ##Platform_Name## Schedule Component | Syncfusion description: Learn here all about Views in Syncfusion ##Platform_Name## Schedule component of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Views @@ -9,7 +9,7 @@ documentation: ug --- -# Views +# Views in ##Platform_Name## Schedule Component The Scheduler includes wide variety of view modes with unique configuration options for each view. The available view modes are Day, Week, Work Week, Month, Year, Agenda, Month Agenda, Timeline Day, Timeline Week, Timeline Work Week and Timeline Month, Timeline Year, out of which the `Week` view is set as active. @@ -19,7 +19,7 @@ N> By default, Scheduler displays the calendar views such as day, week, work wee ## Setting specific view on scheduler -As the Scheduler displays `Week` view by default, therefore to change the active view, set `currentView` property with the desired view name. The applicable view names that the Scheduler accepts are as follows, +As the Scheduler displays `Week` view by default, therefore to change the active view, set [`currentView`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_CurrentView) property with the desired view name. The applicable view names that the Scheduler accepts are as follows, * Day * Week @@ -92,7 +92,7 @@ To configure Scheduler with different configurations on each view, refer the fol ## View specific configuration -There are scenarios where each view may need to have different configurations. For such cases, you can define the applicable scheduler properties within the `views` Property for each view option as depicted in the following examples. The fields available to be used within each view options are as follows. +There are scenarios where each view may need to have different configurations. For such cases, you can define the applicable scheduler properties within the [`views`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_Views) Property for each view option as depicted in the following examples. The fields available to be used within each view options are as follows. | Property | Type | Description | Applicable views | |----------|------|-------------|------------------| @@ -104,7 +104,7 @@ There are scenarios where each view may need to have different configurations. F | `dateHeaderTemplate` | String | The template option which is used to customize the date header cells and is applied only on the views, wherever it is defined. | All views. | | `eventTemplate` | String | The template option to customize the events background. It will get applied to the events of the view to which it is currently being defined. | All views. | | `showWeekend` | Boolean | When set to `false`, it hides the weekend days of a week from the views on which it is defined.| All views. | -| `group` | [GroupModel](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.Schedule.ScheduleGroup_members.html) | Allows to set different resource grouping options on all available Scheduler view modes. | All views. | +| [`group`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_Group) | [GroupModel](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.Schedule.ScheduleGroup_members.html) | Allows to set different resource grouping options on all available Scheduler view modes. | All views. | | `cellTemplate` | String | The template option to customize the work cells of the Scheduler and is applied only on the views, on which it is defined. | Applicable on all views except Agenda view. | | `workDays` | Number[] | It is used to set the working days on the Scheduler views. | Applicable on all views except Agenda view. | | `displayName` | String | When a particular view is customized to display with different intervals, this property allows the user to set different display name for each of the views. | Applicable on all views except Agenda and Month Agenda. | @@ -279,7 +279,7 @@ N> The year view also has module support. In that, you can get all the months of ### Agenda view -The Agenda view lists out the appointments in a grid-like view for the next 7 days by default from the current date. The count of the days can be changed using the API `agendaDaysCount`. It allows virtual scrolling of dates by enabling the `allowVirtualScrolling` property. Also, you can enable or disable the display of days on Scheduler that has no appointments by setting true or false to the `hideEmptyAgendaDays` property. +The Agenda view lists out the appointments in a grid-like view for the next 7 days by default from the current date. The count of the days can be changed using the API [`agendaDaysCount`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_AgendaDaysCount). It allows virtual scrolling of dates by enabling the `allowVirtualScrolling` property. Also, you can enable or disable the display of days on Scheduler that has no appointments by setting true or false to the [`hideEmptyAgendaDays`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_HideEmptyAgendaDays) property. The following code example depicts how to customize the display of events within Agenda view alone. @@ -519,7 +519,7 @@ The following code example depicts how to group the multiple resources on Timeli #### Auto row height -Timeline Year view supports Auto row height. When the feature `rowAutoHeight` is enabled, the row height gets auto-adjusted based on the number of overlapping events occupied in the same time range. If you disable the Auto row height, you have the `+ more` text indicator on each day cell of a Timeline Year view, clicking on which will allow you to view the hidden appointments of a day. +Timeline Year view supports Auto row height. When the feature [`rowAutoHeight`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_RowAutoHeight) is enabled, the row height gets auto-adjusted based on the number of overlapping events occupied in the same time range. If you disable the Auto row height, you have the `+ more` text indicator on each day cell of a Timeline Year view, clicking on which will allow you to view the hidden appointments of a day. {% if page.publishingplatform == "aspnet-core" %} diff --git a/ej2-asp-core-mvc/schedule/EJ2_ASP.MVC/working-days.md b/ej2-asp-core-mvc/schedule/EJ2_ASP.MVC/working-days.md index 2060494021..12b87a90fa 100644 --- a/ej2-asp-core-mvc/schedule/EJ2_ASP.MVC/working-days.md +++ b/ej2-asp-core-mvc/schedule/EJ2_ASP.MVC/working-days.md @@ -1,6 +1,6 @@ --- layout: post -title: Working Days in ##Platform_Name## Schedule Component +title: Working Days in ##Platform_Name## Schedule Component | Syncfusion description: Learn here all about Working Days in Syncfusion ##Platform_Name## Schedule component of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Working Days @@ -127,7 +127,7 @@ By default, week numbers are shown in the Scheduler based on the first day of th `FirstFullWeek` – The first week of the year begins when meeting the first day of the week (firstDayOfWeek) and the first day of the year. -For more details refer to [this link](https://learn.microsoft.com/en-us/dotnet/api/system.globalization.calendarweekrule?view=net-8.0#remarks) +For more details refer to [this link](https://docs.microsoft.com/en-us/dotnet/api/system.globalization.calendarweekrule?view=net-5.0#remarks) {% if page.publishingplatform == "aspnet-core" %} @@ -160,9 +160,9 @@ For more details refer to [this link](https://learn.microsoft.com/en-us/dotnet/a Working hours indicates the work hour limit within the Scheduler, which is visually highlighted with an active color on work cells. The working hours can be set on Scheduler using the `WorkHours` property which is of object type and includes the following sub-options, -* `Highlight` – enables/disables the highlighting of work hours. -* `Start` - sets the start time of the working/business hour of a day. -* `End` - sets the end time limit of the working/business hour of a day. +* [`Highlight`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.ScheduleWorkHours.html#Syncfusion_EJ2_Schedule_ScheduleWorkHours_Highlight) – enables/disables the highlighting of work hours. +* [`Start`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.ScheduleWorkHours.html#Syncfusion_EJ2_Schedule_ScheduleWorkHours_Start) - sets the start time of the working/business hour of a day. +* [`End`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.ScheduleWorkHours.html#Syncfusion_EJ2_Schedule_ScheduleWorkHours_End) - sets the end time limit of the working/business hour of a day. {% if page.publishingplatform == "aspnet-core" %} @@ -191,7 +191,7 @@ Working hours indicates the work hour limit within the Scheduler, which is visua ## Scheduler displaying custom hours -It is possible to display the event Scheduler layout with specific time durations by hiding the unwanted hours. To do so, set the start and end hour for the Scheduler using the `StartHour` and `EndHour` properties respectively. +It is possible to display the event Scheduler layout with specific time durations by hiding the unwanted hours. To do so, set the start and end hour for the Scheduler using the [`StartHour`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_StartHour) and [`EndHour`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_EndHour) properties respectively. The following code example displays the Scheduler starting from the time range 7.00 AM to 6.00 PM and the remaining hours are hidden on the UI. @@ -222,7 +222,7 @@ The following code example displays the Scheduler starting from the time range 7 ## Setting start day of the week -By default, Scheduler defaults to `Sunday` as its first day of a week. To change the Scheduler's start day of a week with different day, set the `FirstDayOfWeek` property with the values ranging from 0 to 6. +By default, Scheduler defaults to `Sunday` as its first day of a week. To change the Scheduler's start day of a week with different day, set the [`FirstDayOfWeek`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_FirstDayOfWeek) property with the values ranging from 0 to 6. > Here, Sunday is always denoted as 0, Monday as 1 and so on. diff --git a/ej2-asp-core-mvc/schedule/EJ2_ASP.NETCORE/appointments.md b/ej2-asp-core-mvc/schedule/EJ2_ASP.NETCORE/appointments.md index f9ccf5330f..222076f1ec 100644 --- a/ej2-asp-core-mvc/schedule/EJ2_ASP.NETCORE/appointments.md +++ b/ej2-asp-core-mvc/schedule/EJ2_ASP.NETCORE/appointments.md @@ -61,7 +61,7 @@ N> For example, if an appointment is created for two days say from November 25, Represents an appointment that is created for an entire day such as holiday events. It is usually displayed separately in an all-day row, a separate row for all-day appointments below the date header section. In Timeline views, the all-day appointments displays in the working space area, and no separate all-day row is present in that view. -N> To change normal appointment into all-day event, set `IsAllDay` field to true. +N> To change normal appointment into all-day event, set [`isAllDay`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_IsAllDay) field to true. ### Hide all-day row events @@ -77,7 +77,7 @@ N> You can also enable scroller for all-day row, [refer](./how-to/enable-scroll- ## Customize the rendering of the spanned events -By default, Scheduler will renders the spanned events (appointment with more than 24 hours duration) in the all-day row by setting `AllDayRow` will the default type renders to the `spannedEventPlacement` option within the `e-schedule-eventsettings` tag helper. Now we can customize rendering of the that events inside the work cells itself by modifying the `spannedEventPlacement` option as `TimeSlot`. In this following example, shows how to render the spanned appointments inside the work cells as follows. +By default, Scheduler will renders the spanned events (appointment with more than 24 hours duration) in the all-day row by setting `AllDayRow` will the default type renders to the [`spannedEventPlacement`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.ScheduleEventSettings.html#Syncfusion_EJ2_Schedule_ScheduleEventSettings_SpannedEventPlacement) option within the `e-schedule-eventsettings` tag helper. Now we can customize rendering of the that events inside the work cells itself by modifying the [`spannedEventPlacement`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.ScheduleEventSettings.html#Syncfusion_EJ2_Schedule_ScheduleEventSettings_SpannedEventPlacement) option as `TimeSlot`. In this following example, shows how to render the spanned appointments inside the work cells as follows. {% if page.publishingplatform == "aspnet-core" %} @@ -139,7 +139,7 @@ The following example depicts how to create a recurring event on Scheduler with ### Adding exceptions -A few instance of the recurrence series can be excluded on specific dates, by adding those exceptional dates to the `recurrenceException` field. These date values should be given in the ISO date time format with no hyphens(-) separating the date elements. +A few instance of the recurrence series can be excluded on specific dates, by adding those exceptional dates to the [`recurrenceException`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_RecurrenceException) field. These date values should be given in the ISO date time format with no hyphens(-) separating the date elements. For example, 22nd February 2018 can be represented as 20180222. Also, the time part being represented in UTC format needs to add "Z" after the time portion with no space. "07:30:00 UTC" is therefore represented as "073000Z". @@ -170,9 +170,9 @@ For example, 22nd February 2018 can be represented as 20180222. Also, the time p ### Editing an occurrence from a series -To dynamically edit a particular occurrence from an event series and display it on the initial load of Scheduler, the edited occurrence needs to be added as a new event to the dataSource collection, with an additional `recurrenceID` field defined to it. The `recurrenceID` field of edited occurrence usually maps the ID value of the parent event. +To dynamically edit a particular occurrence from an event series and display it on the initial load of Scheduler, the edited occurrence needs to be added as a new event to the dataSource collection, with an additional [`recurrenceID`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_RecurrenceID) field defined to it. The [`recurrenceID`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_RecurrenceID) field of edited occurrence usually maps the ID value of the parent event. -In this example, a recurring instance that displays on the date 30th Jan 2018 is edited with different timings. Therefore, this particular date is excluded from the parent recurring event that repeats from 28th January 2018 to 4th February 2018. This can be done by adding the `recurrenceException` field with the excluded date value on the parent event. Also, the edited occurrence event which is created as a new event should carry the `recurrenceID` field pointing to the parent event's `id` value. +In this example, a recurring instance that displays on the date 30th Jan 2018 is edited with different timings. Therefore, this particular date is excluded from the parent recurring event that repeats from 28th January 2018 to 4th February 2018. This can be done by adding the [`recurrenceException`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_RecurrenceException) field with the excluded date value on the parent event. Also, the edited occurrence event which is created as a new event should carry the [`recurrenceID`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_RecurrenceID) field pointing to the parent event's [`Id`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_Id) value. {% if page.publishingplatform == "aspnet-core" %} @@ -201,9 +201,9 @@ In this example, a recurring instance that displays on the date 30th Jan 2018 is ### Edit only the current and following events -To edit only the current and following events enable the property `editFollowingEvents` within `eventSettings` property. The edited occurrence needs to be added as a new event to the dataSource collection, with an additional `followingID` field defined to it. The `followingID` field of edited occurrence usually maps the ID value of the immediate parent event. +To edit only the current and following events enable the property [`editFollowingEvents`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.ScheduleEventSettings.html#Syncfusion_EJ2_Schedule_ScheduleEventSettings_EditFollowingEvents) within [`eventSettings`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_EventSettings) property. The edited occurrence needs to be added as a new event to the dataSource collection, with an additional [`followingID`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_FollowingID) field defined to it. The [`followingID`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_FollowingID) field of edited occurrence usually maps the ID value of the immediate parent event. -In this example, a recurring instance that displays on the date 30th Jan 2018 and its following dates are edited with different subject. Therefore, this particular date and its following dates are excluded from the parent recurring event that repeats from 28th January 2018 to 4th February 2018. This can be done by updating the `recurrenceRule` field with the until date value on the parent event. Also, the edited events which is created as a new event should carry the `followingID` field pointing to the immediate parent event's `Id` value. +In this example, a recurring instance that displays on the date 30th Jan 2018 and its following dates are edited with different subject. Therefore, this particular date and its following dates are excluded from the parent recurring event that repeats from 28th January 2018 to 4th February 2018. This can be done by updating the [`recurrenceRule`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_RecurrenceRule) field with the until date value on the parent event. Also, the edited events which is created as a new event should carry the [`followingID`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_FollowingID) field pointing to the immediate parent event's [`id`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_Id) value. {% if page.publishingplatform == "aspnet-core" %} @@ -232,7 +232,7 @@ In this example, a recurring instance that displays on the date 30th Jan 2018 an ### Recurrence options and rules -Events can be repeated on a daily, weekly, monthly or yearly basis based on the recurrence rule which accepts the string value. The following details should be assigned to the `recurrenceRule` property to generate the recurring instances. +Events can be repeated on a daily, weekly, monthly or yearly basis based on the recurrence rule which accepts the string value. The following details should be assigned to the [`recurrenceRule`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_RecurrenceRule) property to generate the recurring instances. * Repeat type - daily/weekly/monthly/yearly. * How many times it needs to be repeated? @@ -321,7 +321,7 @@ The built-in validation support has been added by default for recurring appointm The Scheduler dataSource usually holds the event instances, where each of the instance includes a collection of appropriate [fields](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.Schedule.ScheduleField_properties.html). It is mandatory to map these fields with the equivalent fields of database, when remote data is bound to it. When the local JSON data is bound, then the field names defined within the instances needs to be mapped with the scheduler event fields correctly. -N> To create an event on Scheduler, it is enough to define the `startTime` and `endTime`. Also `id` field becomes mandatory to process CRUD actions on appropriate events. +N> To create an event on Scheduler, it is enough to define the [`startTime`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_StartTime) and [`endTime`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_EndTime). Also [`Id`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_Id) field becomes mandatory to process CRUD actions on appropriate events. ### Built-in fields @@ -329,20 +329,20 @@ The built-in fields available on Scheduler event object are as follows. | Field name | Description | |-------|---------| -| id | The `id` field needs to be defined as mandatory and this field usually assigns a unique ID value to each of the events.| -| subject | The `subject` field is optional, and usually assigns the summary text to each of the events.| -| startTime | The `startTime` field defines the start time of an event and it is mandatory to provide it for any of the valid event objects.| -| endTime | The `endTime` field defines the end time of an event and it is mandatory to provide the end time for any of the valid event objects.| -| startTimezone | It maps the `startTimezone` field from the dataSource and usually accepts the valid IANA timezone names. It is assumed that the value provided for this field is taken into consideration while processing the `startTime` field. When this field is not mapped with any timezone names, then the events will be processed based on the timezone assigned to the Scheduler.| -| endTimezone | It maps the `endTimezone` field from the dataSource and usually accepts the valid IANA timezone names. It is assumed that the value provided for this field is taken into consideration while processing the `endTime` field. When this field is not mapped with any timezone names, then the events will be processed based on the timezone assigned to the Scheduler.| -| location | It maps the `location` field from the dataSource and the location text value will be displayed over the events.| -| description | It maps the `description` field from the dataSource and denotes the event description which is optional.| -| isAllDay | The `isAllDay` field is mapped from the dataSource and is used to denote whether an event is created for an entire day or for specific time alone. Usually, an event with `isAllDay` field set to true will be considered as an all-day event. | -| recurrenceID | It maps the `recurrenceID` field from dataSource and usually holds the ID value of the parent recurrence event. This field is applicable only for the edited occurrence events.| -| recurrenceRule | It maps the `recurrenceRule` field from dataSource and holds the recurrence rule value in a string format. Also, it uniquely identifies whether the event belongs to a recurring type or normal ones. | -| recurrenceException | It maps the `recurrenceException` field from dataSource and is used to hold the collection of exception dates, on which the recurring occurrences needs to be excluded. The recurrenceException should be specified in UTC format. | -| `isReadonly` | It maps the `isReadonly` field from dataSource. It is mainly used to make specific appointments as readonly when set to `true`. | -| `isBlock` | It maps the `isBlock` field from dataSource. It is used to block the particular time ranges in the Scheduler and prevents the event creation on those time slots. | +| id | The [`id`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_Id) field needs to be defined as mandatory and this field usually assigns a unique ID value to each of the events.| +| subject | The [`subject`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_Subject) field is optional, and usually assigns the summary text to each of the events.| +| startTime | The [`startTime`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_StartTime) field defines the start time of an event and it is mandatory to provide it for any of the valid event objects.| +| endTime | The [`endTime`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_EndTime) field defines the end time of an event and it is mandatory to provide the end time for any of the valid event objects.| +| startTimezone | It maps the [`startTimezone`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_StartTimezone) field from the dataSource and usually accepts the valid IANA timezone names. It is assumed that the value provided for this field is taken into consideration while processing the `startTime` field. When this field is not mapped with any timezone names, then the events will be processed based on the timezone assigned to the Scheduler.| +| endTimezone | It maps the [`endTimezone`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_EndTimezone) field from the dataSource and usually accepts the valid IANA timezone names. It is assumed that the value provided for this field is taken into consideration while processing the `endTime` field. When this field is not mapped with any timezone names, then the events will be processed based on the timezone assigned to the Scheduler.| +| location | It maps the [`location`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_Location) field from the dataSource and the location text value will be displayed over the events.| +| description | It maps the [`description`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_Description) field from the dataSource and denotes the event description which is optional.| +| isAllDay | The [`isAllDay`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_IsAllDay) field is mapped from the dataSource and is used to denote whether an event is created for an entire day or for specific time alone. Usually, an event with `isAllDay` field set to true will be considered as an all-day event. | +| recurrenceID | It maps the [`recurrenceID`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_RecurrenceID) field from dataSource and usually holds the ID value of the parent recurrence event. This field is applicable only for the edited occurrence events.| +| recurrenceRule | It maps the [`recurrenceRule`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_RecurrenceRule) field from dataSource and holds the recurrence rule value in a string format. Also, it uniquely identifies whether the event belongs to a recurring type or normal ones. | +| recurrenceException | It maps the [`recurrenceException`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_RecurrenceException) field from dataSource and is used to hold the collection of exception dates, on which the recurring occurrences needs to be excluded. The recurrenceException should be specified in UTC format. | +| isReadonly | It maps the [`isReadonly`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_IsReadonly) field from dataSource. It is mainly used to make specific appointments as readonly when set to `true`. | +| IsBlock | It maps the [`IsBlock`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_IsBlock) field from dataSource. It is used to block the particular time ranges in the Scheduler and prevents the event creation on those time slots. | ### Binding different field names @@ -373,7 +373,7 @@ When the fields of event instances has the default mapping name, it is not manda -N> The mapper field `id` is of string type and has no additional validation options, whereas all other fields are of `Object` type and has additional options. +N> The mapper field [`id`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_Id) is of string type and has no additional validation options, whereas all other fields are of `Object` type and has additional options. ### Event field settings @@ -444,7 +444,7 @@ Apart from the default Scheduler fields, the user can include 'n' number of cust ## Customize the order of the overlapping events -By default, the scheduler will render the overlapping events based on the start and end time. Now we can customize the order of the overlapping events based on the custom fields by using the `sortComparer` option available within the `e-schedule-eventsettings` tag helper. The following code example shows how to sort the appointments based on the custom field as follows. +By default, the scheduler will render the overlapping events based on the start and end time. Now we can customize the order of the overlapping events based on the custom fields by using the [`sortComparer`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.ScheduleEventSettings.html#Syncfusion_EJ2_Schedule_ScheduleEventSettings_SortComparer) option available within the `e-schedule-eventsettings` tag helper. The following code example shows how to sort the appointments based on the custom field as follows. {% if page.publishingplatform == "aspnet-core" %} @@ -473,7 +473,7 @@ By default, the scheduler will render the overlapping events based on the start ## Drag and drop appointments -Appointments can be rescheduled to any time by dragging and dropping them onto the desired location. To work with drag and drop functionality make sure that `allowDragAndDrop` is set to **true** on Scheduler. In mobile mode, you can drag and drop the events by tap holding an event and dropping them on to the desired location. +Appointments can be rescheduled to any time by dragging and dropping them onto the desired location. To work with drag and drop functionality make sure that [`allowDragAndDrop`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_AllowDragAndDrop) is set to **true** on Scheduler. In mobile mode, you can drag and drop the events by tap holding an event and dropping them on to the desired location. To get start quickly about drag and drop options available in our Scheduler, you can check on this video: @@ -484,7 +484,7 @@ N> By default, drag and drop action is applicable on all Scheduler views, except ### Drag and drop multiple appointments -We can drag and drop multiple appointments by enabling the `allowMultiDrag` property. We can select multiple appointments by holding the CTRL key. Once the events are selected, we can leave the CTRL key and start dragging the event. +We can drag and drop multiple appointments by enabling the [`allowMultiDrag`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_AllowMultiDrag) property. We can select multiple appointments by holding the CTRL key. Once the events are selected, we can leave the CTRL key and start dragging the event. We can also drag multiple events from one resource to another resource. In this case, if all the selected events are in the different resources, then all the events should be moved to the single resource that is related to the target event. @@ -517,7 +517,7 @@ We can also drag multiple events from one resource to another resource. In this ### Disable the drag action -By default, you can drag and drop the events within any of the applicable scheduler views, and to disable it, set **false** to the `allowDragAndDrop` property. +By default, you can drag and drop the events within any of the applicable scheduler views, and to disable it, set **false** to the [`allowDragAndDrop`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_AllowDragAndDrop) property. {% if page.publishingplatform == "aspnet-core" %} @@ -546,7 +546,7 @@ By default, you can drag and drop the events within any of the applicable schedu ### Preventing drag and drop on specific targets -It is possible to prevent the drag action on particular target, by passing the target to be excluded in the `excludeSelectors` option within `dragStart` event arguments. In this example, we have prevented the drag action on all-day row. +It is possible to prevent the drag action on particular target, by passing the target to be excluded in the `excludeSelectors` option within [`dragStart`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_DragStart) event arguments. In this example, we have prevented the drag action on all-day row. {% if page.publishingplatform == "aspnet-core" %} @@ -575,7 +575,7 @@ It is possible to prevent the drag action on particular target, by passing the t ### Disable scrolling on drag action -By default, while dragging an appointment to the edges, either top/bottom in the vertical Scheduler or left/right in the timeline Scheduler, scrolling action takes place automatically. To prevent this scrolling, set `false` to the `scroll` value within `dragStart` event arguments. +By default, while dragging an appointment to the edges, either top/bottom in the vertical Scheduler or left/right in the timeline Scheduler, scrolling action takes place automatically. To prevent this scrolling, set `false` to the `scroll` value within [`dragStart`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_DragStart) event arguments. {% if page.publishingplatform == "aspnet-core" %} @@ -604,7 +604,7 @@ By default, while dragging an appointment to the edges, either top/bottom in the ### Controlling scroll speed while dragging an event -The speed of the scrolling action while dragging an appointment to the Scheduler edges, can be controlled within `dragStart`event arguments by setting the desired value to the `scrollBy` and `timeDelay` option whereas its default value is 30 minutes and 100 ms. +The speed of the scrolling action while dragging an appointment to the Scheduler edges, can be controlled within [`dragStart`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_DragStart)event arguments by setting the desired value to the `scrollBy` and `timeDelay` option whereas its default value is 30 minutes and 100 ms. {% if page.publishingplatform == "aspnet-core" %} @@ -633,9 +633,9 @@ The speed of the scrolling action while dragging an appointment to the Scheduler ### Auto navigation of date ranges on dragging an event -When an event is dragged either to the left or right extreme edges of the Scheduler and kept hold for few seconds without dropping, the auto navigation of date ranges will be enabled allowing the Scheduler to navigate from current date range to back and forth respectively. This action is set to `false` by default and to enable it, you need to set `navigation` to true within `dragStart` event. +When an event is dragged either to the left or right extreme edges of the Scheduler and kept hold for few seconds without dropping, the auto navigation of date ranges will be enabled allowing the Scheduler to navigate from current date range to back and forth respectively. This action is set to `false` by default and to enable it, you need to set `navigation` to true within [`dragStart`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_DragStart) event. -By default, the navigation delay is set to 2000 ms. The navigation delay decides how long the user needs to drag and hold the appointments at the extremities. You can also set your own delay value for letting the users to navigate based on it, using the `timeDelay` within `dragStart`event. +By default, the navigation delay is set to 2000 ms. The navigation delay decides how long the user needs to drag and hold the appointments at the extremities. You can also set your own delay value for letting the users to navigate based on it, using the `timeDelay` within [`dragStart`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_DragStart)event. {% if page.publishingplatform == "aspnet-core" %} @@ -664,7 +664,7 @@ By default, the navigation delay is set to 2000 ms. The navigation delay decides ### Setting drag time interval -By default, while dragging an appointment, it moves at an interval of 30 minutes. To change the dragging time interval, pass the appropriate values to the `interval` option within `dragStart` event. +By default, while dragging an appointment, it moves at an interval of 30 minutes. To change the dragging time interval, pass the appropriate values to the `interval` option within [`dragStart`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_DragStart) event. {% if page.publishingplatform == "aspnet-core" %} @@ -724,7 +724,7 @@ In this example, we have used the tree view control as an external source and th ### Opening the editor window on drag stop -There are scenarios where you want to open the editor filled with data on newly dropped location and may need to proceed to save it, only when `Save` button is clicked on the editor and on clicking the cancel button should revert these changes. This can be achieved using the `dragStop` event of Scheduler. +There are scenarios where you want to open the editor filled with data on newly dropped location and may need to proceed to save it, only when `Save` button is clicked on the editor and on clicking the cancel button should revert these changes. This can be achieved using the [`dragStop`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_DragStop) event of Scheduler. {% if page.publishingplatform == "aspnet-core" %} @@ -761,7 +761,7 @@ To enable the inline edit mode, single click on any of the existing appointment The inline option can be enabled/disabled on the Scheduler by using the allowInline API, whereas its default value is set to false. -While using the `allowInline` the `showQuickInfo` will be turned off. The `quickPopup` will not show on clicking the work cell or clicking the appointment when the `allowInline` property is set to true. +While using the [`allowInline`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_AllowInline) the [`showQuickInfo`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_ShowQuickInfo) will be turned off. The `quickPopup` will not show on clicking the work cell or clicking the appointment when the [`allowInline`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_AllowInline) property is set to true. In work cells, select multiple cells using keyboard, and then press enter key. The appointment wrapper will be created, and focus will be on the subject field. Also, consider the overlapping scenarios when creating an inline event. @@ -800,11 +800,11 @@ While editing the occurrence from the recurrence series, it is only possible to ## Appointment Resizing -Another way of rescheduling an appointment can be done by resizing it through either of its handlers. To work with resizing functionality make sure that `allowResizing` property is set to **true**. +Another way of rescheduling an appointment can be done by resizing it through either of its handlers. To work with resizing functionality make sure that [`allowResizing`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_AllowResizing) property is set to **true**. ### Disable the resize action -By default, resizing of events is allowed on all Scheduler views except Agenda and Month-Agenda view. To disable this event resizing action, set false to the `allowResizing` property. +By default, resizing of events is allowed on all Scheduler views except Agenda and Month-Agenda view. To disable this event resizing action, set false to the [`allowResizing`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_AllowResizing) property. {% if page.publishingplatform == "aspnet-core" %} @@ -862,7 +862,7 @@ By default, while resizing an appointment, when its handler reaches the extreme ### Controlling scroll speed while resizing an event -The speed of the scrolling action while resizing an appointment to the Scheduler edges, can be controlled within the `resizeStart` event by setting the desired value to the `scrollBy` option. +The speed of the scrolling action while resizing an appointment to the Scheduler edges, can be controlled within the [`resizeStart`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_ResizeStart) event by setting the desired value to the `scrollBy` option. {% if page.publishingplatform == "aspnet-core" %} @@ -891,7 +891,7 @@ The speed of the scrolling action while resizing an appointment to the Scheduler ### Setting resize time interval -By default, while resizing an appointment, it extends or shrinks at an interval of 30 minutes. To change this default resize interval, set appropriate values to `interval` option within the `resizeStart`. +By default, while resizing an appointment, it extends or shrinks at an interval of 30 minutes. To change this default resize interval, set appropriate values to `interval` option within the [`resizeStart`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_ResizeStart). {% if page.publishingplatform == "aspnet-core" %} @@ -930,6 +930,11 @@ The look and feel of the Scheduler events can be customized using any one of the Any kind of text, images and links can be added to customize the look of the events. The user can format and change the default appearance of the events by making use of the `template` option available within the `e-schedule-eventsettings` tag helper. The following code example customizes the appointment's default color and time format. +Learn how easily you can customize the basic look and feel of ASP.NET Core Scheduler appointments using template from this video: + +{% youtube +"youtube:https://www.youtube.com/watch?v=Op8cW9-8GIc"%} + {% if page.publishingplatform == "aspnet-core" %} {% tabs %} @@ -960,7 +965,7 @@ N> All the built-in fields that are mapped to the appropriate field properties w ### Using eventRendered event -The `eventRendered` event triggers before the appointment renders on the Scheduler. Therefore, this client-side event can be utilized to customize the look of events based on any specific criteria, before rendering them on the scheduler. +The [`eventRendered`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_EventRendered) event triggers before the appointment renders on the Scheduler. Therefore, this client-side event can be utilized to customize the look of events based on any specific criteria, before rendering them on the scheduler. {% if page.publishingplatform == "aspnet-core" %} @@ -990,7 +995,7 @@ The `eventRendered` event triggers before the appointment renders on the Schedul ### Using cssClass -The customization of events can also be achieved using `cssClass` property of the Scheduler. In the following example, the background of appointments has been changed using the cssClass. +The customization of events can also be achieved using [`cssClass`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_CssClass) property of the Scheduler. In the following example, the background of appointments has been changed using the cssClass. {% if page.publishingplatform == "aspnet-core" %} @@ -1020,7 +1025,7 @@ The customization of events can also be achieved using `cssClass` property of th ## Setting minimum height -It is possible to set minimal height for appointments on Scheduler using `eventRendered` event, when its start and end time duration is less than the default duration of a single slot. +It is possible to set minimal height for appointments on Scheduler using [`eventRendered`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_EventRendered) event, when its start and end time duration is less than the default duration of a single slot. {% if page.publishingplatform == "aspnet-core" %} @@ -1049,7 +1054,7 @@ It is possible to set minimal height for appointments on Scheduler using `eventR ## Block Dates and Times -It is possible to block a set of dates or a particular time ranges on the Scheduler. To do so, define an appointment object within `e-schedule-eventsettings` along with the required time range to block and set the `isBlock` field to **true**. Usually, the event objects defined with `isBlock` field set to true will block the entire time cells lying within the appropriate time ranges specified through `startTime` and `endTime` fields. +It is possible to block a set of dates or a particular time ranges on the Scheduler. To do so, define an appointment object within [`e-schedule-eventsettings`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_EventSettings) along with the required time range to block and set the [`isBlock`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_IsBlock) field to **true**. Usually, the event objects defined with [`isBlock`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_IsBlock) field set to true will block the entire time cells lying within the appropriate time ranges specified through [`startTime`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_StartTime) and [`endTime`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_EndTime) fields. {% if page.publishingplatform == "aspnet-core" %} @@ -1107,7 +1112,7 @@ Block events can also be defined to repeat on several days as shown in the follo ## Readonly -An interaction with the appointments of Scheduler can be enabled/disabled using the `readonly` property. With this property enabled, you can simply navigate between the Scheduler dates, views and can be able to view the appointment details in the quick info window. Most importantly, the users are not allowed to perform any CRUD actions on Scheduler, when this property is set to true. By default, it is set as **false**. +An interaction with the appointments of Scheduler can be enabled/disabled using the [`readonly`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_Readonly) property. With this property enabled, you can simply navigate between the Scheduler dates, views and can be able to view the appointment details in the quick info window. Most importantly, the users are not allowed to perform any CRUD actions on Scheduler, when this property is set to true. By default, it is set as **false**. {% if page.publishingplatform == "aspnet-core" %} @@ -1136,7 +1141,7 @@ An interaction with the appointments of Scheduler can be enabled/disabled using ## Make specific events readonly -There are scenarios where you need to restrict the CRUD action on specific appointments alone based on certain conditions. In the following example, the events that has occurred on the past hours from the current date of the Scheduler are made as read-only and the CRUD actions has been prevented only on those appointments. This can be achieved by setting `IsReadonly` field of read-only events to `true`. +There are scenarios where you need to restrict the CRUD action on specific appointments alone based on certain conditions. In the following example, the events that has occurred on the past hours from the current date of the Scheduler are made as read-only and the CRUD actions has been prevented only on those appointments. This can be achieved by setting [`IsReadonly`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_IsReadonly) field of read-only events to `true`. {% if page.publishingplatform == "aspnet-core" %} @@ -1163,7 +1168,7 @@ There are scenarios where you need to restrict the CRUD action on specific appoi -N> By default, the event editor is prevented to open on the read-only events when `IsReadonly` field is set to **true**. +N> By default, the event editor is prevented to open on the read-only events when [`IsReadonly`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_IsReadonly) field is set to **true**. ## Restricting event creation on specific time slots @@ -1196,7 +1201,7 @@ You can restrict the users to create and update more than one appointment on spe ## Differentiate the past time events -To differentiate the appearance of the appointments based on specific criteria such as displaying the past hour appointments with different colors on Scheduler, `eventRendered` event can be used which triggers before the appointment renders on the Scheduler. +To differentiate the appearance of the appointments based on specific criteria such as displaying the past hour appointments with different colors on Scheduler,[`eventRendered`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_EventRendered) event can be used which triggers before the appointment renders on the Scheduler. {% if page.publishingplatform == "aspnet-core" %} @@ -1225,9 +1230,9 @@ To differentiate the appearance of the appointments based on specific criteria s ## Appointments occupying entire cell -The Scheduler allows the event to occupies the full height of the cell without its header part by setting `true` for `enableMaxHeight` Property. +The Scheduler allows the event to occupies the full height of the cell without its header part by setting `true` for [`enableMaxHeight`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.ScheduleEventSettings.html#Syncfusion_EJ2_Schedule_ScheduleEventSettings_EnableMaxHeight) Property. -We can show more indicator if more than one appointment is available in a same cell by setting `true` to `enableIndicator` property whereas its default value is false. +We can show more indicator if more than one appointment is available in a same cell by setting `true` to [`enableIndicator`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.ScheduleEventSettings.html#Syncfusion_EJ2_Schedule_ScheduleEventSettings_EnableIndicator) property whereas its default value is `false`. {% if page.publishingplatform == "aspnet-core" %} @@ -1261,7 +1266,7 @@ The tooltip shows the Scheduler appointment's information in a formatted style b ### Show or hide built-in tooltip -The tooltip can be displayed for appointments by setting `true` to the `enableTooltip` option within the `e-schedule-eventsettings` tag helper. +The tooltip can be displayed for appointments by setting `true` to the [`enableTooltip`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.ScheduleEventSettings.html#Syncfusion_EJ2_Schedule_ScheduleEventSettings_EnableTooltip) option within the `e-schedule-eventsettings` tag helper. {% if page.publishingplatform == "aspnet-core" %} @@ -1291,7 +1296,7 @@ The tooltip can be displayed for appointments by setting `true` to the `enableTo ### Customizing event tooltip using template -After enabling the default tooltip, it is possible to customize the display of needed event information on tooltip by making use of the `tooltipTemplate` option within the `e-schedule-eventsettings`. +After enabling the default tooltip, it is possible to customize the display of needed event information on tooltip by making use of the [`tooltipTemplate`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.ScheduleEventSettings.html#Syncfusion_EJ2_Schedule_ScheduleEventSettings_TooltipTemplate) option within the [`e-schedule-eventsettings`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_EventSettings). {% if page.publishingplatform == "aspnet-core" %} @@ -1319,7 +1324,7 @@ After enabling the default tooltip, it is possible to customize the display of n ![Display Customizing Event Tooltip Using Template in ASP.NET Core Scheduler](images/scheduler-custom-event-tooltip.png) -N> All the field names that are mapped from the Scheduler dataSource to the appropriate field properties such as subject, description, location, startTime and endTime within the `e-schedule-eventsettings` can be accessed within the template. +N> All the field names that are mapped from the Scheduler dataSource to the appropriate field properties such as subject, description, location, startTime and endTime within the [`e-schedule-eventsettings`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_EventSettings) can be accessed within the template. ## Appointment selection @@ -1367,7 +1372,7 @@ In the following example, the subject of the appointment clicked has been displa ## Get the current view appointments -To retrieve the appointments present in the current view of the Scheduler, you can make use of the `getCurrentViewEvents` public method. In the following example, the count of current view appointment collection rendered has been traced in `dataBound` event. +To retrieve the appointments present in the current view of the Scheduler, you can make use of the `getCurrentViewEvents` public method. In the following example, the count of current view appointment collection rendered has been traced in [`dataBound`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_DataBound) event. {% if page.publishingplatform == "aspnet-core" %} @@ -1396,7 +1401,7 @@ To retrieve the appointments present in the current view of the Scheduler, you c ## Get the entire appointment collections -The entire collection of appointments rendered on the Scheduler can be accessed using the `getEvents` public method. In the following example, the count of entire appointment collection rendered on the Scheduler has been traced in `dataBound` event. +The entire collection of appointments rendered on the Scheduler can be accessed using the `getEvents` public method. In the following example, the count of entire appointment collection rendered on the Scheduler has been traced in [`dataBound`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_DataBound) event. {% if page.publishingplatform == "aspnet-core" %} diff --git a/ej2-asp-core-mvc/schedule/EJ2_ASP.NETCORE/cell-customization.md b/ej2-asp-core-mvc/schedule/EJ2_ASP.NETCORE/cell-customization.md index 4e8c4a7c40..e1bc1fa0cd 100644 --- a/ej2-asp-core-mvc/schedule/EJ2_ASP.NETCORE/cell-customization.md +++ b/ej2-asp-core-mvc/schedule/EJ2_ASP.NETCORE/cell-customization.md @@ -1,6 +1,6 @@ --- layout: post -title: Cell Customization in ##Platform_Name## Schedule Component +title: Cell Customization in ##Platform_Name## Schedule Component| Syncfusion description: Learn here all about Cell Customization in Syncfusion ##Platform_Name## Schedule component of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Cell Customization @@ -9,13 +9,13 @@ documentation: ug --- -# Cell Customization +# Cell Customization in ##Platform_Name## Schedule Component -The cells of the Scheduler can be easily customized either using the cell template or `renderCell` event. +The cells of the Scheduler can be easily customized either using the cell template or [`renderCell`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_RenderCell) event. ## Setting cell dimensions in all views -The height and width of the Scheduler cells can be customized either to increase or reduce its size through the `cssClass` property, which overrides the default CSS applied on cells. +The height and width of the Scheduler cells can be customized either to increase or reduce its size through the[`cssClass`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_CssClass) property, which overrides the default CSS applied on cells. {% if page.publishingplatform == "aspnet-core" %} @@ -74,11 +74,11 @@ You can check whether the given time range slots are available for event creatio ## Customizing cells in all the views -It is possible to customize the appearance of the cells using both template options and `renderCell` event on all the views. +It is possible to customize the appearance of the cells using both template options and [`renderCell`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_RenderCell) event on all the views. ### Using template -The `cellTemplate` option accepts the template string and is used to customize the cell background with specific images or appropriate text on the given date values. +The [`cellTemplate`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_CellTemplate) option accepts the template string and is used to customize the cell background with specific images or appropriate text on the given date values. {% if page.publishingplatform == "aspnet-core" %} @@ -108,7 +108,7 @@ The `cellTemplate` option accepts the template string and is used to customize t ### Using renderCell event -An alternative to `cellTemplate` is the `renderCell` event, which can also be used to customize the cells with appropriate images or formatted text values. +An alternative to [`cellTemplate`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_CellTemplate) is the [`renderCell`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_RenderCell) event, which can also be used to customize the cells with appropriate images or formatted text values. {% if page.publishingplatform == "aspnet-core" %} @@ -136,7 +136,7 @@ An alternative to `cellTemplate` is the `renderCell` event, which can also be us ![Display Customizing Cells with Rendercell in ASP.NET Core Scheduler](images/scheduler-custom-cell-rendercell.png) -You can customize cells such as work cells, month cells, all-day cells, header cells, resource header cells using `renderCell` event by checking the `elementType` option within the event. You can check `elementType` with any of the following. +You can customize cells such as work cells, month cells, all-day cells, header cells, resource header cells using [`renderCell`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_RenderCell) event by checking the `elementType` option within the event. You can check `elementType` with any of the following. | Element type | Description | |-------|---------| @@ -154,7 +154,8 @@ You can customize cells such as work cells, month cells, all-day cells, header c ## Customizing cell header in month view -The month header of each date cell in the month view can be customized using the `cellHeaderTemplate` option which accepts the string or HTMLElement. The corresponding date can be accessed with the template. +The month header of each date cell in the month view can be customized using the The month header of each date cell in the month view can be customized using the [`cellHeaderTemplate`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_CellHeaderTemplate) option which accepts the string or HTMLElement. The corresponding date can be accessed with the template. + option which accepts the string or HTMLElement. The corresponding date can be accessed with the template. {% if page.publishingplatform == "aspnet-core" %} @@ -181,7 +182,7 @@ The month header of each date cell in the month view can be customized using the ## Customizing the minimum and maximum date values -Providing the `minDate` and `maxDate` property with some date values, allows the Scheduler to set the minimum and maximum date range. The Scheduler date that lies beyond this minimum and maximum date range will be in a disabled state so that the date navigation will be blocked beyond the specified date range. +Providing the [`minDate`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_MinDate) and [`maxDate`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_MaxDate) property with some date values, allows the Scheduler to set the minimum and maximum date range. The Scheduler date that lies beyond this minimum and maximum date range will be in a disabled state so that the date navigation will be blocked beyond the specified date range. {% if page.publishingplatform == "aspnet-core" %} @@ -208,11 +209,11 @@ Providing the `minDate` and `maxDate` property with some date values, allows the -N>By default, the `minDate` property value is set to new Date(1900, 0, 1) and `maxDate` property value is set to new Date(2099, 11, 31). The user can also set the customized `minDate` and `maxDate` property values. +N>By default, the [`minDate`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_MinDate) property value is set to new Date(1900, 0, 1) and [`maxDate`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_MaxDate) property value is set to new Date(2099, 11, 31). The user can also set the customized [`minDate`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_MinDate) and [`maxDate`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_MaxDate) property values. ## Customizing the weekend cells background color -You can customize the background color of weekend cells by utilizing the [`RenderCell`](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.schedule.schedule.html#Syncfusion_EJ2_Schedule_Schedule_RenderCell) event and checking the `elementType` option within the event. +You can customize the background color of weekend cells by utilizing the [`renderCell`](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.schedule.schedule.html#Syncfusion_EJ2_Schedule_Schedule_RenderCell) event and checking the `elementType` option within the event. ```javascript @@ -267,6 +268,6 @@ And, the background color for weekend cells in the Month view through the [`cssC ## How to disable multiple cell and row selection in Schedule -By default, the `allowMultiCellSelection` and `allowMultiRowSelection` properties of the Schedule are set to `true`. So, the Schedule allows user to select multiple cells and rows. If the user want to disable this multiple cell and row selection. The user can disable this feature by setting up `false` to these properties. +By default, the [`allowMultiCellSelection`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_AllowMultiCellSelection) and [`allowMultiRowSelection`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_AllowMultiRowSelection) properties of the Schedule are set to `true`. So, the Schedule allows user to select multiple cells and rows. If the user want to disable this multiple cell and row selection. The user can disable this feature by setting up `false` to these properties. N> You can refer to our [ASP.NET Core Scheduler](https://www.syncfusion.com/aspnet-core-ui-controls/scheduler) feature tour page for its groundbreaking feature representations. You can also explore our [ASP.NET Core Scheduler example](https://ej2.syncfusion.com/aspnetcore/Schedule/Overview#/material) to knows how to present and manipulate data. diff --git a/ej2-asp-core-mvc/schedule/EJ2_ASP.NETCORE/context-menu.md b/ej2-asp-core-mvc/schedule/EJ2_ASP.NETCORE/context-menu.md index 92d1392269..6539836f0a 100644 --- a/ej2-asp-core-mvc/schedule/EJ2_ASP.NETCORE/context-menu.md +++ b/ej2-asp-core-mvc/schedule/EJ2_ASP.NETCORE/context-menu.md @@ -1,6 +1,6 @@ --- layout: post -title: Context Menu in ##Platform_Name## Schedule Component +title: Context Menu in ##Platform_Name## Schedule Component| Syncfusion description: Learn here all about Context Menu in Syncfusion ##Platform_Name## Schedule component of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Context Menu @@ -9,13 +9,13 @@ documentation: ug --- -# Context menu +# Context menu in ##Platform_Name## Schedule Component -You can display context menu on work cells and appointments of Scheduler by making use of the `ContextMenu` control manually from the application end. In the following code example, context menu control is being added from sample end and set its target as `Scheduler`. +You can display context menu on work cells and appointments of Scheduler by making use of the [`ContextMenu`](https://ej2.syncfusion.com/aspnetcore/documentation/context-menu/getting-started) control manually from the application end. In the following code example, context menu control is being added from sample end and set its target as `Scheduler`. On Scheduler cells, you can display the menu items such as `New Event`, `New Recurring Event` and `Today` option. For appointments, you can display its related options such as `Edit Event` and `Delete Event`. The default event window can be opened for appointment creation and editing using the `openEditor` method of Scheduler. -The deletion of appointments can be done by using the `deleteEvent` public method. Also, the `selectedDate` property can be used to navigate between different dates. +The deletion of appointments can be done by using the `deleteEvent` public method. Also, the [`selectedDate`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_SelectedDate) property can be used to navigate between different dates. N> You can also display custom menu options on Scheduler cells and appointments. Context menu will open on tap-hold in responsive mode. diff --git a/ej2-asp-core-mvc/schedule/EJ2_ASP.NETCORE/crud-actions.md b/ej2-asp-core-mvc/schedule/EJ2_ASP.NETCORE/crud-actions.md index 235772084c..ecca3eced8 100644 --- a/ej2-asp-core-mvc/schedule/EJ2_ASP.NETCORE/crud-actions.md +++ b/ej2-asp-core-mvc/schedule/EJ2_ASP.NETCORE/crud-actions.md @@ -1,6 +1,6 @@ --- layout: post -title: Crud Actions in ##Platform_Name## Schedule Component +title: Crud Actions in ##Platform_Name## Schedule Component| Syncfusion description: Learn here all about Crud Actions in Syncfusion ##Platform_Name## Schedule component of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Crud Actions @@ -9,7 +9,7 @@ documentation: ug --- -# CRUD Actions +# CRUD Actions in ##Platform_Name## Schedule Component Events, a.k.a. Appointments, play an important role in Scheduler with which the users mostly interact. You can easily manipulate (add/edit/delete) the desired appointments as and when required either using the editor window or through the drag and resize action. @@ -119,7 +119,7 @@ Additionally, the regex condition has been added to the Location field, so that -You can also dynamically prevent the creation of appointments on Scheduler. For example, say if you want to decline the creation of appointments on weekend days, you can check for its appropriate condition within the `actionBegin` event. +You can also dynamically prevent the creation of appointments on Scheduler. For example, say if you want to decline the creation of appointments on weekend days, you can check for its appropriate condition within the [`actionBegin`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_ActionBegin) event. {% if page.publishingplatform == "aspnet-core" %} @@ -190,11 +190,11 @@ The appointments can be edited and updated manually using the `saveEvent` method -**Recurring event** - The following code example shows how to edit a single occurrence of a recurring event. In this case, the modified data should hold an additional field namely `recurrenceID` mapping to its parent recurring event's Id value. Also, this modified occurrence will be considered as a new event in the Scheduler dataSource, where it is linked with its parent event through the `recurrenceID` field value. The `saveEvent` method takes 2 arguments, first one accepting the modified event data object and second argument accepting either of the 2 text values - `EditOccurrence` or `EditSeries`. +**Recurring event** - The following code example shows how to edit a single occurrence of a recurring event. In this case, the modified data should hold an additional field namely [`recurrenceID`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_RecurrenceID) mapping to its parent recurring event's Id value. Also, this modified occurrence will be considered as a new event in the Scheduler dataSource, where it is linked with its parent event through the [`recurrenceID`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_RecurrenceID) field value. The `saveEvent` method takes 2 arguments, first one accepting the modified event data object and second argument accepting either of the 2 text values - `EditOccurrence` or `EditSeries`. When the second argument is passed as `EditOccurrence`, which means that the passed event data is a single modified occurrence - whereas if the second argument is passed as `EditSeries`, it means that the modified data needs to be edited as a whole series and therefore no new event object will be maintained in the Scheduler dataSource. -In case of modifying the single occurrence, it is also necessary to update the `recurrenceException` field of parent event altogether with the occurrence editing. To know more about how to set `recurrenceException` values, refer the [recurring events](./appointments/#adding-exceptions) topic. +In case of modifying the single occurrence, it is also necessary to update the [`recurrenceException`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_RecurrenceException) field of parent event altogether with the occurrence editing. To know more about how to set [`recurrenceException`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_RecurrenceException) values, refer the [recurring events](./appointments/#adding-exceptions) topic. {% if page.publishingplatform == "aspnet-core" %} @@ -260,9 +260,9 @@ The recurring appointments can be edited in either of the following two ways. **Editing single occurrence** - When you double click on a recurring event, a popup prompts you to choose either to edit the single event or entire series. From this, if you choose to select **EDIT EVENT** option, a single occurrence of the recurring appointment alone will be edited. The following process takes place while editing a single occurrence, -* A new event will be created from the parent event data and added to the Scheduler dataSource, with all its default field values overwritten with the newly modified data and additionally, the `recurrenceID` field will be added to it, that holds the `id` value of the parent recurring event. Also, a new `Id` will be generated for this event in the dataSource. +* A new event will be created from the parent event data and added to the Scheduler dataSource, with all its default field values overwritten with the newly modified data and additionally, the [`recurrenceID`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_RecurrenceID) field will be added to it, that holds the `id` value of the parent recurring event. Also, a new `Id` will be generated for this event in the dataSource. -* The parent recurring event needs to be updated with appropriate `recurrenceException` field to hold the edited occurrence appointment's date collection. +* The parent recurring event needs to be updated with appropriate [`recurrenceException`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_RecurrenceException) field to hold the edited occurrence appointment's date collection. Therefore, when a single occurrence is edited from a recurring event, the batch action takes place by allowing both the `Add` and `Edit` action requests to take place together. @@ -368,9 +368,9 @@ The recurring appointments can be edited from current and following events when **Editing Following Events** - When you double click on a recurring event, a popup prompts you to choose either to edit the single event or Edit Following Events or entire series. From this, if you choose to select **EDIT FOLLOWING EVENTS** option, a current and following events of the recurring appointment will be edited. The following process takes place while editing a following events, -* A new event will be created from the parent event data and added to the Scheduler dataSource, with all its default field values overwritten with the newly modified data and additionally, the `followingID` field will be added to it, that holds the `id` value of the immediate parent recurring event. Also, a new `Id` will be generated for this event in the dataSource. +* A new event will be created from the parent event data and added to the Scheduler dataSource, with all its default field values overwritten with the newly modified data and additionally, the [`followingID`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_FollowingID) field will be added to it, that holds the `id` value of the immediate parent recurring event. Also, a new [`Id`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_Id) will be generated for this event in the dataSource. -* The parent recurring event needs to be updated with appropriate `recurrenceRule` field to hold the modified occurrence appointment's end date. +* The parent recurring event needs to be updated with appropriate [`recurrenceRule`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_RecurrenceRule) field to hold the modified occurrence appointment's end date. Therefore, when a following events are edited from a recurring event, the batch action takes place by allowing the `Add`, `Edit` and `Delete` action requests to take place together. @@ -442,7 +442,7 @@ if (param.action == "remove" || (param.action == "batch" && param.deleted != nul ### Restricting edit action based on specific criteria -You can also dynamically prevent the editing of appointments on Scheduler. For example, say if you want to decline the updating of appointments on non-working hours, you can check for its appropriate condition within the `actionBegin` event. +You can also dynamically prevent the editing of appointments on Scheduler. For example, say if you want to decline the updating of appointments on non-working hours, you can check for its appropriate condition within the [`actionBegin`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_ActionBegin) event. {% if page.publishingplatform == "aspnet-core" %} @@ -579,7 +579,7 @@ The recurring events can be deleted in either of the following two ways. **Single occurrence** - When you attempt to delete the recurring events, a popup prompts you to choose either to delete the single event or entire series. From this, if you choose to select **DELETE EVENT** option, a single occurrence of the recurring appointment alone will be removed. The following process takes place while removing a single occurrence, * The selected occurrence will be deleted from the Scheduler user interface. -* In code, the parent recurring event object will be updated with appropriate `recurrenceException` field, to hold the deleted occurrence appointment's date collection. +* In code, the parent recurring event object will be updated with appropriate [`recurrenceException`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_RecurrenceException) field, to hold the deleted occurrence appointment's date collection. Therefore, when a single occurrence is deleted from a recurring event, the `update` action takes place on the parent recurring event as shown in the following code example. @@ -639,7 +639,7 @@ The recurring events can be deleted from current and following events only when **Delete Following Events** - When you attempt to delete the recurring events, a popup prompts you to choose either to delete the single event or Following Events or entire series. From this, if you choose to select **FOLLOWING EVENT** option, a current and following events of the recurring appointment alone will be removed. The following process takes place while removing a single occurrence, * The selected occurrence and the following events in same series will be deleted from the Scheduler user interface. -* In code, the parent recurring event object will be updated with appropriate `recurrenceRule` field, to update the end date of the recurring events. +* In code, the parent recurring event object will be updated with appropriate [`recurrenceRule`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_RecurrenceRule) field, to update the end date of the recurring events. Therefore, when following events are deleted from a recurring event, the `remove` and `update` action takes place on the immediate parent recurring event as shown in the following code example. diff --git a/ej2-asp-core-mvc/schedule/EJ2_ASP.NETCORE/data-binding.md b/ej2-asp-core-mvc/schedule/EJ2_ASP.NETCORE/data-binding.md index b4a6ac85cd..080381dfbb 100644 --- a/ej2-asp-core-mvc/schedule/EJ2_ASP.NETCORE/data-binding.md +++ b/ej2-asp-core-mvc/schedule/EJ2_ASP.NETCORE/data-binding.md @@ -1,6 +1,6 @@ --- layout: post -title: Data Binding in ##Platform_Name## Schedule Component +title: Data Binding in ##Platform_Name## Schedule Component| Syncfusion description: Learn here all about Data Binding in Syncfusion ##Platform_Name## Schedule component of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Data Binding @@ -9,7 +9,7 @@ documentation: ug --- -# Data-binding +# Data-binding in ##Platform_Name## Schedule Component The Scheduler uses `dataManager`, which supports both RESTful JSON data services binding and local JavaScript object array binding. The [`dataSource`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.Schedule.ScheduleEventSettings~DataSource.html) property can be assigned either with the instance of `dataManager` or JavaScript object array collection. It supports two kinds of data binding method: @@ -47,7 +47,7 @@ To bind local JSON data to the Scheduler, you can simply assign a JavaScript obj N> By default, `dataManager` uses `JsonAdaptor` for local data-binding. -You can also bind different field names to the default event fields as well as include additional custom fields to the event object collection which can be referred [here](./appointments/#binding-different-field-names). +> You can also bind different field names to the default event fields as well as include additional `custom fields` to the event object collection which can be referred [here](./appointments/#binding-different-field-names). ## Binding remote data @@ -144,7 +144,7 @@ It is possible to create your own custom adaptor by extending the built-in avail ## Loading data via AJAX post -You can bind the event data through external ajax request and assign it to the `dataSource` property of Scheduler. In the following code example, we have retrieved the data from server with the help of ajax request and assigned the resultant data to the `dataSource` property of Scheduler within the `onSuccess` event of Ajax. +You can bind the event data through external ajax request and assign it to the [`dataSource`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.Schedule.ScheduleEventSettings~DataSource.html) property of Scheduler. In the following code example, we have retrieved the data from server with the help of ajax request and assigned the resultant data to the [`dataSource`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.Schedule.ScheduleEventSettings~DataSource.html) property of Scheduler within the `onSuccess` event of Ajax. {% if page.publishingplatform == "aspnet-core" %} @@ -233,7 +233,7 @@ During the time of Scheduler interacting with server, there are chances that som -The argument passed to the `actionFailure` event contains the error details returned from the server. +The argument passed to the [`actionFailure`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.Schedule.Schedule~ActionFailure.html) event contains the error details returned from the server. ## Scheduler CRUD actions @@ -366,7 +366,7 @@ N> You can find the working sample [here](https://github.com/SyncfusionExamples/ ## Configuring Scheduler with Google API service -We have assigned our custom created Google Calendar url to the DataManager and assigned the same to the Scheduler `dataSource`. Since the events data retrieved from the Google Calendar will be in its own object format, therefore it needs to be resolved manually within the Scheduler’s `dataBinding` event. Within this event, the event fields needs to be mapped properly and then assigned to the result. +We have assigned our custom created Google Calendar url to the DataManager and assigned the same to the Scheduler [`dataSource`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.Schedule.ScheduleEventSettings~DataSource.html). Since the events data retrieved from the Google Calendar will be in its own object format, therefore it needs to be resolved manually within the Scheduler’s [`dataBinding`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_DataBinding) event. Within this event, the event fields needs to be mapped properly and then assigned to the result. {% if page.publishingplatform == "aspnet-core" %} diff --git a/ej2-asp-core-mvc/schedule/EJ2_ASP.NETCORE/editor-template.md b/ej2-asp-core-mvc/schedule/EJ2_ASP.NETCORE/editor-template.md index e959af7899..5adfec215b 100644 --- a/ej2-asp-core-mvc/schedule/EJ2_ASP.NETCORE/editor-template.md +++ b/ej2-asp-core-mvc/schedule/EJ2_ASP.NETCORE/editor-template.md @@ -19,7 +19,7 @@ The editor window usually opens on the Scheduler, when a cell or event is double In mobile devices, you can open the detailed editor window in edit mode by clicking the edit icon on the popup, that opens on single tapping an event. You can also open it in add mode by single tapping a cell, which will display a `+` indication, clicking on it again will open the editor window. -N> You can also prevent the editor window from opening, by rendering Scheduler in a `readonly` mode or by doing code customization within the `popupOpen` event. +N> You can also prevent the editor window from opening, by rendering Scheduler in a [`readonly`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_Readonly) mode or by doing code customization within the [`popupOpen`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_PopupOpen) event. ### How to change the editor window header title and text of footer buttons @@ -53,7 +53,7 @@ You can change the header title and the text of buttons displayed at the footer ### How to change the label text of default editor fields -To change the default labels such as Subject, Location and other field names in the editor window, make use of the `title` property available within the field option of `e-schedule-eventsettings`. +To change the default labels such as Subject, Location and other field names in the editor window, make use of the `title` property available within the field option of [`e-schedule-eventsettings`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_EventSettings). {% if page.publishingplatform == "aspnet-core" %} @@ -115,7 +115,7 @@ N> Applicable validation rules can be referred from [form validation](http://ej2 ### Add additional fields to the default editor -The additional fields can be added to the default event editor by making use of the `popupOpen` event which gets triggered before the event editor opens on the Scheduler. The `popupOpen` is a client-side event that triggers before any of the generic popups opens on the Scheduler. The additional field (any of the form elements) should be added with a common class name `e-field`, so as to handle and process those additional data along with the default event object. In the following example, an additional field `Event Type` has been added to the default event editor and its value is processed accordingly. +The additional fields can be added to the default event editor by making use of the [`popupOpen`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_PopupOpen) event which gets triggered before the event editor opens on the Scheduler. The [`popupOpen`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_PopupOpen) is a client-side event that triggers before any of the generic popups opens on the Scheduler. The additional field (any of the form elements) should be added with a common class name `e-field`, so as to handle and process those additional data along with the default event object. In the following example, an additional field `Event Type` has been added to the default event editor and its value is processed accordingly. {% if page.publishingplatform == "aspnet-core" %} @@ -145,7 +145,7 @@ The additional fields can be added to the default event editor by making use of ### Customizing the default time duration in editor window -In default event editor window, start and end time duration are processed based on the `interval` value set within the `timeScale` property. By default, `interval` value is set to 30, and therefore the start/end time duration within the event editor will be in a 30 minutes time difference. You can change this duration value by changing the `duration` option within the `popupOpen` event as shown in the following code example. +In default event editor window, start and end time duration are processed based on the `interval` value set within the [`timeScale`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_TimeScale) property. By default, `interval` value is set to 30, and therefore the start/end time duration within the event editor will be in a 30 minutes time difference. You can change this duration value by changing the `duration` option within the [`popupOpen`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_PopupOpen) event as shown in the following code example. {% if page.publishingplatform == "aspnet-core" %} @@ -175,7 +175,7 @@ In default event editor window, start and end time duration are processed based ### How to prevent the display of editor and quick popups -It is possible to prevent the display of editor and quick popup windows by passing the value `true` to `cancel` option within the `popupOpen` event. +It is possible to prevent the display of editor and quick popup windows by passing the value `true` to `cancel` option within the [`popupOpen`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_PopupOpen) event. {% if page.publishingplatform == "aspnet-core" %} @@ -202,7 +202,7 @@ It is possible to prevent the display of editor and quick popup windows by passi -In case, if you need to prevent only specific popups on Scheduler, then you can check the condition based on the popup type. The types of the popup that can be checked within the `popupOpen` event are as follows. +In case, if you need to prevent only specific popups on Scheduler, then you can check the condition based on the popup type. The types of the popup that can be checked within the [`popupOpen`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_PopupOpen) event are as follows. | Type | Description | |------|-------------| @@ -216,7 +216,7 @@ In case, if you need to prevent only specific popups on Scheduler, then you can The quick info popups are the ones that gets opened, when a cell or appointment is single clicked on the desktop mode. On single clicking a cell, you can simply provide a subject and save it. Also, while single clicking on an event, a popup will be displayed where you can get the overview of the event information. You can also edit or delete those events through the options available in it. -By default, these popups are displayed over cells and appointments of Scheduler and to disable this action, set `false` to `showQuickInfo` property. +By default, these popups are displayed over cells and appointments of Scheduler and to disable this action, set `false` to [`showQuickInfo`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_ShowQuickInfo) property. {% if page.publishingplatform == "aspnet-core" %} @@ -247,7 +247,7 @@ N> The quick popup that opens while single clicking on the cells are not applica ### How to open Quick Info popup on multiple cell selection -By default the `QuickInfo` popup will open on single click of the cell. To open the quick info popup on multiple cell selection, you need to select the cells and press `enter` key. You can open this popup immediately after multiple cell selection by setting up `true` to `quickInfoOnSelectionEnd` property where as its default value is `false`. +By default the `QuickInfo` popup will open on single click of the cell. To open the quick info popup on multiple cell selection, you need to select the cells and press `enter` key. You can open this popup immediately after multiple cell selection by setting up `true` to [`quickInfoOnSelectionEnd`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_QuickInfoOnSelectionEnd) property where as its default value is `false`. {% if page.publishingplatform == "aspnet-core" %} @@ -293,7 +293,7 @@ L10n.load({ ### Customizing quick popups -The look and feel of the built-in quick popup window, which opens when single clicked on the cells or appointments can be customized by making use of the `quickInfoTemplates` property of the Scheduler. There are 3 sub-options available to customize them easily, +The look and feel of the built-in quick popup window, which opens when single clicked on the cells or appointments can be customized by making use of the [`quickInfoTemplates`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_QuickInfoTemplates) property of the Scheduler. There are 3 sub-options available to customize them easily, * header - Accepts the template design that customizes the header part of the quick popup. * content - Accepts the template design that customizes the content part of the quick popup. @@ -325,11 +325,11 @@ The look and feel of the built-in quick popup window, which opens when single cl ![Display Customizing Quick Popups in ASP.NET Core Scheduler](images/schedule-custom-quick-popup.png) -N> The quick popup in adaptive mode can also be customized using `quickInfoTemplates` using `e-device` class. +N> The quick popup in adaptive mode can also be customized using [`quickInfoTemplates`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_QuickInfoTemplates) using `e-device` class. ### Customizing timezone collection in the editor window -By default, the timezone collections in the editor window have been loaded with built-in timezone collections. Now we can be able to customize the timezone collections using the `timezoneDataSource` property with the collection of `TimezoneFields` data. +By default, the timezone collections in the editor window have been loaded with built-in timezone collections. Now we can be able to customize the timezone collections using the [`timezoneDataSource`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_TimezoneDataSource) property with the collection of `TimezoneFields` data. {% if page.publishingplatform == "aspnet-core" %} @@ -359,13 +359,13 @@ By default, the timezone collections in the editor window have been loaded with ## Customizing event editor using template -The event editor window can be customized by making use of the `editorTemplate` option. Here, the custom window design is built with the required fields using the script template and its type should be of **text/x-template**. +The event editor window can be customized by making use of the [`editorTemplate`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_EditorTemplate) option. Here, the custom window design is built with the required fields using the script template and its type should be of **text/x-template**. -Each field defined within template should contain the **e-field** class, so as to allow the processing of those field values internally. The ID of this customized script template section is assigned to the `editorTemplate` option, so that these customized fields will be replaced onto the default editor window. +Each field defined within template should contain the **e-field** class, so as to allow the processing of those field values internally. The ID of this customized script template section is assigned to the [`editorTemplate`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_EditorTemplate) option, so that these customized fields will be replaced onto the default editor window. >Note: **e-field** class only applicable for **DropDownList**, **DateTimePicker**, **MultiSelect**, **DatePicker**, **CheckBox** and **TextBox** components. Since we have processed the field values internally for the above mentioned components. -As we are using our Syncfusion sub-components within our editor using template in the following example, the custom defined form elements needs to be configured as required Syncfusion components such as **DropDownList** and **DateTimePicker** within the `popupOpen` event. This particular step can be skipped, if the user needs to simply use the usual form elements. +As we are using our Syncfusion sub-components within our editor using template in the following example, the custom defined form elements needs to be configured as required Syncfusion components such as **DropDownList** and **DateTimePicker** within the [`popupOpen`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_PopupOpen) event. This particular step can be skipped, if the user needs to simply use the usual form elements. {% if page.publishingplatform == "aspnet-core" %} @@ -517,11 +517,11 @@ In the following code example, validation has been added to the status field. ### How to save the customized event editor using template -The **e-field** class is not added to each field defined within the template, so you should allow to set those field values externally by using the `popupClose` event. +The **e-field** class is not added to each field defined within the template, so you should allow to set those field values externally by using the [`popupClose`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_PopupClose) event. N> You can allow to retrieve the data only on the `save` and `delete` option. Data cannot be retrieved on the `close` and `cancel` options in the editor window. -The following code example shows how to save the customized event editor using a template by the `popupClose` event. +The following code example shows how to save the customized event editor using a template by the [`popupClose`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_PopupClose) event. {% if page.publishingplatform == "aspnet-core" %} @@ -548,7 +548,7 @@ The following code example shows how to save the customized event editor using a -In case, if you need to prevent only specific popups on Scheduler, then you can check the condition based on the popup type. The types of the popup that can be checked within the `popupClose` event are as follows. +In case, if you need to prevent only specific popups on Scheduler, then you can check the condition based on the popup type. The types of the popup that can be checked within the [`popupClose`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_PopupClose) event are as follows. | Type | Description | |------|-------------| @@ -566,7 +566,7 @@ In case, if you need to prevent only specific popups on Scheduler, then you can When the number of appointments count that lies on a particular time range * default appointment height exceeds the default height of a cell in month view and all other timeline views, a `+ more` text indicator will be displayed at the bottom of those cells. This indicator denotes that the cell contains few more appointments in it and clicking on that will display a popup displaying all the appointments present on that day. -N> To disable this option of showing popup with all hidden appointments, while clicking on the text indicator, you can do code customization within the `popupOpen` event. +N> To disable this option of showing popup with all hidden appointments, while clicking on the text indicator, you can do code customization within the [`popupOpen`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_PopupOpen) event. The same indicator is displayed on all-day row in calendar views such as day, week and work week views alone, when the number of appointment count present in a cell exceeds three. Clicking on the text indicator here will not open a popup, but will allow the expand/collapse option for viewing the remaining appointments present in the all-day row. @@ -629,7 +629,7 @@ The following code example shows you how to customize the default more indicator ### How to prevent the display of popup when clicking on the more text indicator -It is possible to prevent the display of popup window by passing the value `true` to `cancel` option within the `MoreEventsClick` event. +It is possible to prevent the display of popup window by passing the value `true` to `cancel` option within the [`MoreEventsClick`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_MoreEventsClick) event. {% if page.publishingplatform == "aspnet-core" %} @@ -658,7 +658,7 @@ It is possible to prevent the display of popup window by passing the value `true ### How to navigate Day view when clicking on more text indicator -The following code example shows you how to customize the `moreEventsClick` property to navigate to the Day view when clicking on the more text indicator. +The following code example shows you how to customize the [`moreEventsClick`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_MoreEventsClick) property to navigate to the Day view when clicking on the more text indicator. {% if page.publishingplatform == "aspnet-core" %} diff --git a/ej2-asp-core-mvc/schedule/EJ2_ASP.NETCORE/getting-started.md b/ej2-asp-core-mvc/schedule/EJ2_ASP.NETCORE/getting-started.md index b5b7a2257e..cf3e112379 100644 --- a/ej2-asp-core-mvc/schedule/EJ2_ASP.NETCORE/getting-started.md +++ b/ej2-asp-core-mvc/schedule/EJ2_ASP.NETCORE/getting-started.md @@ -1,6 +1,6 @@ --- layout: post -title: Getting Started with ##Platform_Name## Schedule Control +title: Getting Started with ##Platform_Name## Schedule Control| Syncfusion description: Checkout and learn about getting started with ##Platform_Name## Schedule control of Syncfusion Essential JS 2 and more details. platform: ej2-asp-core-mvc control: Getting Started @@ -107,7 +107,7 @@ Press Ctrl+F5 (Windows) or ⌘+F5 (m ## Populating appointments -To populate an empty Scheduler with appointments, bind the event data to it by assigning the `dataSource` property under `e-schedule-eventsettings` tag Helper. +To populate an empty Scheduler with appointments, bind the event data to it by assigning the [DataSource](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.ScheduleEventSettings.html#Syncfusion_EJ2_Schedule_ScheduleEventSettings_DataSource) property under `e-schedule-eventsettings` tag Helper. {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} @@ -128,7 +128,7 @@ public class AppointmentData ## Setting date -Scheduler usually displays the system date as its current date. To change the current date of scheduler with specific date, define the `selectedDate` property. +Scheduler usually displays the system date as its current date. To change the current date of scheduler with specific date, define the [`selectedDate`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_SelectedDate) property. {% tabs %} {% highlight cshtml tabtitle="CSHTML" %} @@ -147,7 +147,7 @@ public class AppointmentData ## Specific view -Scheduler displays `week` view by default. To change the current view, define the applicable view name to the `currentView` property. The applicable view names are, +Scheduler displays `week` view by default. To change the current view, define the applicable view name to the [`currentView`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_CurrentView) property. The applicable view names are, * Day * Week diff --git a/ej2-asp-core-mvc/schedule/EJ2_ASP.NETCORE/header-bar.md b/ej2-asp-core-mvc/schedule/EJ2_ASP.NETCORE/header-bar.md index d768dc0ace..5a202881bd 100644 --- a/ej2-asp-core-mvc/schedule/EJ2_ASP.NETCORE/header-bar.md +++ b/ej2-asp-core-mvc/schedule/EJ2_ASP.NETCORE/header-bar.md @@ -15,7 +15,7 @@ The header part of Scheduler can be customized easily with the built-in options ## Show or Hide header bar -By default, the header bar holds the date and view navigation options, through which the user can switch between the dates and various views. This header bar can be hidden from the UI by setting `false` to the `showHeaderBar` property. It's default value is `true`. +By default, the header bar holds the date and view navigation options, through which the user can switch between the dates and various views. This header bar can be hidden from the UI by setting `false` to the [`showHeaderBar`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_ShowHeaderBar) property. It's default value is `true`. {% if page.publishingplatform == "aspnet-core" %} @@ -75,7 +75,7 @@ Apart from the default date navigation and view options available on the header ## How to display the view options within the header bar popup -By default, the header bar holds the view navigation options, through which the user can switch between various views. You can move this view options to the header bar popup by setting `true` to the `enableAdaptiveUI` property. +By default, the header bar holds the view navigation options, through which the user can switch between various views. You can move this view options to the header bar popup by setting `true` to the [`enableAdaptiveUI`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_EnableAdaptiveUI) property. {% if page.publishingplatform == "aspnet-core" %} @@ -107,11 +107,11 @@ N> Refer [here](./resources/#adaptive-ui-in-desktop) to know more about adaptive ## Date header customization -The Scheduler UI that displays the date text on all views are considered as the date header cells. You can customize the date header cells of Scheduler either using `dateHeaderTemplate` or `renderCell` event. +The Scheduler UI that displays the date text on all views are considered as the date header cells. You can customize the date header cells of Scheduler either using [`dateHeaderTemplate`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_DateHeaderTemplate) or [`renderCell`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_RenderCell) event. ### Using date header template -The `dateHeaderTemplate` option is used to customize the date header cells of day, week and work-week views. +The [`dateHeaderTemplate`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_DateHeaderTemplate) option is used to customize the date header cells of day, week and work-week views. {% if page.publishingplatform == "aspnet-core" %} @@ -141,7 +141,7 @@ The `dateHeaderTemplate` option is used to customize the date header cells of da ### Using renderCell event -In month view, the date header template is not applicable and therefore the same customization can be added beside the date text in month cells by making use of the `renderCell` event. +In month view, the date header template is not applicable and therefore the same customization can be added beside the date text in month cells by making use of the [`renderCell`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_RenderCell) event. {% if page.publishingplatform == "aspnet-core" %} @@ -170,9 +170,9 @@ In month view, the date header template is not applicable and therefore the same ## Customizing the date range text -The `DateRangeTemplate` option allows you to customize the text content of the date range displayed in the scheduler. By default, the date range text is determined by the scheduler view being used. However, you can use the `DateRangeTemplate` option to override the default text and specify your own custom text to be displayed. +The [`DateRangeTemplate`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_DateRangeTemplate) option allows you to customize the text content of the date range displayed in the scheduler. By default, the date range text is determined by the scheduler view being used. However, you can use the [`DateRangeTemplate`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_DateRangeTemplate) option to override the default text and specify your own custom text to be displayed. -The `DateRangeTemplate` property includes `startDate`, `endDate` and `currentView` options, you can customize the date range text using these available options. +The [`DateRangeTemplate`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_DateRangeTemplate) property includes `startDate`, `endDate` and `currentView` options, you can customize the date range text using these available options. {% if page.publishingplatform == "aspnet-core" %} @@ -201,7 +201,7 @@ The `DateRangeTemplate` property includes `startDate`, `endDate` and `currentVie ## Customizing header indent cells -It is possible to customize the header indent cells using the `headerIndentTemplate` option and change the look and appearance in both the vertical and timeline views. In vertical views, You can customize the header indent cells at the hierarchy level and you can customize the resource header left indent cell in timeline views using the template option. +It is possible to customize the header indent cells using the [`headerIndentTemplate`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_HeaderIndentTemplate) option and change the look and appearance in both the vertical and timeline views. In vertical views, You can customize the header indent cells at the hierarchy level and you can customize the resource header left indent cell in timeline views using the template option. **Example:** To customize the header left indent cell to display resources text, refer to the below code example. diff --git a/ej2-asp-core-mvc/schedule/EJ2_ASP.NETCORE/header-rows.md b/ej2-asp-core-mvc/schedule/EJ2_ASP.NETCORE/header-rows.md index 041df2c7b1..cb5b7f8738 100644 --- a/ej2-asp-core-mvc/schedule/EJ2_ASP.NETCORE/header-rows.md +++ b/ej2-asp-core-mvc/schedule/EJ2_ASP.NETCORE/header-rows.md @@ -11,7 +11,7 @@ documentation: ug # Timeline header rows -The Timeline views can have additional header rows other than its default date and time header rows. It is possible to show individual header rows for displaying year, month and week separately using the `headerRows` property. This property is applicable only on the timeline views. The possible rows which can be added using `headerRows` property are as follows. +The Timeline views can have additional header rows other than its default date and time header rows. It is possible to show individual header rows for displaying year, month and week separately using the [`headerRows`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_HeaderRows) property. This property is applicable only on the timeline views. The possible rows which can be added using `headerRows` property are as follows. * `Year` * `Month` @@ -51,7 +51,7 @@ The following example shows the Scheduler displaying all the available header ro ## Display year and month rows in timeline views -To display the timeline Scheduler simply with year and month names alone, define the option `Year` and `Month` within the `headerRows` property. +To display the timeline Scheduler simply with year and month names alone, define the option `Year` and `Month` within the [`headerRows`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_HeaderRows) property. {% if page.publishingplatform == "aspnet-core" %} @@ -81,7 +81,7 @@ To display the timeline Scheduler simply with year and month names alone, define ## Display week numbers in timeline views -The week number can be displayed in a separate header row of the timeline Scheduler by setting `Week` option within `headerRows` property. +The week number can be displayed in a separate header row of the timeline Scheduler by setting `Week` option within[`headerRows`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_HeaderRows) property. {% if page.publishingplatform == "aspnet-core" %} @@ -111,7 +111,7 @@ The week number can be displayed in a separate header row of the timeline Schedu ## Timeline view displaying dates of a complete year -It is possible to display a complete year in a timeline view by setting `interval` value as 12 and defining **TimelineMonth** view option within the `e-schedule-views` tag helper of Scheduler. +It is possible to display a complete year in a timeline view by setting [`interval`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.ScheduleTimeScale.html#Syncfusion_EJ2_Schedule_ScheduleTimeScale_Interval) value as 12 and defining **TimelineMonth** view option within the [`e-schedule-views`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_Views) tag helper of Scheduler. {% if page.publishingplatform == "aspnet-core" %} @@ -141,7 +141,7 @@ It is possible to display a complete year in a timeline view by setting `interva ## Customizing the header rows using template -You can customize the text of the header rows and display any images or formatted text on each individual header rows using the built-in `template` option available within the `headerRows` property. +You can customize the text of the header rows and display any images or formatted text on each individual header rows using the built-in `template` option available within the [`headerRows`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_HeaderRows) property. To get start quickly about header row template option available in our Scheduler, you can check on this video: diff --git a/ej2-asp-core-mvc/schedule/EJ2_ASP.NETCORE/localization.md b/ej2-asp-core-mvc/schedule/EJ2_ASP.NETCORE/localization.md index 0aca38ec4b..479c1ba68f 100644 --- a/ej2-asp-core-mvc/schedule/EJ2_ASP.NETCORE/localization.md +++ b/ej2-asp-core-mvc/schedule/EJ2_ASP.NETCORE/localization.md @@ -128,7 +128,7 @@ For example, the following code example lets you to define the Hungarian transla ## Setting date format -Scheduler can be used with all valid date formats and by default it follows the universal date format "MM/dd/yyyy". If the `dateFormat` property is not specified particularly, then it will work based on the locale that is assigned to the Scheduler. As the default locale applied on Scheduler is "en-US", this makes it to follow the "MM/dd/yyyy" pattern. +Scheduler can be used with all valid date formats and by default it follows the universal date format "MM/dd/yyyy". If the [`dateFormat`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_DateFormat) property is not specified particularly, then it will work based on the locale that is assigned to the Scheduler. As the default locale applied on Scheduler is "en-US", this makes it to follow the "MM/dd/yyyy" pattern. {% if page.publishingplatform == "aspnet-core" %} @@ -158,7 +158,7 @@ Scheduler can be used with all valid date formats and by default it follows the ## Setting the time format -Time formats is a way of representing the time value in different string formats in the Scheduler. By default, the time mode of the Scheduler can be either 12 or 24 hours format which is completely based on the `locale` set to the Scheduler. Since the default `locale` value of the Scheduler is en-US, the time mode will be set to 12 hours format automatically. You can also customize the format by using the `timeFormat` property. To know more about the time format standards, refer to the [Date and Time Format](https://ej2.syncfusion.com/aspnetcore/documentation/common/internationalization/#custom-formats) section. +Time formats is a way of representing the time value in different string formats in the Scheduler. By default, the time mode of the Scheduler can be either 12 or 24 hours format which is completely based on the `locale` set to the Scheduler. Since the default `locale` value of the Scheduler is en-US, the time mode will be set to 12 hours format automatically. You can also customize the format by using the [`timeFormat`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_TimeFormat) property. To know more about the time format standards, refer to the [Date and Time Format](https://ej2.syncfusion.com/aspnetcore/documentation/common/internationalization/#custom-formats) section. The following example demonstrates the Scheduler component in 24 hours format. @@ -188,11 +188,11 @@ The following example demonstrates the Scheduler component in 24 hours format. ![Display Setting Time Format in ASP.NET Core Scheduler](images/schedule-time-format.png) -N> `timeFormat` property only accepts the valid time format's. +N> [`timeFormat`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_TimeFormat) property only accepts the valid time format's. ## Displaying Scheduler in RTL mode -The Scheduler layout and its behavior can be changed as per the common RTL (Right to Left) conventions by setting `enableRtl` to `true`. By doing so, the Scheduler will display its usual layout from right to left. It's default value is `false`. +The Scheduler layout and its behavior can be changed as per the common RTL (Right to Left) conventions by setting [`enableRtl`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_EnableRtl) to `true`. By doing so, the Scheduler will display its usual layout from right to left. It's default value is `false`. {% if page.publishingplatform == "aspnet-core" %} diff --git a/ej2-asp-core-mvc/schedule/EJ2_ASP.NETCORE/recurrence-editor.md b/ej2-asp-core-mvc/schedule/EJ2_ASP.NETCORE/recurrence-editor.md index 1580bc5790..a2faa67cf6 100644 --- a/ej2-asp-core-mvc/schedule/EJ2_ASP.NETCORE/recurrence-editor.md +++ b/ej2-asp-core-mvc/schedule/EJ2_ASP.NETCORE/recurrence-editor.md @@ -25,7 +25,7 @@ By default, there are 5 types of repeat options available in recurrence editor s * Monthly * Yearly -It is possible to customize the recurrence editor to display only the specific repeat options such as `Daily` and `Weekly` options alone by setting the appropriate `frequencies` option. +It is possible to customize the recurrence editor to display only the specific repeat options such as `Daily` and `Weekly` options alone by setting the appropriate [`frequencies`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.RecurrenceEditor.html#Syncfusion_EJ2_Schedule_RecurrenceEditor_Frequencies) option. {% if page.publishingplatform == "aspnet-core" %} diff --git a/ej2-asp-core-mvc/schedule/EJ2_ASP.NETCORE/resources.md b/ej2-asp-core-mvc/schedule/EJ2_ASP.NETCORE/resources.md index 29fb046a64..1ba95d66e7 100644 --- a/ej2-asp-core-mvc/schedule/EJ2_ASP.NETCORE/resources.md +++ b/ej2-asp-core-mvc/schedule/EJ2_ASP.NETCORE/resources.md @@ -23,7 +23,7 @@ To render a ASP.NET Core Scheduler with appointments from multiple resources, yo ## Resource fields -The default options available within the `resources` collection are as follows, +The default options available within the [`resources`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.ScheduleGroup.html#Syncfusion_EJ2_Schedule_ScheduleGroup_Resources) collection are as follows, | Field name | Type | Description | |-------|---------| --------------- | @@ -49,7 +49,7 @@ The data for resources can bind with Scheduler either as a local JSON collection ### Using local JSON data -The following code example depicts how to bind the local JSON data to the `dataSource` of `resources` collection. +The following code example depicts how to bind the local JSON data to the `dataSource` of [`resources`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.ScheduleGroup.html#Syncfusion_EJ2_Schedule_ScheduleGroup_Resources) collection. * Give the resource datasource in Index method * Add the Scheduler code in View page @@ -117,7 +117,7 @@ It is possible to display the Scheduler in default mode without visually showcas The appointments belonging to the different resources will be displayed altogether on the default Scheduler, which will be differentiated based on the resource color assigned in the `resources` (depicting to which resource that particular appointment belongs) collection. -**Example:** To display default Scheduler with multiple resource options in the event editor, ignore the group option and simply define the `resources` property with all its internal options. +**Example:** To display default Scheduler with multiple resource options in the event editor, ignore the group option and simply define the [`resources`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.ScheduleGroup.html#Syncfusion_EJ2_Schedule_ScheduleGroup_Resources) property with all its internal options. {% if page.publishingplatform == "aspnet-core" %} @@ -245,7 +245,7 @@ This kind of grouping allows the Scheduler to display all the resources at a sin ![Display Grouping Single-level Resources in in ASP.NET Core Scheduler](images/scheduler-resource-singlelevel.png) -N> The `name` field defined in the **resources** collection namely `Owners` will be mapped within the `group` property, in order to enable the grouping option with those resource levels on the Scheduler. +N> The `name` field defined in the **resources** collection namely `Owners` will be mapped within the [`group`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_Group) property, in order to enable the grouping option with those resource levels on the Scheduler. ### Grouping multi-level resources @@ -279,7 +279,7 @@ It is possible to group the resources of Scheduler in multiple levels, by mappin ### One-to-One grouping -In multi-level grouping, Scheduler usually groups the resources on the child level based on the `groupIDField` that maps with the `idField` field of parent level resources (as `byGroupID` set to true by default). There are also option which allows you to group all the child resource(s) against each of its parent resource(s). To enable this kind of grouping, set `false` to the `byGroupID` option within the `group` property. In the following code example, there are two levels of resources, on which all the 3 resources at the child level is mapped one to one with each resource on the first level. +In multi-level grouping, Scheduler usually groups the resources on the child level based on the `groupIDField` that maps with the `idField` field of parent level resources (as [`byGroupID`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.ScheduleGroup.html#Syncfusion_EJ2_Schedule_ScheduleGroup_ByGroupID) set to true by default). There are also option which allows you to group all the child resource(s) against each of its parent resource(s). To enable this kind of grouping, set `false` to the [`byGroupID`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.ScheduleGroup.html#Syncfusion_EJ2_Schedule_ScheduleGroup_ByGroupID) option within the [`group`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_Group) property. In the following code example, there are two levels of resources, on which all the 3 resources at the child level is mapped one to one with each resource on the first level. {% if page.publishingplatform == "aspnet-core" %} @@ -309,7 +309,7 @@ In multi-level grouping, Scheduler usually groups the resources on the child lev ### Grouping resources by date -It groups the number of resources under each date and is applicable only on the calendar views such as Day, Week, Work Week, Month, Agenda and Month-Agenda. To enable such grouping, set `byDate` option to `true` within the `group` property. +It groups the number of resources under each date and is applicable only on the calendar views such as Day, Week, Work Week, Month, Agenda and Month-Agenda. To enable such grouping, set [`byDate`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.ScheduleGroup.html#Syncfusion_EJ2_Schedule_ScheduleGroup_ByDate) option to `true` within the [`group`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_Group) property. **Example:** To display the Scheduler with resources grouped by date, @@ -343,7 +343,7 @@ N> This kind of grouping by date is not applicable on any of the **timeline view ## Customizing parent resource cells -In timeline view work cells of parent resource can be customized by checking the `elementType` as `resourceGroupCells` in the event `renderCell`. In the following code example, background color of the work hours has been changed. +In timeline view work cells of parent resource can be customized by checking the `elementType` as `resourceGroupCells` in the event [`renderCell`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_RenderCell). In the following code example, background color of the work hours has been changed. {% if page.publishingplatform == "aspnet-core" %} @@ -373,7 +373,7 @@ In timeline view work cells of parent resource can be customized by checking the ## Working with shared events -Multiple resources can share the same events, thus allowing the CRUD action made on it to reflect on all other shared instances simultaneously. To enable such option, set `allowGroupEdit` option to `true` within the `group` property. With this property enabled, a single appointment object will be maintained within the appointment collection, even if it is shared by more than one resource – whereas the resource fields of such appointment object will be in array which hold the IDs of the multiple resources. +Multiple resources can share the same events, thus allowing the CRUD action made on it to reflect on all other shared instances simultaneously. To enable such option, set [`allowGroupEdit`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.ScheduleGroup.html#Syncfusion_EJ2_Schedule_ScheduleGroup_AllowGroupEdit) option to `true` within the [`group`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_Group) property. With this property enabled, a single appointment object will be maintained within the appointment collection, even if it is shared by more than one resource – whereas the resource fields of such appointment object will be in array which hold the IDs of the multiple resources. N> Any actions such as create, edit or delete held on any one of the shared event instances, will be reflected on all other related instances visible on the UI. @@ -503,7 +503,7 @@ It is possible to expand and collapse the resources which have child resource in ## Displaying tooltip for resource headers -It is possible to display tooltip over the resource headers showing the resource information. By default, there won't be any tooltip displayed on the resource headers, and to enable it, you need to assign the customized template design to the `headerTooltipTemplate` option within the `group` property. +It is possible to display tooltip over the resource headers showing the resource information. By default, there won't be any tooltip displayed on the resource headers, and to enable it, you need to assign the customized template design to the [`headerTooltipTemplate`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.ScheduleGroup.html#Syncfusion_EJ2_Schedule_ScheduleGroup_HeaderTooltipTemplate) option within the [`group`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_Group) property. {% if page.publishingplatform == "aspnet-core" %} @@ -533,7 +533,7 @@ It is possible to display tooltip over the resource headers showing the resource ## Choosing between resource colors for appointments -By default, the colors defined on the top level resources collection will be applied for the events. In case, if you want to apply specific resource color to events irrespective of its top-level parent resource color, it can be achieved by defining `resourceColorField` option within the `eventSettings` property. +By default, the colors defined on the top level resources collection will be applied for the events. In case, if you want to apply specific resource color to events irrespective of its top-level parent resource color, it can be achieved by defining [`resourceColorField`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.ScheduleEventSettings.html#Syncfusion_EJ2_Schedule_ScheduleEventSettings_ResourceColorField) option within the [`eventSettings`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_EventSettings) property. In the following example, the colors mentioned in the second level will get applied over the events. @@ -563,7 +563,7 @@ In the following example, the colors mentioned in the second level will get appl ![Display Choosing Between Resource Colors for Appointments in ASP.NET Core Scheduler](images/scheduler-resource-colour.png) -N> The value of the `resourceColorField` field should be mapped with the `name` value given within the `resources` property. +N> The value of the `resourceColorField` field should be mapped with the `name` value given within the [`resources`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_Resources) property. ## Dynamically add and remove resources @@ -598,7 +598,11 @@ To remove the resources dynamically, `removeResource` method is used which accep ## Setting different working days and hours for resources -Each resource in the Scheduler can have different working hours as well as different working days set to it. There are default options available within the `resources` collection, to customize the default working hours and days of the Scheduler. +Each resource in the Scheduler can have different `working hours` as well as different `working days` set to it. There are default options available within the `resources` collection, to customize the default working hours and days of the Scheduler. + + +* [Using the work day field for different work days](#Set-different-work-days) +* [Using the start hour and end hour fields for different work hours](#Set-different-work-hours) ### Set different work days @@ -632,11 +636,13 @@ Different working days can be set for the resources of Scheduler using the `work ### Set different work hours -Working hours indicates the work hour duration of a day, which is highlighted visually with active color over the work cells. Each resource on the Scheduler can be defined with its own set of working hours as depicted in the following example. +Different `working Hours` can be set for the resources of Scheduler using the `startHourField` and `sndHourField` property which maps the `startHourField` and `endHourField` field from the resource dataSource. * `startHourField` - Denotes the start time of the working/business hour in a day. * `endHourField` - Denotes the end time limit of the working/business hour in a day. +Working hours indicates the work hour duration of a day, which is highlighted visually with active color over the work cells. Each resource on the Scheduler can be defined with its own set of working hours as depicted in the following example. + {% if page.publishingplatform == "aspnet-core" %} {% tabs %} @@ -702,7 +708,7 @@ N> The `HideNonWorkingDays` property only applies when the Scheduler is grouped ## Compact view in mobile -Although the Scheduler views are designed keeping in mind the responsiveness of the control in mobile devices, however when using Scheduler with multiple resources - it is difficult to view all the resources and its relevant events at once on the mobile. Therefore, we have introduced a new compact mode specially for displaying multiple resources of Scheduler on mobile devices. By default, this mode is enabled while using Scheduler with multiple resources on mobile devices. If in case, you need to disable this compact mode, set `false` to the `enableCompactView` option within the `group` property. Disabling this option will display the exact desktop mode of Scheduler view on mobile devices. +Although the Scheduler views are designed keeping in mind the responsiveness of the control in mobile devices, however when using Scheduler with multiple resources - it is difficult to view all the resources and its relevant events at once on the mobile. Therefore, we have introduced a new compact mode specially for displaying multiple resources of Scheduler on mobile devices. By default, this mode is enabled while using Scheduler with multiple resources on mobile devices. If in case, you need to disable this compact mode, set `false` to the [`enableCompactView`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.ScheduleGroup.html#Syncfusion_EJ2_Schedule_ScheduleGroup_EnableCompactView) option within the [`group`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_Group) property. Disabling this option will display the exact desktop mode of Scheduler view on mobile devices. With this compact view enabled on mobile, you can view only single resource at a time and to switch to other resources, there is a TreeView at the left listing out all other available resources - clicking on which will display that particular resource and its related appointments. @@ -710,7 +716,7 @@ With this compact view enabled on mobile, you can view only single resource at a ## Adaptive UI in desktop -By default, the Scheduler layout adapts automatically in the desktop and mobile devices with appropriate UI changes. In case, if the user wants to display the Adaptive scheduler in desktop mode with adaptive enhancements, then the property `enableAdaptiveUI` can be set to true. Enabling this option will display the exact mobile mode of Scheduler view on desktop devices. +By default, the Scheduler layout adapts automatically in the desktop and mobile devices with appropriate UI changes. In case, if the user wants to display the Adaptive scheduler in desktop mode with adaptive enhancements, then the property [`enableAdaptiveUI`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_EnableAdaptiveUI) can be set to true. Enabling this option will display the exact mobile mode of Scheduler view on desktop devices. Some of the default changes made for compact Scheduler to render in desktop devices are as follows, * View options displayed in the Navigation drawer. diff --git a/ej2-asp-core-mvc/schedule/EJ2_ASP.NETCORE/row-auto-height.md b/ej2-asp-core-mvc/schedule/EJ2_ASP.NETCORE/row-auto-height.md index 549c7c0306..9080f67a3e 100644 --- a/ej2-asp-core-mvc/schedule/EJ2_ASP.NETCORE/row-auto-height.md +++ b/ej2-asp-core-mvc/schedule/EJ2_ASP.NETCORE/row-auto-height.md @@ -13,7 +13,7 @@ documentation: ug By default, the height of the Scheduler rows in Timeline views are static and therefore, when the same time range holds multiple overlapping appointments, a `+n more` text indicator will be displayed. With this feature enabled, you can now view all the overlapping appointments present in those specific time range by auto-adjusting the row height based on the presence of the appointments count, instead of displaying the `+n more` text indicators. -To enable auto row height adjustments on Scheduler Timeline views and Month view, set `true` to the `rowAutoHeight` property whose default value is `false`. +To enable auto row height adjustments on Scheduler Timeline views and Month view, set `true` to the [`rowAutoHeight`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_RowAutoHeight) property whose default value is `false`. N> This auto row height adjustment is applicable only on all the Timeline views as well as on the calendar Month view. @@ -21,7 +21,7 @@ Now, let's see how it works on those applicable views with examples. ## Calendar month view -By default, the rows of the calendar Month view can hold only the limited appointments count based on its row height, and the rest of the overlapping appointments are indicated with a `+n more` text indicator. The following example shows how the month view row auto-adjusts based on the number of appointments count, when this `rowAutoHeight` feature is enabled. +By default, the rows of the calendar Month view can hold only the limited appointments count based on its row height, and the rest of the overlapping appointments are indicated with a `+n more` text indicator. The following example shows how the month view row auto-adjusts based on the number of appointments count, when this [`rowAutoHeight`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_RowAutoHeight) feature is enabled. {% if page.publishingplatform == "aspnet-core" %} @@ -51,7 +51,7 @@ By default, the rows of the calendar Month view can hold only the limited appoin ## Timeline views -When the feature `rowAutoHeight` is enabled in Timeline views, the row height gets auto-adjusted based on the number of overlapping events occupied on the same time range, which is demonstrated in the following example. +When the feature [`rowAutoHeight`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_RowAutoHeight) is enabled in Timeline views, the row height gets auto-adjusted based on the number of overlapping events occupied on the same time range, which is demonstrated in the following example. {% if page.publishingplatform == "aspnet-core" %} @@ -111,7 +111,7 @@ The following example shows how the auto row adjustment feature works on timelin ## Appointments occupying entire cell -By default, with the feature `rowAutoHeight`, there will be a space in the bottom of the cell when appointment is rendered. To avoid this space, we can set true to the property `ignoreWhitespace` with in `eventSettings` whereas its default property value is false. In the following code example, the whitespace below the appointments has been ignored. +By default, with the feature [`rowAutoHeight`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_RowAutoHeight), there will be a space in the bottom of the cell when appointment is rendered. To avoid this space, we can set true to the property [`ignoreWhitespace`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.ScheduleEventSettings.html#Syncfusion_EJ2_Schedule_ScheduleEventSettings_IgnoreWhitespace) with in [`eventSettings`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_EventSettings) whereas its default property value is false. In the following code example, the whitespace below the appointments has been ignored. {% if page.publishingplatform == "aspnet-core" %} @@ -139,6 +139,6 @@ By default, with the feature `rowAutoHeight`, there will be a space in the botto ![Display Appointments Occupying Entire Cell in ASP.NET Core Scheduler](images/schedule-entire-cell.png) -**Note**: The property `ignoreWhitespace` will be applicable only when `rowAutoHeight` feature is enabled in the Scheduler. +**Note**: The property [`ignoreWhitespace`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.ScheduleEventSettings.html#Syncfusion_EJ2_Schedule_ScheduleEventSettings_IgnoreWhitespace) will be applicable only when [`rowAutoHeight`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_RowAutoHeight) feature is enabled in the Scheduler. N> You can refer to our [ASP.NET Core Scheduler](https://www.syncfusion.com/aspnet-core-ui-controls/scheduler) feature tour page for its groundbreaking feature representations. You can also explore our [ASP.NET Core Scheduler example](https://ej2.syncfusion.com/aspnetcore/Schedule/Overview#/material) to knows how to present and manipulate data. diff --git a/ej2-asp-core-mvc/schedule/EJ2_ASP.NETCORE/timescale.md b/ej2-asp-core-mvc/schedule/EJ2_ASP.NETCORE/timescale.md index 4f5c3f0b46..bbab0201dd 100644 --- a/ej2-asp-core-mvc/schedule/EJ2_ASP.NETCORE/timescale.md +++ b/ej2-asp-core-mvc/schedule/EJ2_ASP.NETCORE/timescale.md @@ -11,17 +11,17 @@ documentation: ug # TimeScale Customization -The time slots are usually the time cells that are displayed on the Day, Week and Work Week views of both the calendar (to the left most position) and timeline views (at the top position). The `timeScale` property allows you to control and set the required time slot duration for the work cells displayed on Scheduler. It includes the following sub-options such as, +The time slots are usually the time cells that are displayed on the Day, Week and Work Week views of both the calendar (to the left most position) and timeline views (at the top position). The [`timeScale`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_TimeScale) property allows you to control and set the required time slot duration for the work cells displayed on Scheduler. It includes the following sub-options such as, -* `enable` - When set to `true`, allows the Scheduler to display the appointments accurately against the exact time duration. If set to `false`, all the appointments of a day will be displayed one below the other with no grid lines displayed. Its default value is `true`. -* `interval` – Defines the time duration on which the time axis to be displayed either in 1 hour or 30 minutes interval and so on. It accepts the values in minutes and defaults to 60. -* `slotCount` – Decides the number of slot count to be split for the specified time interval duration. It defaults to 2, thus displaying two slots to represent an hour(each slot depicting 30 minutes duration). +* [`enable`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.ScheduleTimeScale.html#Syncfusion_EJ2_Schedule_ScheduleTimeScale_Enable) - When set to `true`, allows the Scheduler to display the appointments accurately against the exact time duration. If set to `false`, all the appointments of a day will be displayed one below the other with no grid lines displayed. Its default value is `true`. +* [`interval`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.ScheduleTimeScale.html#Syncfusion_EJ2_Schedule_ScheduleTimeScale_Interval) – Defines the time duration on which the time axis to be displayed either in 1 hour or 30 minutes interval and so on. It accepts the values in minutes and defaults to 60. +* [`slotCount`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.ScheduleTimeScale.html#Syncfusion_EJ2_Schedule_ScheduleTimeScale_SlotCount) – Decides the number of slot count to be split for the specified time interval duration. It defaults to 2, thus displaying two slots to represent an hour(each slot depicting 30 minutes duration). >Note: The upper limit for rendering slots within a single day, utilizing the **interval** and **slotCount** properties of the **timeScale**, stands at 1000. This constraint aligns with the maximum **colspan** value permissible for the **table** element, also capped at 1000. This particular restriction is relevant exclusively to the `TimelineDay`, `TimelineWeek` and `TimelineWorkWeek` views. ## Setting different time slot duration -The `interval` and `slotCount` properties can be used together on the Scheduler to set different time slot duration which is depicted in the following code example. Here, six time slots together represents an hour. +The [`interval`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.ScheduleTimeScale.html#Syncfusion_EJ2_Schedule_ScheduleTimeScale_Interval) and [`slotCount`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.ScheduleTimeScale.html#Syncfusion_EJ2_Schedule_ScheduleTimeScale_SlotCount) properties can be used together on the Scheduler to set different time slot duration which is depicted in the following code example. Here, six time slots together represents an hour. {% if page.publishingplatform == "aspnet-core" %} @@ -51,10 +51,10 @@ The `interval` and `slotCount` properties can be used together on the Scheduler ## Customizing time cells using template -The `timeScale` property also provides template option to allow customization of time slots which are as follows, +The [`timeScale`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_TimeScale) property also provides template option to allow customization of time slots which are as follows, -* `majorSlotTemplate` - The template option to be applied for major time slots. Here, the template accepts either the string or HTMLElement as template design and then the parsed design is displayed onto the time cells. The time details can be accessed within this template. -* `minorSlotTemplate` - The template option to be applied for minor time slots. Here, the template accepts either the string or HTMLElement as template design and then the parsed design is displayed onto the time cells. The time details can be accessed within this template. +* [`majorSlotTemplate`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.ScheduleTimeScale.html#Syncfusion_EJ2_Schedule_ScheduleTimeScale_MajorSlotTemplate) - The template option to be applied for major time slots. Here, the template accepts either the string or HTMLElement as template design and then the parsed design is displayed onto the time cells. The time details can be accessed within this template. +* [`minorSlotTemplate`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.ScheduleTimeScale.html#Syncfusion_EJ2_Schedule_ScheduleTimeScale_MinorSlotTemplate) - The template option to be applied for minor time slots. Here, the template accepts either the string or HTMLElement as template design and then the parsed design is displayed onto the time cells. The time details can be accessed within this template. {% if page.publishingplatform == "aspnet-core" %} @@ -84,7 +84,7 @@ The `timeScale` property also provides template option to allow customization of ## Hide the timescale -The grid lines which indicates the exact time duration can be enabled or disabled on the Scheduler, by setting `true` or `false` to the `enable` option within the `timeScale` property. It's default value is `true`. +The grid lines which indicates the exact time duration can be enabled or disabled on the Scheduler, by setting `true` or `false` to the `enable` option within the [`timeScale`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_TimeScale) property. It's default value is `true`. {% if page.publishingplatform == "aspnet-core" %} @@ -114,7 +114,7 @@ The grid lines which indicates the exact time duration can be enabled or disable ## Highlighting current date and time -By default, Scheduler indicates current date with a highlighted date header on all views, as well as marks accurately the system's current time on specific views such as Day, Week, Work Week, Timeline Day, Timeline Week and Timeline Work Week views. To stop highlighting the current time indicator on Scheduler views, set `false` to the `showTimeIndicator` property which defaults to `true`. +By default, Scheduler indicates current date with a highlighted date header on all views, as well as marks accurately the system's current time on specific views such as Day, Week, Work Week, Timeline Day, Timeline Week and Timeline Work Week views. To stop highlighting the current time indicator on Scheduler views, set `false` to the [`showTimeIndicator`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_ShowTimeIndicator) property which defaults to `true`. {% if page.publishingplatform == "aspnet-core" %} diff --git a/ej2-asp-core-mvc/schedule/EJ2_ASP.NETCORE/timezone.md b/ej2-asp-core-mvc/schedule/EJ2_ASP.NETCORE/timezone.md index 45c7f8d3c2..5678aedbc3 100644 --- a/ej2-asp-core-mvc/schedule/EJ2_ASP.NETCORE/timezone.md +++ b/ej2-asp-core-mvc/schedule/EJ2_ASP.NETCORE/timezone.md @@ -11,7 +11,7 @@ documentation: ug # Timezone -The Scheduler makes use of the current system time zone by default. If it needs to follow some other user-specific time zone, then the `timezone` property needs to be used. Apart from the default action of applying specific timezone to the Scheduler, it is also possible to set different time zone values for each appointments through the properties `startTimezone` and `endTimezone` which can be defined as separate fields within the event fields collection. +The Scheduler makes use of the current system time zone by default. If it needs to follow some other user-specific time zone, then the [`timezone`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_Timezone) property needs to be used. Apart from the default action of applying specific timezone to the Scheduler, it is also possible to set different time zone values for each appointments through the properties [`startTimezone`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_StartTimezone) and [`endTimezone`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_EndTimezone) which can be defined as separate fields within the event fields collection. >Note: **timezone** property only applicable for the appointment processing and current time indication. @@ -52,7 +52,7 @@ The following code example displays an appointment from 9.00 AM to 10.00 AM when ## Scheduler set to specific timezone -When a timezone is set to Scheduler through `timezone` property, the appointments will be displayed exactly based on the Scheduler timezone regardless of its client timezone. In core application, client timezone will be added by default. In order to render the appointments in the timezone which has been set to the scheduler, add the following code snippet in your `Startup.cs` file like below. +When a timezone is set to Scheduler through [`timezone`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_Timezone) property, the appointments will be displayed exactly based on the Scheduler timezone regardless of its client timezone. In core application, client timezone will be added by default. In order to render the appointments in the timezone which has been set to the scheduler, add the following code snippet in your `Startup.cs` file like below. {% tabs %} {% highlight c# tabtitle=".NET 2.2"%} @@ -114,7 +114,7 @@ In the following code example, appointments will be displayed based on Eastern T ## Display events on same time everywhere with no time difference -Setting `timezone` to UTC for Scheduler will display the appointments on same time as in the database for all the users in different time zone. +Setting [`timezone`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_Timezone) to UTC for Scheduler will display the appointments on same time as in the database for all the users in different time zone. {% if page.publishingplatform == "aspnet-core" %} @@ -143,7 +143,7 @@ Setting `timezone` to UTC for Scheduler will display the appointments on same ti ## Set specific timezone for events -It is possible to set different timezone for Scheduler events by setting `startTimezone` and `endTimezone` properties within the `eventSettings` option. It allows each appointment to maintain different timezone and displays on Scheduler with appropriate time differences. +It is possible to set different timezone for Scheduler events by setting [`startTimezone`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_StartTimezone) and [`endTimezone`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.ScheduleField.html#Syncfusion_EJ2_Schedule_ScheduleField_EndTimezone) properties within the [`eventSettings`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_EventSettings) option. It allows each appointment to maintain different timezone and displays on Scheduler with appropriate time differences. {% if page.publishingplatform == "aspnet-core" %} diff --git a/ej2-asp-core-mvc/schedule/EJ2_ASP.NETCORE/views.md b/ej2-asp-core-mvc/schedule/EJ2_ASP.NETCORE/views.md index deb482b5f6..fb1fd91b00 100644 --- a/ej2-asp-core-mvc/schedule/EJ2_ASP.NETCORE/views.md +++ b/ej2-asp-core-mvc/schedule/EJ2_ASP.NETCORE/views.md @@ -19,7 +19,7 @@ N> By default, Scheduler displays the calendar views such as day, week, work wee ## Setting specific view on scheduler -As the Scheduler displays `Week` view by default, therefore to change the active view, set `currentView` property with the desired view name. The applicable view names that the Scheduler accepts are as follows, +As the Scheduler displays `Week` view by default, therefore to change the active view, set [`currentView`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_CurrentView) property with the desired view name. The applicable view names that the Scheduler accepts are as follows, * Day * Week @@ -92,7 +92,7 @@ To configure Scheduler with different configurations on each view, refer the fol ## View specific configuration -There are scenarios where each view may need to have different configurations. For such cases, you can define the applicable scheduler properties within the `views` Property for each view option as depicted in the following examples. The fields available to be used within each view options are as follows. +There are scenarios where each view may need to have different configurations. For such cases, you can define the applicable scheduler properties within the [`views`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_Views) Property for each view option as depicted in the following examples. The fields available to be used within each view options are as follows. | Property | Type | Description | Applicable views | |----------|------|-------------|------------------| @@ -104,7 +104,7 @@ There are scenarios where each view may need to have different configurations. F | `dateHeaderTemplate` | String | The template option which is used to customize the date header cells and is applied only on the views, wherever it is defined. | All views. | | `eventTemplate` | String | The template option to customize the events background. It will get applied to the events of the view to which it is currently being defined. | All views. | | `showWeekend` | Boolean | When set to `false`, it hides the weekend days of a week from the views on which it is defined.| All views. | -| `group` | [GroupModel](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.Schedule.ScheduleGroup_members.html) | Allows to set different resource grouping options on all available Scheduler view modes. | All views. | +| [`group`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_Group) | [GroupModel](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.Schedule.ScheduleGroup_members.html) | Allows to set different resource grouping options on all available Scheduler view modes. | All views. | | `cellTemplate` | String | The template option to customize the work cells of the Scheduler and is applied only on the views, on which it is defined. | Applicable on all views except Agenda view. | | `workDays` | Number[] | It is used to set the working days on the Scheduler views. | Applicable on all views except Agenda view. | | `displayName` | String | When a particular view is customized to display with different intervals, this property allows the user to set different display name for each of the views. | Applicable on all views except Agenda and Month Agenda. | @@ -284,7 +284,7 @@ N> The year view also has module support. In that, you can get all the months of ### Agenda view -The Agenda view lists out the appointments in a grid-like view for the next 7 days by default from the current date. The count of the days can be changed using the API `agendaDaysCount`. It allows virtual scrolling of dates by enabling the `allowVirtualScrolling` property. Also, you can enable or disable the display of days on Scheduler that has no appointments by setting true or false to the `hideEmptyAgendaDays` property. +The Agenda view lists out the appointments in a grid-like view for the next 7 days by default from the current date. The count of the days can be changed using the API [`agendaDaysCount`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_AgendaDaysCount). It allows virtual scrolling of dates by enabling the `allowVirtualScrolling` property. Also, you can enable or disable the display of days on Scheduler that has no appointments by setting true or false to the [`hideEmptyAgendaDays`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_HideEmptyAgendaDays) property. The following code example depicts how to customize the display of events within Agenda view alone. @@ -534,7 +534,7 @@ The following code example depicts how to group the multiple resources on Timeli #### Auto row height -Timeline Year view supports Auto row height. When the feature `rowAutoHeight` is enabled, the row height gets auto-adjusted based on the number of overlapping events occupied in the same time range. If you disable the Auto row height, you have the `+ more` text indicator on each day cell of a Timeline Year view, clicking on which will allow you to view the hidden appointments of a day. +Timeline Year view supports Auto row height. When the feature [`rowAutoHeight`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_RowAutoHeight) is enabled, the row height gets auto-adjusted based on the number of overlapping events occupied in the same time range. If you disable the Auto row height, you have the `+ more` text indicator on each day cell of a Timeline Year view, clicking on which will allow you to view the hidden appointments of a day. {% if page.publishingplatform == "aspnet-core" %} diff --git a/ej2-asp-core-mvc/schedule/EJ2_ASP.NETCORE/working-days.md b/ej2-asp-core-mvc/schedule/EJ2_ASP.NETCORE/working-days.md index bcef2f320c..bc2785c557 100644 --- a/ej2-asp-core-mvc/schedule/EJ2_ASP.NETCORE/working-days.md +++ b/ej2-asp-core-mvc/schedule/EJ2_ASP.NETCORE/working-days.md @@ -163,9 +163,9 @@ N> Enable the `showWeekNumber` property to configure the `weekRule` property. Al Working hours indicates the work hour limit within the Scheduler, which is visually highlighted with an active color on work cells. The working hours can be set on Scheduler using the `workHours` property which is of object type and includes the following sub-options, -* `highlight` – enables/disables the highlighting of work hours. -* `start` - sets the start time of the working/business hour of a day. -* `end` - sets the end time limit of the working/business hour of a day. +* [`highlight`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.ScheduleWorkHours.html#Syncfusion_EJ2_Schedule_ScheduleWorkHours_Highlight) – enables/disables the highlighting of work hours. +* [`start`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.ScheduleWorkHours.html#Syncfusion_EJ2_Schedule_ScheduleWorkHours_Start) - sets the start time of the working/business hour of a day. +* [`end`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.ScheduleWorkHours.html#Syncfusion_EJ2_Schedule_ScheduleWorkHours_End) - sets the end time limit of the working/business hour of a day. {% if page.publishingplatform == "aspnet-core" %} @@ -195,7 +195,7 @@ Working hours indicates the work hour limit within the Scheduler, which is visua ## Scheduler displaying custom hours -It is possible to display the event Scheduler layout with specific time durations by hiding the unwanted hours. To do so, set the start and end hour for the Scheduler using the `startHour` and `endHour` properties respectively. +It is possible to display the event Scheduler layout with specific time durations by hiding the unwanted hours. To do so, set the start and end hour for the Scheduler using the [`startHour`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_StartHour) and [`endHour`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_EndHour) properties respectively. The following code example displays the Scheduler starting from the time range 7.00 AM to 6.00 PM and the remaining hours are hidden on the UI. @@ -227,7 +227,7 @@ The following code example displays the Scheduler starting from the time range 7 ## Setting start day of the week -By default, Scheduler defaults to `Sunday` as its first day of a week. To change the Scheduler's start day of a week with different day, set the `firstDayOfWeek` property with the values ranging from 0 to 6. +By default, Scheduler defaults to `Sunday` as its first day of a week. To change the Scheduler's start day of a week with different day, set the [`firstDayOfWeek`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Schedule.Schedule.html#Syncfusion_EJ2_Schedule_Schedule_FirstDayOfWeek) property with the values ranging from 0 to 6. N> Here, Sunday is always denoted as 0, Monday as 1 and so on. diff --git a/ej2-asp-core-mvc/schedule/images/schedule-editor-custom-header-footer.png b/ej2-asp-core-mvc/schedule/images/schedule-editor-custom-header-footer.png index 0df1b9574e..373e08e29c 100644 Binary files a/ej2-asp-core-mvc/schedule/images/schedule-editor-custom-header-footer.png and b/ej2-asp-core-mvc/schedule/images/schedule-editor-custom-header-footer.png differ diff --git a/ej2-asp-core-toc.html b/ej2-asp-core-toc.html index 0aaeb012ae..d744f61da4 100644 --- a/ej2-asp-core-toc.html +++ b/ej2-asp-core-toc.html @@ -413,6 +413,11 @@
  • Navigators and Indicators
  • Accessibility
  • Styles and Appearances
    • +
  • How To + +
  • API Reference
    • @@ -958,6 +963,11 @@
  • Enable ruler in Document Editor component
    • +
  • FAQ + +
  • API Reference
    • @@ -1266,13 +1276,7 @@
  • Row Spanning
    • -
  • Cell - -
    • +
  • Cell
  • Editing
  • Troubleshooting @@ -2796,8 +2800,9 @@
    • -
  • Tree Grid +
  • Tree Grid