1031413: Updated Card and calendar playground sample

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)" %}

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<DateTime?> ar
 }
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hDhKMBhBreLoYIse?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rNVRZdCLrbtMNMeE?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %}

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)" %}

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)" %}

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 <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (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).
 

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 <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (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
 

blazor/calendar/getting-started.md

@@ -156,7 +156,7 @@ Add the Blazor Calendar component in the **~/Pages/Index.razor** file.
 
 - Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (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).
 

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
 
 <SfCalendar TValue="DateTime?" FirstDayOfWeek=2></SfCalendar>
 ```
-{% 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)" %}
+{% 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)" %}

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
 

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
     }
 </style>
 ```
-{% 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)" %}

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)" %}
+{% 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)" %}

blazor/calendar/special-dates.md

@@ -91,6 +91,6 @@ Customize specific dates in a [Blazor Calendar](https://www.syncfusion.com/blazo
 </style>
 
 ```
-{% 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.

blazor/card/action-buttons.md

@@ -23,7 +23,7 @@ For adding action buttons, you can create a  `CardFooterContent` component withi
     </CardFooter>
 </SfCard>
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rDBgMrBLhHADhaVd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LXLnDnsLBkQSGAqR?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %}
 
 ## Vertical
 
@@ -44,4 +44,4 @@ By default, action buttons are aligned horizontally. They can also be aligned ve
     </CardFooter>
 </SfCard>
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LZVUWVrhVdfXSDrA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LtBdtxsrVOlDOpyD?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %}

blazor/card/card-image.md

@@ -24,7 +24,7 @@ N> By default, card images occupies full width of its parent element.
     <CardImage/>
 </SfCard>
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BXVgihBBLRBjgnKM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rXrRtHsLrOnTFpDk?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %}
 
 ### Title
 
@@ -42,7 +42,7 @@ Card image is supported to include a `Title` property for the image. By default,
     </CardContent>
 </SfCard>
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rDVUihLBhHVhadTB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LDLnDHCBBYxcOZwm?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %}
 
 ## Divider
 
@@ -68,4 +68,4 @@ Divider used to separate the elements inside the card. You can add divider insid
 </SfCard>
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hZhqsVBBLnBeVrnG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VDBRZdMhVamtbNWR?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %}

blazor/card/getting-started-with-server-app.md

@@ -189,7 +189,7 @@ You can add the header by using [CardHeader](https://help.syncfusion.com/cr/blaz
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLzZshSzfQZOzAc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Card Component](images/blazor-card-component.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhRXnCVLupGVFFQ?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Card Component](images/blazor-card-component.png)" %}
 
 N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Card).
 

blazor/card/getting-started-with-web-app.md

@@ -197,7 +197,7 @@ You can add the header by using [CardHeader](https://help.syncfusion.com/cr/blaz
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLzZshSzfQZOzAc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Card Component](images/blazor-card-component.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhRXnCVLupGVFFQ?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Card Component](images/blazor-card-component.png)" %}
 
 N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Card).
 

blazor/card/getting-started.md

@@ -182,6 +182,6 @@ You can add the header by using [CardHeader](https://help.syncfusion.com/cr/blaz
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLzZshSzfQZOzAc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Card Component](images/blazor-card-component.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhRXnCVLupGVFFQ?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Card Component](images/blazor-card-component.png)" %}
 
 N> You can also explore our [Blazor Card example](https://blazor.syncfusion.com/demos/card/basic-card) that shows you how to render and configure the Card.

blazor/card/header-content.md

@@ -48,7 +48,7 @@ Card header has an option for adding images in the header. It is aligned with ei
     <CardHeader Title="Laura Callahan" SubTitle="Sales Coordinator and Representative" ImageUrl="images/cards/football.png" />
 </SfCard>
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BNrKWLLVLykMTnDF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrRtxiVBYyfeJns?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %}
 
 ## Content
 
@@ -69,7 +69,7 @@ Content in Card holds texts, images, links, and all possible HTML elements. It i
 </SfCard>
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LtBAWVhrLSuSWdJj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BjrdjHsrVEycBMCY?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %}
 
 ### Image
 
@@ -94,4 +94,4 @@ Card content is designed to display an image tag within it. You can wrap an imag
 </style>
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rNBUWBrBVxCfudwi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Card Component Content with Image](images/Blazor-Card-Component-Content-with-Image.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VjBnjRsrrunDISPn?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Card Component Content with Image](images/Blazor-Card-Component-Content-with-Image.png)" %}

blazor/card/horizontal.md

@@ -37,7 +37,7 @@ A horizontally aligned card can push a specific column to align vertically using
     }
 </style>
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BZBUMVVVrHJeVdaS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Card Component with Horizontal Orientation](images/blazor-card-with-horizontal-orientation.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hZrntdCVhklogiNY?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Card Component with Horizontal Orientation](images/blazor-card-with-horizontal-orientation.png)" %}
 
 ## See also