Custom Rendering

The calendar draws appointments, tasks and its other rows its own way: their time, subject, place and repeat icon on the calendar, a tooltip of when and where, and a dialog of an appointment's details. Each can be drawn your own way instead, a table at a time, and a table's rows can be written and changed in forms of your own. All of it applies in every layout.

Rows

A MultiTableTemplate (React: an entry of templates) draws one table's rows on the calendar in place of all the calendar draws of them — their time, subject, place and repeat icon — as it does on a Timeline. It is given the row, with every column read in its Record; keep it to a line, since a month's cells are short. Like a tooltip it shows what the user should read, not controls to use: the calendar still opens the row when it is clicked.

React Blazor

The calendar reads the columns it shows itself. For a template or a tooltip to show another, name it in a view's FetchXML, as the demo below does for a phone call's direction and number: the calendar reads a view's columns beside its own.

Tooltips

Resting the pointer on an appointment shows its subject, when and where it is. Pass TooltipTemplate (React: appointmentTooltip) to show a tooltip of your own. It is given the appointment, whose Record holds every column read of its row, with its formatted value, so it can show columns of your own that the calendar doesn't draw. A tooltip isn't interactive: show what the user should read, not controls to use.

React Blazor

Phone calls and tooltips of your own

Schmeler and Sons' appointments and phone calls, a month at a time. A phone call is drawn with an icon for which way it went, and its tooltip gives the number it was to or from; an appointment's tooltip says where it is.

React example Blazor example React TypeScript Razor

Appointment details

Clicking an appointment opens a dialog of its details, read from Dataverse as a record page reads a record — through the same table access and column security — and shown read-only: when it is, where, what it is regarding, its status and its description. Pass AppointmentDetails (React: appointmentDetails) to show fields of your own in it instead, bound to the appointment's record as on a record page, or handle OnAppointmentClick (React: onAppointmentClick) to do something else on a click, such as opening a page of your own.

React Blazor

Details of your own

Schmeler and Sons' appointments, each opening on its start, its end, where it is and its required attendees.

React example Blazor example React TypeScript Razor

Forms

In an Editable calendar, a row of a table other than appointments opens in a form of the columns its registration shows. A MultiTableForm inside the calendar (React: an entry of forms) gives a table forms of your own, one to create its rows and one to change them: components of editors, shown inside a form of the record. FormLocation (React: formLocation) says where they open: a dialog in the center, as by default, or a side panel on the left or the right.

React Blazor

For a fuller example — tasks drawn with whether they are done and how urgent they are, and a tooltip for each table — see the Calendar Custom Rendering demo.