Hello,
I want single click and double click actions on my calendar to open a completely custom component in a dialog that I am already using in my app on another page for adding and editing appointments through a grid. Is this possible?
Update.
adding my workeditor component as the editortemplate displays my custom component. The problem is that none of the click events on the component work when it is used as the editor template.
<ScheduleTemplates>
<EditorTemplate>
<WorkEditor calcontext="(context as TemplateContext)"></WorkEditor>
</EditorTemplate>
</ScheduleTemplates>
Another Update,
I have gotten my custom component working by making blank header and footer templates for the scheduler but I am left with a top and bottom bar where the header and footer templates were. Can I get rid of the sections highlighted in yellow? Also can I Implement the X close functionality inside of my component?
<ScheduleTemplates>
<EditorTemplate>
<WorkEditor calcontext="(context as TemplateContext)"></WorkEditor>
</EditorTemplate>
<EditorHeaderTemplate>
</EditorHeaderTemplate>
<EditorFooterTemplate>
</EditorFooterTemplate>
</ScheduleTemplates>
Hi Bryan Luisana,
Q1: I have gotten my custom component working by making blank header and footer templates for the scheduler but I am left with a top and bottom bar where the header and footer templates were. Can I get rid of the sections highlighted in yellow? Also can I Implement the X close functionality inside of my component?
You can achieve your requirement by customizing the
schedule dialog CSS. The attached code snippet and the following example
illustrate the solution. Please give it a try, and let us know if you need any
further assistance.
Sample: https://blazorplayground.syncfusion.com/LNVzXMVVeHSzARSz
|
<ScheduleTemplates> <EditorTemplate> <div class="e-icon-dlg-close e-icons e-btn-icon" @onclick="closeEditoer"> </div> <table class="custom-event-editor" width="100%" cellpadding="5"> <tbody> <tr> <td class="e-textlabel">Summary</td> <td colspan="4"> <SfTextBox @bind-Value="@((context as AppointmentData).Subject)"></SfTextBox> </td> </tr> <tr> </EditorTemplate> </ScheduleTemplates>
.e-schedule-dialog .e-dlg-header-content, .e-schedule-dialog .e-footer-content { display: none !important; }
.e-schedule-dialog .e-icon-dlg-close { float: inline-end; padding: 5px;
} </style>
|
Q2: adding my workeditor component as the editortemplate displays my custom component. The problem is that none of the click events on the component work when it is used as the editor template.
We have checked the reported issues on our end, and everything is working properly. If you share more details about the code you are using for the custom dialog, it would be helpful for us to validate the issue.
|
<SfSchedule @ref="scheduleRef" TValue="AppointmentData" Width="100%" Height="650px" @bind-SelectedDate="@CurrentDate"> <ScheduleTemplates> <EditorTemplate> <div class="e-icon-dlg-close e-icons e-btn-icon" @onclick="closeEditoer"> </div> <table class="custom-event-editor" width="100%" cellpadding="5"> <tbody> <tr> <td class="e-textlabel">Summary</td> <td colspan="4"> <SfTextBox @bind-Value="@((context as AppointmentData).Subject)"></SfTextBox> </td> </tr> <tr> </EditorTemplate> </ScheduleTemplates>
.e-schedule-dialog .e-dlg-header-content, .e-schedule-dialog .e-footer-content { display: none !important; }
.e-schedule-dialog .e-icon-dlg-close { float: inline-end; padding: 5px;
} </style>
{ scheduleRef.CloseEditor(); }
|
Regards,
Ashok
Thank you for all of your help.
I was able to get rid of the header and footer with your css changes.
I was also able to implement close functionality from a cancel button on my component like this.
In my custom component.
<Button type="button" Color="ThemeColor.Danger" @onclick="OnCloseDialog">Cancel</Button>
@code
{
[Parameter] public Action OnCloseDialog { get; set; }
}
In my calendar page which implements the calls the custom editor.
<ScheduleTemplates>
<EditorTemplate>
<WorkEditor calcontext="(context as WorkGrid)" OnCloseDialog="closeediter"></WorkEditor>
</EditorTemplate>
<EditorHeaderTemplate>
</EditorHeaderTemplate>
<EditorFooterTemplate>
</EditorFooterTemplate>
</ScheduleTemplates>
@code
{
private void closeediter()
{
workcal.CloseEditor();
}
}
Please dissregard Q2. that was an issue on my end.
My last problem is how to open my custom editor component on single click and double click from the calendar? Right now it only opens on double click.
Please feel free to close this issue.
I found the online example of how to make single-click and double-click open the editor from here.
https://blazor.syncfusion.com/documentation/scheduler/how-to/open-editor-window-on-single-click
I will start a new thread if I run into any other issues implementing the scheduler.
Thanks for all of your help
Hi Bryan,
You can achieve your requirement by using the OnCellClick, OnCellDoubleClick,
OnEventClick, and OnEventDoubleClick methods to meet your
requirements. The
attached code snippet and the sample below demonstrate the solution. Please
give it a try and let us know if you need any further assistance.
Sample: https://blazorplayground.syncfusion.com/VXLfDCLTeVdgVzGK
UG Samples:
https://blazor.syncfusion.com/documentation/scheduler/events#oncellclick
https://blazor.syncfusion.com/documentation/scheduler/events#oncelldoubleclick
https://blazor.syncfusion.com/documentation/scheduler/events#oneventclick
https://blazor.syncfusion.com/documentation/scheduler/events#oneventdoubleclick
|
<SfSchedule TValue="AppointmentData" @ref="@ScheduleRef" Width="100%" Height="550px" @bind-SelectedDate="@CurrentDate"> <ScheduleEvents TValue="AppointmentData" OnCellClick="OnCellClick" OnCellDoubleClick="OnCellDoubleClick" OnEventClick="OnEventClick" OnEventDoubleClick="OnEventDoubleClick"></ScheduleEvents> <ScheduleEventSettings DataSource="@DataSource"></ScheduleEventSettings> <ScheduleViews> <ScheduleView Option="View.Day"></ScheduleView> <ScheduleView Option="View.Week"></ScheduleView> <ScheduleView Option="View.WorkWeek"></ScheduleView> <ScheduleView Option="View.Month"></ScheduleView> <ScheduleView Option="View.Agenda"></ScheduleView> </ScheduleViews> </SfSchedule>
@code{ DateTime CurrentDate = new DateTime(2020, 3, 10);
SfSchedule<AppointmentData> ScheduleRef;
public async Task OnCellClick(CellClickEventArgs args) { args.Cancel = true;
//To open your customized dialog with a single click } public void OnCellDoubleClick(CellClickEventArgs args) { args.Cancel = true; //To prevent the opening of editor window on cells alone.
//To open your customized dialog with a dobule click } public async Task OnEventClick(EventClickArgs<AppointmentData> args) { args.Cancel = true;
await ScheduleRef.OpenEditorAsync(args.Event, CurrentAction.Save); //To open your customized dialog with a single click } public async Task OnEventDoubleClick(EventClickArgs<AppointmentData> args) { args.Cancel = true;
await ScheduleRef.OpenQuickInfoPopupAsync(args.Event); //To open your customized dialog with a double click }
List<AppointmentData> DataSource = new List<AppointmentData> { new AppointmentData { Id = 1, Subject = "Meeting", StartTime = new DateTime(2020, 3, 10, 9, 30, 0) , EndTime = new DateTime(2020, 3, 10, 12, 0, 0) } };
public class AppointmentData { public int Id { get; set; } public string Subject { get; set; } public string Location { get; set; } public DateTime StartTime { get; set; } public DateTime EndTime { get; set; } public string Description { get; set; } public bool IsAllDay { get; set; } public string RecurrenceRule { get; set; } public string RecurrenceException { get; set; } public Nullable<int> RecurrenceID { get; set; } } }
|
Regards,
Ashok
Thanks Ashok,
This seems like the approach I want but it isn't popping up the editor form and I don't get any errors in console or in visual studio.
Right now I am just trying to get single click for a cell that doesn't have a meeting on it yet. This is my relavent code.
<SfSchedule @ref="workcal" TValue="Work" Width="100%" Height="650px" @bind-SelectedDate="@CurrentDate" @bind-CurrentView="@CurrentView" ShowQuickInfo="false">
<ScheduleEvents TValue="Work" OnCellClick="OnCellClick" OnCellDoubleClick="OnCellDoubleClick" OnEventClick="OnEventClick" OnEventDoubleClick="OnEventDoubleClick"></ScheduleEvents>
<ScheduleEventSettings DataSource="@workmodel">
</ScheduleEventSettings>
<ScheduleViews>
<ScheduleView Option="View.Day"></ScheduleView>
<ScheduleView Option="View.WorkWeek"></ScheduleView>
<ScheduleView Option="View.Week"></ScheduleView>
</ScheduleViews>
<ScheduleTemplates>
<EditorTemplate>
<WorkEditor calcontext="(context as Work)" OnCloseDialog="closeediter"></WorkEditor>
</EditorTemplate>
<EditorHeaderTemplate>
</EditorHeaderTemplate>
<EditorFooterTemplate>
</EditorFooterTemplate>
</ScheduleTemplates>
</SfSchedule>
@code
{
private SfSchedule<Work> workcal;
public async Task OnCellClick(CellClickEventArgs args)
{
var cellData = await workcal.GetSelectedCellsAsync(); //to get the current cell details
workcal.OpenEditorAsync(cellData, CurrentAction.Add); //to open the editor on cell click
}
}
When I click a single open cell I get into the breakpoint in the OnCellClick Task. the OpenEditorAsync method fires but the dialog does not open.
Hello Ashok,
I have been experimenting with different ways to open the editor with a single click. The Task below is working perfectly for me.
public async Task OnCellClick(CellClickEventArgs args)
{
args.Cancel = true;
await workcal.OpenEditorAsync(args, CurrentAction.Save); //To open your customized dialog with a single click
}
Hi Bryan,
Thank you for the update. We are happy that the solution has worked for you.
Regards,
Swathi Ravi