I want to easily print the Scheduler calendar - month view, week view and more.
===
ADMIN EDIT
===
A possible approach for the time being is to implement printing functionality for the Scheduler in a similar fashion to how the Grid is printed here https://github.com/telerik/blazor-ui/tree/master/grid/print.
The approach relies on using JavaScript to invoke the browser print() method. Using CSS and @media print, you can customize the page and specify which elements should be visible when printing. For example, you may hide the toolbar and footer of the component, so only the calendar is visible.
Here is a runnable sample that demonstrates the approach: https://blazorrepl.telerik.com/cnutklOC55T5sV0J15.
When adding / editing the last time slot for the day, SchedulerEditEventArgs has wrong End value.
For example Start value is 28.12.2023. 23:30:00 and end value is 28.12.2023. 00:00:00. Should instead be 28.12.2023. 23:59:59 or 29.12.2023. 00:00:00.
When using Vertical Grouping by multiple resources and Timeline View, the group rows without appointments do not have min-height as the rest of the group rows. Thus, they appear shorter which causes an offset of the events on the next rows.
Steps to reproduce:
- Load Timeline View Demo
- Delete Charlie's event in Small meeting room
===
ADMIN EDIT
===
A possible workaround for the time being is to set min-height to all rows. Apply this style only when Timeline view is selected, so this does not break the rendering of the other views.
Example: https://blazorrepl.telerik.com/mHYmwsOt30fjTZ6a32.
I have a problem with Scheduler TimelineView. When there are a bit more appointments in the first resource group, the last appointment from the last group is positioned incorrectly/outside of the Scheduler component.
I think the CSS parameter "top" is calculated in the wrong mode. See the attached recording.
I am using a Scheduler with vertical grouping by multiple resources. In Timeline view, some of the appointments appear with an offset and are not correctly aligned in the cell. In some cases, the appointment is even rendered outside the slot it is associated with.
The issue seems to occur as of UI for Blazor 4.2.0. The same configuration worked fine in 4.1.0.
- working version (4.1.0)...
https://blazorrepl.telerik.com/cdOXvcwQ0378eNBL22 - not working version (4.2.0)...
https://blazorrepl.telerik.com/GxEZvwwG04r4TlwA44
I want to hide the 'All Day slot' - I don't want to offer this functionality.
At the moment, you could try CSS like this, but ideally this would be a parameter (maybe on the view):
.no-allday .k-scheduler-head .k-scheduler-group:last-child{
display:none;
} <div class="no-allday">
<TelerikScheduler Data="@Appointments" @bind-Date="@StartDate" @bind-View="@CurrView" Height="600px" Width="800px">
<SchedulerViews>
<SchedulerDayView StartTime="@DayStart" />
<SchedulerWeekView StartTime="@DayStart" />
<SchedulerMultiDayView StartTime="@DayStart" NumberOfDays="10" />
</SchedulerViews>
</TelerikScheduler>
</div>
Now that we can have more than 2 events in a day in Month View, we need to add an AppointmentHeight parameter to be able to make the appointments taller in height to accommodate longer titles.
ADMIN EDIT
An alternative for the time being is to show the longer content by using the appointment templates and the Tooltip component. For example:
https://github.com/telerik/blazor-ui/tree/master/scheduler/appointment-tooltips
The "Edit Recurring Appointment" modal is only partially visible on mobile which prevents the user from proper editing.
When I change the date while I'm in the month view, the slot doesn't change to the newly calculated ItemsPerSlot value.
To reproduce, open the calendar and set the date to the 3rd of December: REPL link.
I'd like to have a data virtualization feature (similar to the OnRead event), so I can load only small chunks of data (appointments) specifically for the current page/view.
===
ADMIN EDIT
===
Currently, you can achieve similar functionality by handling the DateChanged and ViewChanged events of the Scheduler to load only the relevant appointments for the selected period.
You can find an example here: Load Scheduler Appointments on Demand.
The Timeline view currently does not provide the "Show business hours" option as in the other views.
Please add that for the Timeline view similar to the jQuery version of the component.
===
ADMIN EDIT
===
For the time being, you can achieve this functionality with a custom approach by programmatically setting the StartTime and EndTime of the view to equal the WorkDayStart and WorkDayEnd.
Here is a basic example: https://blazorrepl.telerik.com/QyEhvjbO07j1ZvID42.
Hi,
I'm building a Grid which contains a nested Grid in it's `<DetailTemplate/>`.
When I'm opening the details, the grid events fire, the data gets loaded correctly but the data doesn't show up in the UI. Using .NET 8 Blazor with Telerik UI for Blazor Version 6.0.2.
This is the grid containing the Grid (data here gets loaded correctly):
<TelerikGrid @ref="@_grid" TItem="ChecklistDetailModel" Pageable Page="@_settings.CurrentPageNumber" PageSize="@_settings.Limit" OnRead="@OnPageReadAsync" Width="100%" Height="100%">
<GridToolBarTemplate>
<LawAreaSelect SelectedLawAreaId="_settings.SelectedLawAreaId" SelectedCountryId="_settings.SelectedCountryId" OnLawAreaSelected="OnLawAreaSelected" Width="250px" />
<CountriesSelect Value="_settings.SelectedCountryId" OnChangeCallback="OnCountrySelected" Width="250px" />
<TelerikButton Icon="FontIcon.FileAdd" OnClick="OnCreateChecklistButtonClick" Title="@Localizer["ChecklistOverview.Create"]" />
</GridToolBarTemplate>
<GridColumns>
<GridColumn Title="ID" Width="50px">
<Template Context="checklist">
@{
var model = checklist as ChecklistDetailModel;
<span>@model.Id</span>
}
</Template>
</GridColumn>
<GridColumn Title="@Localizer["Data.LawArea"]">
<Template Context="checklist">
@{
var model = checklist as ChecklistDetailModel;
<span>@model.LawArea.Name</span>
}
</Template>
</GridColumn>
<GridColumn Title="@Localizer["Data.Country"]">
<Template Context="checklist">
@{
var model = checklist as ChecklistDetailModel;
<span>@model.Country.Name</span>
}
</Template>
</GridColumn>
<GridColumn Title="@Localizer["Data.Checklist.Revision"]">
<Template Context="checklist">
@{
var model = checklist as ChecklistDetailModel;
@if (model.RevisionName != null)
{
<span>@model.RevisionName</span>
}
else
{
<i>@Localizer["Data.Checklist.NoRevision"]</i>
}
}
</Template>
</GridColumn>
<GridColumn Title="@Localizer["Data.ChecklistRevisionDate"]">
<Template Context="checklist">
@{
var model = checklist as ChecklistDetailModel;
@if (model.LastUpdated.HasValue)
{
<span>@model.LastUpdated.Value.ToShortDateString()</span>
}
else
{
<span>@model.CreatedDate.ToShortDateString()</span>
}
}
</Template>
</GridColumn>
<GridCommandColumn>
<GridCommandButton Icon="FontIcon.EditTools" OnClick="OnEditChecklistButtonClick" />
<GridCommandButton Icon="FontIcon.PaperPlane" OnClick="OnAssignChecklistButtonClick" />
</GridCommandColumn>
</GridColumns>
<DetailTemplate Context="checklist">
<CustomerChecklistGrid ChecklistId="checklist.Id" OnEditCustomerChecklistButtonClick="OnEditCustomerChecklistButtonClick" OnNavigateToCustomerChecklistButtonClick="OnNavigateToCustomerChecklistButtonClick" />
</DetailTemplate>
</TelerikGrid>This is the `CustomerChecklistGrid` code inserted into the DetailTemplate of the Grid above:
<TelerikGrid @ref="_grid" TItem="CustomerChecklistModel" Pageable Page="_settings.CurrentPageNumber" PageSize="_settings.Limit" OnRead="OnPageReadAsync">
<GridToolBarTemplate>
<CustomerSelect OnCustomerSelected="OnCustomerSelected" SelectedCustomerId="_settings.SelectedCustomerId" Width="250px" />
</GridToolBarTemplate>
<GridColumns>
<GridColumn Title="ID" Width="50px">
<Template Context="customerChecklist">
@{
var model = customerChecklist as CustomerChecklistModel;
<span>@model.Id</span>
}
</Template>
</GridColumn>
<GridColumn Title="@Localizer["Data.Customer"]">
<Template Context="customerChecklist">
@{
var model = customerChecklist as CustomerChecklistModel;
<span>@model.Customer.Name</span>
}
</Template>
</GridColumn>
<GridColumn Title="@Localizer["ChecklistsOverview.CompletedOn"]">
<Template Context="customerChecklist">
@{
var model = customerChecklist as CustomerChecklistModel;
@if (model.CompletedOn.HasValue)
{
<span>@model.CompletedOn.Value.ToShortDateString()</span>
}
else
{
<i>@Localizer["ChecklistsOverview.NotCompleted"]</i>
}
}
</Template>
</GridColumn>
<GridCommandColumn Context="customerChecklist">
<GridCommandButton Icon="FontIcon.EditTools" OnClick="OnEditCustomerChecklistButtonClickAsync" />
@{
var model = customerChecklist as CustomerChecklistModel;
if (!model.CompletedOn.HasValue)
{
<GridCommandButton Icon="FontIcon.PaperPlane" OnClick="OnNavigateToCustomerChecklistButtonClickAsync" />
}
}
</GridCommandColumn>
</GridColumns>
</TelerikGrid>This is the backing C# code for the grid:
public partial class CustomerChecklistGrid
{
[Parameter] public int ChecklistId { get; set; }
[Parameter] public EventCallback<CustomerChecklistModel> OnEditCustomerChecklistButtonClick { get; set; }
[Parameter] public EventCallback<CustomerChecklistModel> OnNavigateToCustomerChecklistButtonClick { get; set; }
[Inject] public ICustomerChecklistService CustomerChecklistService { get; set; }
[Inject] public IStringLocalizer<SharedResources> Localizer { get; set; }
[CascadingParameter] public Routes App { get; set; }
private CustomerChecklistSettings _settings = new();
private PageResult<CustomerChecklistModel> _data = new();
private TelerikGrid<CustomerChecklistModel> _grid;
private async void OnPageReadAsync(GridReadEventArgs args)
{
var newOffset = args.Request.PageSize * (args.Request.Page - 1);
_settings.Offset = newOffset;
_settings.CurrentPageNumber = args.Request.Page;
var request = new CustomerChecklistRequestModel
{
Offset = _settings.Offset,
Limit = _settings.Limit,
ChecklistId = ChecklistId,
OrderBy = _settings.OrderBy,
IsCompleted = _settings.IsCompleted,
CustomerId = _settings.SelectedCustomerId
};
_data = await CustomerChecklistService.GetPageAsync(request);
args.Data = _data.Items;
args.Total = _data.Total;
StateHasChanged();
}
private void OnCustomerSelected(int customerId)
{
_settings.SelectedCustomerId = customerId;
_settings.CurrentPageNumber = 1;
_grid.Rebind();
}
private async Task OnEditCustomerChecklistButtonClickAsync(GridCommandEventArgs args)
{
var customerChecklist = args.Item as CustomerChecklistModel;
if (OnEditCustomerChecklistButtonClick.HasDelegate)
{
await OnEditCustomerChecklistButtonClick.InvokeAsync(customerChecklist);
}
}
private async Task OnNavigateToCustomerChecklistButtonClickAsync(GridCommandEventArgs args)
{
var customerChecklist = args.Item as CustomerChecklistModel;
if (OnNavigateToCustomerChecklistButtonClick.HasDelegate)
{
await OnNavigateToCustomerChecklistButtonClick.InvokeAsync(customerChecklist);
}
}
private sealed class CustomerChecklistSettings
{
public int Offset { get; set; }
public int Limit { get; set; } = 25;
public int CurrentPageNumber { get; set; } = 1;
public int? SelectedCustomerId { get; set; }
public bool? IsCompleted { get; set; }
public string OrderBy { get; set; } = "customer";
}
}This is a screenshot of the UI I'm seeing. I'm expecting data to show up in the inner grid, data gets loaded correctly (when debugging I see data is available), however no records are shown.
Hello,
I use the scheduler component with grouping ressources on a timeline view.
When there is only one ressource for the second group, there is no text showing on the view.
It works with 2 ressources.
I try over your demo and i have the same result.
https://blazorrepl.telerik.com/GyYAmBGE22N2CcIQ27
When I use 2 ressources it works.
Thank you
I want to be able to limit the Scheduler to a minimum and/or maximum date.
---
ADMIN EDIT
---
This request could be revised in two separate tracks:
- Min and Max parameters on component level regardless of the selected view
- Min and Max parameters for the separate views ( Day, Week, Month etc.)
Please share your thoughts on how you'd expect it to be implemented.