Telerik Forums
UI for Blazor Forum
1 answer
11 views
i am using TelerikDatePicker. I want to use user's timezone based date which i am getting in "OnAfterRenderAsync" but the telerikdatepicker is mixing up between server's date and user's timezone based date.
when i click today instead of selecting user's timezone based date(3 july), it selects the server based date i-e 2 july (which is different). Moreoever, as per in attached image user's timezone based date is 3 july 2025 and server's date is 2 july 2025 and the font of 2 july 2025 is red however the highlighter has moved to 3 july 2025.
I want the datepicker to use  user's timezone based date and deal it like it has been dealing with server's date.

this is my razor page
<TelerikDatePicker Format="dd-MMM-yyyy"
                   @bind-Value="@abc.rcvdDateDW"
                   Enabled="@isDetailEditable"
                   OnOpen="OnDatePickerOpenDW"
                   OnClose="OnDatePickerCloseDW" />

this is how i am setting things up in my razor.cs
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender && !_initialized)
        {
            _initialized = true;

            try
            {
                var userTimeZoneId = await tokenStorage.GetTokenAsync(UserTimeZoneInfokey);
                var timeZoneId = string.IsNullOrWhiteSpace(userTimeZoneId) ? "UTC" : userTimeZoneId;
                TimeZoneInfo userTimeZone = TimeZoneInfo.FindSystemTimeZoneById(timeZoneId);
                userTimeInTimeZone = TimeZoneInfo.ConvertTimeFromUtc(DateTime.UtcNow, userTimeZone);
            }
            catch
            {
                userTimeInTimeZone = DateTime.UtcNow; // fallback
            }
 await ShowData();
 InitializeTabsBasedOnPermissions();
 await Tasks();

 StateHasChanged();
}}
       public async Task OnDatePickerOpenDW(DatePickerOpenEventArgs args)
       {
           if (abc.rcvdDateDW == null && !isTempDateDWReceived)
           {
               abc.rcvdDateDW = userTimeInTimeZone;
               isTempDateDWReceived = true;
               StateHasChanged();
           }
       }
       public async Task OnDatePickerCloseDW(DatePickerCloseEventArgs args)
       {
           if (isTempDateDWReceived && abc.rcvdDateDW == userTimeInTimeZone)
           {
               abc.rcvdDateDW = null;
               isTempDateDWReceived = false;
               StateHasChanged();
           }
       }

thats the output i am getting 

Does telerikdatepicker do support this or not ? if yes kindly guide me how can i achieve this. I have tried many ways but none of them worked. Thanks
Tsvetomir
Telerik team
 answered on 04 Jul 2025
0 answers
10 views

I'm using  a TelerikCalendar component in a TelerikAnimationContainer and everything works fine, except that the calendar header is transparent and the background text is visible when the calendar pops up. I've tried setting a higher z-index to the calendar, but it doesn't helped. 

<style>
    .picker-popup > .k-calendar {
		border-width: 0;
    }    
	.date-time-box-calendar {
        width: 26vw;
        height: 30vw;
        background-color: beige;
    }
</style>

<TelerikAnimationContainer @ref="@calendarContainer" Class="picker-popup k-calander">
	<TelerikCalendar class="date-time-box-calendar" Value="@Source" View="CalendarView.Month" Views="2" ValueChanged="@OnDateChangeHandler"></TelerikCalendar>
</TelerikAnimationContainer>

@{
    async Task OnClickCalendarHanlder()
    {
		await ToggleCalendar();
    }

    async Task ToggleCalendar()
    {
        await calendarContainer.ToggleAsync();
    }
}

Any idea, how can I get the calendar to most front view? What is my mistake?

Alireza
Top achievements
Rank 1
Iron
 asked on 20 May 2025
1 answer
43 views

Hello Telerik team,

I'm new in Blazor environment, and I would like to use a mix of controls in order to display data. The goal is to have several columns and rows (like DataGrid control),:

  • columns represent calendar days (like Scheduler control);
  • rows representing "stations" [tasks] (like Gantt control);
  • core of the control (crossing between rows and columns) represented as chipset (my data).

In fact, I think the best control could be the Gantt control because of its structure and content, but I have one issue with that: I won't be able to put an item (chipset) over 2 rows.

Unfortunely, I can't provide you any picture of what I want because of my company restrictions.

Are you able to help me and provide me some advices?

Many thanks,

Valentin M.

Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
 updated answer on 31 Mar 2025
1 answer
62 views

Using the following example: https://blazorrepl.telerik.com/mIODuTlt02gFnIYp00

What I am trying to accomplish is the following:

I want the user to be able to pick a start date and end date using the range selector, if there are disabled dates between the range, the range should not be accepted since one or more of the dates are disabled.

 

Dimo
Telerik team
 answered on 05 Sep 2024
1 answer
189 views

I need to know how I can get all the rendered dates from the scheduler for the current view? I know that I have the data that I provide to the scheduler, but I am really concerned with recurring events. For a recurring appointment that is provided to the scheduler data, it could render up to six unique events. I am trying to get a list of those event.

I tried the OnCellRender event which iterates thru all the days on the scheduler, but there is nothing in the event data to identify if an appointment was rendered on that day or not.

I tried the OnItemRender event which iterates thru the appointments on the view, but for the recurring events it always gives the date in the defined appointment not the actual date that it was rendered.

For a use case, I want to use a Calendar to show a minified version of active days in a month. Since some of the events are recurring, I cannot just use the appointment data. I would like to give it to the scheduler and let the scheduler tell me what days are rendered as a result of the provided appointments.

For this appointment list, I should get the following dates returned:
5/2, 5/9, 5/16, 5/23, 5/30, 6/6, 5/25, 5/26

new SchedulerAppointment
{
	Title = "Vet visit",
	Description = "The cat needs vaccinations and her teeth checked.",
	Start = new DateTime(2024, 5, 2, 11, 30, 0),
	End = new DateTime(2024, 5, 2, 12, 0, 0),
	IsAllDay = false,
	RecurrenceExceptions = new List<DateTime>(),
	RecurrenceId = Guid.NewGuid(),
	RecurrenceRule = "FREQ=WEEKLY;BYDAY=TH"
}

new SchedulerAppointment
{
	Title = "Planning meeting",
	Description = "Kick off the new project.",
	Start = new DateTime(2024, 5, 25, 9, 30, 0),
	End = new DateTime(2024, 5, 25, 12, 45, 0)
}

new SchedulerAppointment
{
	Title = "Vet visit",
	Description = "The cat needs vaccinations and her teeth checked.",
	Start = new DateTime(2024, 5, 26, 11, 30, 0),
	End = new DateTime(2024, 5, 26, 12, 0, 0)
}

Dimo
Telerik team
 answered on 07 May 2024
0 answers
221 views
Hello,
I want to update Blazor Schedular Appointment Popup Customization. I want to add new fields and remove all day event, repeat tabs.
Not required to update all the appointment details. Only possible to view that detail is also fine. 
I tried to customize div tag, AppointmentDetailViewTemplate, etc. are not support in TelerikScheduler tag. 
Required Popup detail changes screenshot is attached. please find attachment 
Second thing is I want to add SchedulerViews for year. that is also not support in balzor code.
Anyone have any solution for Blazor Schedular Appointment Popup Customization and Yearly Scheduler view, please let me know...



Thank You
Viral
Top achievements
Rank 1
 asked on 05 Sep 2023
1 answer
462 views

Hi, one of my clients' automation team demands that each actionable element has it's own custom ID which they provide to us.

So on our custom components (or any HTML element) we just add, eg:

<div automation-id="some-important-div">...</div>

However, when we consume Telerik Blazor UI components we're struggling to fullfill this requirement.

Is there any way to add an arbitrary HTML attribute to inner components like this without having to re-implement each composable piece with our own template?

We're fine with the look and feel of components, so it feels like an overkill to have to re-do everything (for example, the calendar's header with clickable date, arrows and "today" elements, and then the date cells for each view) just to add this ID without changing the styles or structure.

Stamo Gochev
Telerik team
 answered on 26 Jun 2023
1 answer
144 views

Hi,

I am using TelerikCalendar Blazor component and set its SelectionMode="@CalendarSelectionMode.Multiple".

It works fine on computer as there is CTRL key to hold and click multiple dates to select them.

My question is how to make multi-selection on mobile/touch screen devices. There is no CTRL key.

How does TelerikCalendar support mult-selection on those devices?

Thanks

Kan

Svetoslav Dimitrov
Telerik team
 answered on 26 May 2023
1 answer
115 views

I'm currently working on a multiview calendar. However, I've come across an issue that confuses the user quite a bit. If I allow a selection that goes beyond the boundaries of a single month, then the overflow from the next or previous month is also selected and displayed. This results in the question:

"Is it possible to disable the display of overflow from the next or previous month?" In the template, I don't have any information in the context about which month the multiview is displaying, otherwise it would be easy to deactivate the context.

The question is, can the calendar be configured to simply not display overflow from other months?



For Display this is not a Problem, I override .k-other-month, so the overhang is not visible. But how to solve this in a Multiview Selection?

Dimo
Telerik team
 answered on 06 Apr 2023
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?