diff --git a/blazor/calendar/calendar-views.md b/blazor/calendar/calendar-views.md index c2cc4275d2..3fc56be4e9 100644 --- a/blazor/calendar/calendar-views.md +++ b/blazor/calendar/calendar-views.md @@ -33,7 +33,7 @@ The following example demonstrates how to set the `Year` as the start view of th } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LXLUsVVVhopruWLg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Calendar View](./images/blazor-full-calendar-view.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNrdNRCBhvvQzKOi?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Changing Blazor Calendar View](./images/blazor-full-calendar-view.webp)" %} ## View restriction @@ -54,4 +54,4 @@ N> The Depth view must be “smaller” (more detailed) than the Start view. If } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BZVgsLhhhofIigEl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Restriction in Blazor Calendar](./images/blazor-calendar-restriction.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjrHDRCrBbONJACo?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Restriction in Blazor Calendar](./images/blazor-calendar-restriction.webp)" %} diff --git a/blazor/calendar/data-binding.md b/blazor/calendar/data-binding.md index 25bd4e6f7f..29e3ac453f 100644 --- a/blazor/calendar/data-binding.md +++ b/blazor/calendar/data-binding.md @@ -35,7 +35,7 @@ In one-way binding, Bind the value to the Calendar component directly for `Value } } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BXhKiVLVVoLNbXdK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LtrxjdMrVmaWCLQo?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Two-Way data binding @@ -52,7 +52,7 @@ Use `@bind-Value` to keep the Calendar and your data source in sync. The bound f public DateTime? DateValue { get; set; } = DateTime.Now; } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BNhgWLhrrSBqdcMZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LtBxNdMVLGOIHJQV?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Dynamic value binding @@ -82,4 +82,4 @@ private void onChange(Syncfusion.Blazor.Calendars.ChangedEventArgs ar } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hDhKMBhBreLoYIse?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNVRZdCLrbtMNMeE?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} \ No newline at end of file diff --git a/blazor/calendar/date-range.md b/blazor/calendar/date-range.md index 8e23ebcc63..0b02368a1e 100644 --- a/blazor/calendar/date-range.md +++ b/blazor/calendar/date-range.md @@ -29,4 +29,4 @@ The following code allows you to select a date within the range of 7th to 27th d } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BNBgMhBLLyBEcqBn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[DataRange in Blazor Calendar Component](./images/blazor-calendar-date-range.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNVRtRshrFnXUsXL?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[DataRange in Blazor Calendar Component](./images/blazor-calendar-date-range.webp)" %} diff --git a/blazor/calendar/dateonly-support.md b/blazor/calendar/dateonly-support.md index a65dbb697c..372d2c3d25 100644 --- a/blazor/calendar/dateonly-support.md +++ b/blazor/calendar/dateonly-support.md @@ -21,4 +21,4 @@ The following example demonstrates configuring the Calendar with `TValue=DateOnl {% endhighlight %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/BtrKsVBrLeKgEwxS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Calendar with DateOnly](./images/CalendarDateOnly.gif)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNVRjdCrhFnyfOpB?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Calendar with DateOnly](./images/CalendarDateOnly.gif)" %} diff --git a/blazor/calendar/getting-started-with-server-app.md b/blazor/calendar/getting-started-with-server-app.md index 9f5e37764e..ca9d644464 100644 --- a/blazor/calendar/getting-started-with-server-app.md +++ b/blazor/calendar/getting-started-with-server-app.md @@ -168,7 +168,7 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati * Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Blazor Calendar component in the default web browser. -{% previewsample "https://blazorplayground.syncfusion.com/embed/rDVpNsVIpTDiqybO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Calendar Component](./images/blazor-calendar-component.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hXrHjnsVBcxOkeWD?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Calendar Component](./images/blazor-calendar-component.webp)" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Calendar). @@ -194,7 +194,7 @@ Here, the Calendar allows selecting a date from the 5th to the 27th of the curre {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/BNLzjMLSzUEDfIGE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Selection in Blazor Calendar Component](./images/blazor-calendar-selection.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZrdZHsVVmcdCwgj?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Selection in Blazor Calendar Component](./images/blazor-calendar-selection.webp)" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Calendar). diff --git a/blazor/calendar/getting-started-with-web-app.md b/blazor/calendar/getting-started-with-web-app.md index ffebde1396..2ab6184717 100644 --- a/blazor/calendar/getting-started-with-web-app.md +++ b/blazor/calendar/getting-started-with-web-app.md @@ -176,7 +176,7 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem * Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Blazor Calendar component in the default web browser. -{% previewsample "https://blazorplayground.syncfusion.com/embed/rDVpNsVIpTDiqybO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Calendar Component](./images/blazor-calendar-component.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hXrHjnsVBcxOkeWD?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Calendar Component](./images/blazor-calendar-component.webp)" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Calendar). @@ -202,7 +202,7 @@ Here, the Calendar allows selecting a date from the 5th to the 27th of the curre {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/BNLzjMLSzUEDfIGE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Selection in Blazor Calendar Component](./images/blazor-calendar-selection.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZrdZHsVVmcdCwgj?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Selection in Blazor Calendar Component](./images/blazor-calendar-selection.webp)" %} ## See also diff --git a/blazor/calendar/getting-started.md b/blazor/calendar/getting-started.md index 3e1ca9339b..707db90465 100644 --- a/blazor/calendar/getting-started.md +++ b/blazor/calendar/getting-started.md @@ -156,7 +156,7 @@ Add the Blazor Calendar component in the **~/Pages/Index.razor** file. - Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Blazor Calendar component renders in the default web browser. -{% previewsample "https://blazorplayground.syncfusion.com/embed/rDVpNsVIpTDiqybO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Calendar Component](./images/blazor-calendar-component.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hXrHjnsVBcxOkeWD?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Calendar Component](./images/blazor-calendar-component.webp)" %} ## Setting the Value, Min, and Max dates @@ -180,7 +180,7 @@ Here, the Calendar allows selecting a date from the 5th to the 27th of the curre {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/BNLzjMLSzUEDfIGE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Selection in Blazor Calendar Component](./images/blazor-calendar-selection.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZrdZHsVVmcdCwgj?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Selection in Blazor Calendar Component](./images/blazor-calendar-selection.webp)" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Calendar). diff --git a/blazor/calendar/how-to/change-the-first-day-of-week.md b/blazor/calendar/how-to/change-the-first-day-of-week.md index 87656c0cee..d24ca17402 100644 --- a/blazor/calendar/how-to/change-the-first-day-of-week.md +++ b/blazor/calendar/how-to/change-the-first-day-of-week.md @@ -20,4 +20,4 @@ The following code shows the Calendar with `Tuesday` as the first day of the wee ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BNBgChhVBSnmAEDf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing First Day of Week in Blazor Calendar](../images/blazor-calendar-first-day-of-week.webp)" %} \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLdjHCrrYWSifyM?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Changing First Day of Week in Blazor Calendar](../images/blazor-calendar-first-day-of-week.webp)" %} \ No newline at end of file diff --git a/blazor/calendar/how-to/render-the-calendar-with-week-numbers.md b/blazor/calendar/how-to/render-the-calendar-with-week-numbers.md index a1d78d9681..7cbaeb74bd 100644 --- a/blazor/calendar/how-to/render-the-calendar-with-week-numbers.md +++ b/blazor/calendar/how-to/render-the-calendar-with-week-numbers.md @@ -20,7 +20,7 @@ You can enable `WeekNumber` in the Calendar by using the [WeekNumber](https://he ``` This example shows the Calendar displaying a week number column at the left. -{% previewsample "https://blazorplayground.syncfusion.com/embed/LNLAWBrVhoxzJZmT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Calendar displays Week Numbers](../images/blazor-calendar-week-number.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDrxZHiBLustErAF?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Calendar displays Week Numbers](../images/blazor-calendar-week-number.webp)" %} ## Week rule diff --git a/blazor/calendar/how-to/show-dates-of-other-months.md b/blazor/calendar/how-to/show-dates-of-other-months.md index 451f5a5539..100ee55b32 100644 --- a/blazor/calendar/how-to/show-dates-of-other-months.md +++ b/blazor/calendar/how-to/show-dates-of-other-months.md @@ -34,4 +34,4 @@ The following code demonstrates how to show dates of other months. Using the sty } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hNVAsVLLLeSYtRiu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Displaying other Month Dates in Blazor Calendar](../images/blazor-calendar-other-month-dates.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtVdNnMBhYZdyayo?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Displaying other Month Dates in Blazor Calendar](../images/blazor-calendar-other-month-dates.webp)" %} diff --git a/blazor/calendar/multi-select.md b/blazor/calendar/multi-select.md index d5ea11c99d..5c7206c2cc 100644 --- a/blazor/calendar/multi-select.md +++ b/blazor/calendar/multi-select.md @@ -25,4 +25,4 @@ public DateTime[] MultipleValues { get; set; } = new DateTime[] { new DateTime(D } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVqCrrrBIKclcWx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Multi Selection in Blazor Calendar Component](./images/blazor-calendar-multi-selection.webp)" %} \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtBdjRsVLblhrqeB?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Multi Selection in Blazor Calendar Component](./images/blazor-calendar-multi-selection.webp)" %} \ No newline at end of file diff --git a/blazor/calendar/special-dates.md b/blazor/calendar/special-dates.md index 55b4ed6787..dc3440d0c0 100644 --- a/blazor/calendar/special-dates.md +++ b/blazor/calendar/special-dates.md @@ -91,6 +91,6 @@ Customize specific dates in a [Blazor Calendar](https://www.syncfusion.com/blazo ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hXVAMBLBLyofGefV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Calendar with special dates](./images/blazor_calendar_special_dates.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNhdtRMBrlYlIhNB?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Calendar with special dates](./images/blazor_calendar_special_dates.webp)" %} N> The `RenderDayCellEventArgs` includes a `CurrentView` property that identifies the active calendar view during rendering. Possible values are `Month`, `Year`, and `Decade`. Use this to apply view-specific logic within the [OnRenderDayCell](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.CalendarEvents-1.html#Syncfusion_Blazor_Calendars_CalendarEvents_1_OnRenderDayCell) handler. This property is useful for customizing the rendering of day cells based on the calendar's current view. \ No newline at end of file