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?
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),:
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.
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.
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)
}
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.
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
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?
I recall being told I would have access to source code once I buy a licence.
Now that I have a licence, how do I get access to the source so I can do a local build?