Skip to content

Commit b17657f

Browse files
svdimitrdimodi
svdimitr
and
dimodi
authored
Scheduler events (#500)
* chore(events): add events * chore(events): add EventArgs to the events * Update components/scheduler/events.md Co-authored-by: Dimo Dimov <[email protected]> * Update components/scheduler/events.md Co-authored-by: Dimo Dimov <[email protected]> * Update components/scheduler/events.md Co-authored-by: Dimo Dimov <[email protected]> Co-authored-by: Dimo Dimov <[email protected]>
1 parent 79ebb43 commit b17657f

File tree

1 file changed

+228
-0
lines changed

1 file changed

+228
-0
lines changed

‎components/scheduler/events.md

Lines changed: 228 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,9 @@ This article explains the events available in the Telerik Scheduler for Blazor:
1414

1515
* [CUD Events](#cud-events)
1616
* [OnModelInit](#onmodelinit)
17+
* [OnItemClick](#onitemclick)
18+
* [OnItemDoubleClick](#onitemdoubleclick)
19+
* [OnItemContextMenu](#onitemcontextmenu)
1720
* [ItemRender](#itemrender)
1821
* [DateChanged](#datechanged)
1922
* [ViewChanged](#viewchanged)
@@ -598,6 +601,231 @@ To implement appointment editing, the scheduler exposes the `OnCreate`, `OnDelet
598601
}
599602
````
600603

604+
## OnItemClick
605+
606+
The `OnItemClick` event fires when the user clicks on an appointment in the Scheduler.
607+
It provides a `SchedulerItemClickEventArgs` object to the event handler and you can get the `Item` property and cast it to your own model. If you set the `ShouldRender` property to `true`, the component will re-render. This can be useful if you need to change the Scheduler parameters or state during the event execution and especially if you need to execute `async` logic in the event handler.
608+
609+
@[template](/_contentTemplates/grid/common-link.md#rowclick-args)
610+
611+
>caption Use the OnItemClick event for the scheduler
612+
613+
````CSHTML
614+
@* You can react to user clicking on a Scheduler item by using the OnItemClick event *@
615+
616+
<TelerikScheduler Data="@Appointments"
617+
@bind-Date="@StartDate"
618+
OnItemClick="@OnClickHandler"
619+
@bind-View="@CurrView"
620+
Height="600px"
621+
Width="800px">
622+
<SchedulerViews>
623+
<SchedulerDayView StartTime="@DayStart" />
624+
<SchedulerWeekView StartTime="@DayStart" />
625+
<SchedulerMultiDayView StartTime="@DayStart" NumberOfDays="10" />
626+
</SchedulerViews>
627+
</TelerikScheduler>
628+
629+
@code {
630+
private void OnClickHandler(SchedulerItemClickEventArgs args)
631+
{
632+
var currentItem = args.Item as SchedulerAppointment;
633+
634+
args.ShouldRender = false;
635+
}
636+
637+
public DateTime StartDate { get; set; } = new DateTime(2019, 11, 29);
638+
public SchedulerView CurrView { get; set; } = SchedulerView.Week;
639+
public DateTime DayStart { get; set; } = new DateTime(2000, 1, 1, 8, 0, 0);//the time portion is important
640+
List<SchedulerAppointment> Appointments = new List<SchedulerAppointment>()
641+
{
642+
new SchedulerAppointment
643+
{
644+
Title = "Vet visit",
645+
Description = "The cat needs vaccinations and her teeth checked.",
646+
Start = new DateTime(2019, 11, 26, 11, 30, 0),
647+
End = new DateTime(2019, 11, 26, 12, 0, 0)
648+
},
649+
650+
new SchedulerAppointment
651+
{
652+
Title = "Planning meeting",
653+
Description = "Kick off the new project.",
654+
Start = new DateTime(2019, 11, 25, 9, 30, 0),
655+
End = new DateTime(2019, 11, 25, 12, 45, 0)
656+
},
657+
658+
new SchedulerAppointment
659+
{
660+
Title = "Trip to Hawaii",
661+
Description = "An unforgettable holiday!",
662+
IsAllDay = true,
663+
Start = new DateTime(2019, 11, 27),
664+
End = new DateTime(2019, 12, 07)
665+
}
666+
};
667+
668+
public class SchedulerAppointment
669+
{
670+
public string Title { get; set; }
671+
public string Description { get; set; }
672+
public DateTime Start { get; set; }
673+
public DateTime End { get; set; }
674+
public bool IsAllDay { get; set; }
675+
}
676+
}
677+
````
678+
679+
## OnItemDoubleClick
680+
681+
The `OnItemDoubleClick` event fires when the user double clicks on an appointment in the Scheduler.
682+
It provides a `SchedulerItemDoubleClickEventArgs` object to the event handler and you can get the `Item` property and cast it to your own model. If you set the `ShouldRender` property to `true`, the component will re-render. This can be useful if you need to change the Scheduler parameters or state during the event execution and especially if you need to execute `async` logic in the event handler.
683+
684+
@[template](/_contentTemplates/grid/common-link.md#rowclick-args)
685+
686+
>caption Use the OnItemDoubleClick event for the scheduler
687+
688+
````CSHTML
689+
@* You can react to user double clicking on a Scheduler item by using the OnItemDoubleClick event *@
690+
691+
<TelerikScheduler Data="@Appointments"
692+
@bind-Date="@StartDate"
693+
OnItemDoubleClick="@OnDoubleClickHandler"
694+
@bind-View="@CurrView"
695+
Height="600px"
696+
Width="800px">
697+
<SchedulerViews>
698+
<SchedulerDayView StartTime="@DayStart" />
699+
<SchedulerWeekView StartTime="@DayStart" />
700+
<SchedulerMultiDayView StartTime="@DayStart" NumberOfDays="10" />
701+
</SchedulerViews>
702+
</TelerikScheduler>
703+
704+
@code {
705+
private void OnDoubleClickHandler(SchedulerItemDoubleClickEventArgs args)
706+
{
707+
var currentItem = args.Item as SchedulerAppointment;
708+
709+
args.ShouldRender = false;
710+
}
711+
712+
public DateTime StartDate { get; set; } = new DateTime(2019, 11, 29);
713+
public SchedulerView CurrView { get; set; } = SchedulerView.Week;
714+
public DateTime DayStart { get; set; } = new DateTime(2000, 1, 1, 8, 0, 0);//the time portion is important
715+
List<SchedulerAppointment> Appointments = new List<SchedulerAppointment>()
716+
{
717+
new SchedulerAppointment
718+
{
719+
Title = "Vet visit",
720+
Description = "The cat needs vaccinations and her teeth checked.",
721+
Start = new DateTime(2019, 11, 26, 11, 30, 0),
722+
End = new DateTime(2019, 11, 26, 12, 0, 0)
723+
},
724+
725+
new SchedulerAppointment
726+
{
727+
Title = "Planning meeting",
728+
Description = "Kick off the new project.",
729+
Start = new DateTime(2019, 11, 25, 9, 30, 0),
730+
End = new DateTime(2019, 11, 25, 12, 45, 0)
731+
},
732+
733+
new SchedulerAppointment
734+
{
735+
Title = "Trip to Hawaii",
736+
Description = "An unforgettable holiday!",
737+
IsAllDay = true,
738+
Start = new DateTime(2019, 11, 27),
739+
End = new DateTime(2019, 12, 07)
740+
}
741+
};
742+
743+
public class SchedulerAppointment
744+
{
745+
public string Title { get; set; }
746+
public string Description { get; set; }
747+
public DateTime Start { get; set; }
748+
public DateTime End { get; set; }
749+
public bool IsAllDay { get; set; }
750+
}
751+
}
752+
````
753+
754+
## OnItemContextMenu
755+
756+
The `OnItemContextMenu` event fires when the user right clicks on an appointment in the Scheduler.
757+
It provides a `SchedulerItemContextMenuEventArgs` object to the event handler and you can get the `Item` property and cast it to your own model. If you set the `ShouldRender` property to `true`, the component will re-render. This can be useful if you need to change the Scheduler parameters or state during the event execution and especially if you need to execute `async` logic in the event handler.
758+
759+
@[template](/_contentTemplates/grid/common-link.md#rowclick-args)
760+
761+
>caption Use the OnItemContextMenu event for the scheduler
762+
763+
````CSHTML
764+
@* You can react to user right clicking on a Scheduler item by using the OnItemContextMenu event *@
765+
766+
<TelerikScheduler Data="@Appointments"
767+
@bind-Date="@StartDate"
768+
OnItemContextMenu="@OnItemContextMenu"
769+
@bind-View="@CurrView"
770+
Height="600px"
771+
Width="800px">
772+
<SchedulerViews>
773+
<SchedulerDayView StartTime="@DayStart" />
774+
<SchedulerWeekView StartTime="@DayStart" />
775+
<SchedulerMultiDayView StartTime="@DayStart" NumberOfDays="10" />
776+
</SchedulerViews>
777+
</TelerikScheduler>
778+
779+
@code {
780+
private void OnItemContextMenu(SchedulerItemContextMenuEventArgs args)
781+
{
782+
var currentItem = args.Item as SchedulerAppointment;
783+
784+
args.ShouldRender = false;
785+
}
786+
787+
public DateTime StartDate { get; set; } = new DateTime(2019, 11, 29);
788+
public SchedulerView CurrView { get; set; } = SchedulerView.Week;
789+
public DateTime DayStart { get; set; } = new DateTime(2000, 1, 1, 8, 0, 0);//the time portion is important
790+
List<SchedulerAppointment> Appointments = new List<SchedulerAppointment>()
791+
{
792+
new SchedulerAppointment
793+
{
794+
Title = "Vet visit",
795+
Description = "The cat needs vaccinations and her teeth checked.",
796+
Start = new DateTime(2019, 11, 26, 11, 30, 0),
797+
End = new DateTime(2019, 11, 26, 12, 0, 0)
798+
},
799+
800+
new SchedulerAppointment
801+
{
802+
Title = "Planning meeting",
803+
Description = "Kick off the new project.",
804+
Start = new DateTime(2019, 11, 25, 9, 30, 0),
805+
End = new DateTime(2019, 11, 25, 12, 45, 0)
806+
},
807+
808+
new SchedulerAppointment
809+
{
810+
Title = "Trip to Hawaii",
811+
Description = "An unforgettable holiday!",
812+
IsAllDay = true,
813+
Start = new DateTime(2019, 11, 27),
814+
End = new DateTime(2019, 12, 07)
815+
}
816+
};
817+
818+
public class SchedulerAppointment
819+
{
820+
public string Title { get; set; }
821+
public string Description { get; set; }
822+
public DateTime Start { get; set; }
823+
public DateTime End { get; set; }
824+
public bool IsAllDay { get; set; }
825+
}
826+
}
827+
````
828+
601829
## ItemRender
602830

603831
The `OnItemRender` event fires when an appointment is going to be rendered in the scheduler. It fires one for every appointment, including all-day appointments that span several days/slots, and the class is rendered on all elements.

0 commit comments

Comments
 (0)