How to use EventCallbacks/provide examples and Popup Customization

[sanongpost]

@gismofx

Pls kindly advise, possibly by adding to current sample for customization such as callback event like below, only to see how calendar item can be intercept.

callback;

-OnClickCalendarEventOrTask
-OnChangeCalendarEventOrTask
-OnCreateCalendarEventOrTask
-OnDeleteCalendarEventOrTask

popup

-can this be resize or customize ? for example, calendar is in

or MudPaper, the popup size stay the same.

regards

sanong

i will be retrieving data / save to SQL server, and do some validation etc when user do something on screen.

[gismofx]

@sanongpost Have a look at the tui calendar docs. There is a lot to customize that you can control. https://nhn.github.io/tui.calendar/latest/Options

If you want to use your own pop-up editors you can disable the default ones with these properties in this class:

toast_ui.blazor_calendar/toast_ui.blazor_calendar/Models/TUICalendarOptions.cs

Line 66 in 5cf7868

public bool useCreationPopup { get; set; } = false;

(I haven't done this yet, but someone else might have)

Events/Callbacks, you can browse the code and code comments from intellisense. That said, I should and will add some additional samples into the sample project which use all the available events so you can get an idea how they should be used.

[sanongpost]

Thanks ***@***.***> @gismofx/toast_ui.blazor_calendar We appreciate existing sample with added usage of the component :

…

-event callback

-sizing and positioning which I have tried with Mudblazor ( eg. MudPaper) and found that dialog size don’t go along. I am sure developer can extend from your guide easily. Thank you keep supporting. Regards Sanong From: gismofx ***@***.***> Sent: Thursday, March 10, 2022 6:43 AM To: gismofx/toast_ui.blazor_calendar ***@***.***> Cc: sanongpost ***@***.***>; Mention ***@***.***> Subject: Re: [gismofx/toast_ui.blazor_calendar] Suggestion/Advise on Component customization (Issue #17) @sanongpost <https://github.com/sanongpost> Have a look at the tui calendar docs. There is a lot to customize that you can control. https://nhn.github.io/tui.calendar/latest/Options If you want to use your own pop-up editors you can disable the default ones with these properties in this class: https://github.com/gismofx/toast_ui.blazor_calendar/blob/5cf78683218cafbecd3cf1f46f41645e7fe153d2/toast_ui.blazor_calendar/Models/TUICalendarOptions.cs#L66 (I haven't done this yet, but someone else might have) Events/Callbacks, you can browse the code and code comments from intellisense. That said, I should and willadd some additional samples into the sample project which use all the available events so you can get an idea how they should be used. — Reply to this email directly, view it on GitHub <#17 (comment)> , or unsubscribe <https://github.com/notifications/unsubscribe-auth/ALRIKFRC6I6WPPXOXZ37LI3U7EZOVANCNFSM5QK66RZQ> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub> . You are receiving this because you were mentioned. <https://github.com/notifications/beacon/ALRIKFX54FEVNVW6VRHSDPTU7EZOVA5CNFSM5QK66RZ2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOH5RZC6Q.gif> Message ID: ***@***.*** ***@***.***> >

[gismofx]

@sanongpost

Examples added to sample project with how to use the events emitted from the calendar:
Here:

toast_ui.blazor_calendar/toast_ui.blazor_calendar.TestProject/toast_ui.blazor_calendar.TestProject/Pages/Index.razor

Lines 39 to 49 in 475e30f

	<TUICalendar Schedules="ViewModel.Schedules"
	CalendarOptions="ViewModel.CalendarOptions"
	CalendarProperties="ViewModel.CalendarProps"
	CalendarViewName="ViewModel.CalendarViewName"
	@bind-VisibleStartDateRange="ViewModel.StartDate"
	@bind-VisibleEndDateRange="ViewModel.EndDate"
	OnChangeCalendarEventOrTask="@(async (x) => await ViewModel.OnChangeCalendarEventOrTask(x))"
	OnClickCalendarEventOrTask="@(async (x) => await ViewModel.OnClickCalendarEventOrTask(x))"
	OnCreateCalendarEventOrTask="@(async (x) => await ViewModel.OnCreateCalendarEventOrTask(x))"
	OnDeleteCalendarEventOrTask="(async (x) => await ViewModel.OnDeleteCalendarEventOrTask(x))"
	@ref=_calendarRef></TUICalendar>

and here:

toast_ui.blazor_calendar/toast_ui.blazor_calendar.TestProject/toast_ui.blazor_calendar.TestProject/ViewModels/CalendarViewModel.cs

Lines 171 to 195 in 475e30f

	public async Task OnChangeCalendarEventOrTask(TUISchedule schedule)
	{
	//do something when an event is clicked
	//Show a custom pop up if some conditions are met?
	Debug.WriteLine($"Event or Task Changed: {schedule.title}");
	}
	public async Task OnClickCalendarEventOrTask(string eventId)
	{
	//do something when an event is clicked
	//You can find Event in Database by Id
	Debug.WriteLine($"Event or Task Clicked: {eventId}");
	}
	public async Task OnCreateCalendarEventOrTask(TUISchedule newSchedule)
	{
	//Save event to database
	Debug.WriteLine($"Event or Task Created: {newSchedule.title}");
	}
	public async Task OnDeleteCalendarEventOrTask(string EventId)
	{
	//Delete the event from database
	Debug.WriteLine($"Delete this Event: {EventId}");
	}

If you want to use your own pop-up editor you can, but you'll need to play with the settings and logic on your own.. Maybe read thru Tui there may be some customization you can do with their pop-up.