.NET Core Event Registration Widgets

Installation

1. Install the Xperience.Core.Events NuGet package in the .NET Core application
2. Install the companion NuGet package in the CMS application

Displaying Event Calendars

Once installed, you will find a new Event Calendar widget available from the page builder in the CMS application.

When added to a page, you must open the widget properties and select a path from your content tree to display events from:

The path can be a parent page which contains multiple Xperience.EventCalendar pages underneath it (/Calendars in the above example), or a single Event Calendar page (/Calendars/Office).

If multiple calendars exist under the selected path, events from each calendar will be displayed in the same view. You can use the calendar page's EventCalendarBorderColor and EventCalendarBgColor to differentiate the calendar events:

Registering contacts

⚠️ Event registration requires a license with Contact management enabled (Business+).

Place the Event registration widget on your Xperience.Event pages to display a registration form:

You can also render the widget as a standalone widget in a view/page template instead of adding it to each page. Within the properties of the widget, you can modify what happens after a successful registration:

You can redirect the visitor to another page on the site, or display text where the form was previously rendered.

Running code after registration

In some cases you may want to run some code after a visitor registers, such as sending a confirmation email. You can use an object event handler for this:

EventAttendeeInfo.TYPEINFO.Events.Insert.After += SendAttendeeRegistrationEmail;

...

private void SendAttendeeRegistrationEmail(object sender, ObjectEventArgs e)
{
    EventAttendeeInfo registration = e.Object as EventAttendeeInfo;
    var contactID = registration.ContactID;
    var eventNodeID = registration.NodeID; 
    // Run custom code here
}

Customizing the event calendar

This package uses TUI.Calendar to display events. When a calendar initializes on your site, we emit the calendar-init event with a reference to the calendar:

new CustomEvent('calendar-init', { detail: { calendar: cal } });

You can catch this event in your javascript and modify the calendar using any of the TUI.Calendar functions. Most notably, you can use the setOptions function and pass your own custom Options.

For example, to customize all calendars on your site, you can catch the event in your _Layout.cshtml file:

<script type="text/javascript">
    document.addEventListener('calendar-init', function (e) {
        var calendar = e.detail.calendar;
        calendar.setOptions({
            month: {
                daynames: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
                startDayOfWeek: 1,
                narrowWeekend: true
            }
        });
    });
</script>

This changes the labels for the days of the week, makes Monday the first day of the week, and both Saturday and Sunday will appear thinner than other days of the week.

Templates

One of the more useful options to customize is the template option. By accessing this option, you can customize any function which is responsible for rendering the calendar, such as time and popupDetailBody. A full list of template functions can be found in the documentation.

For example, when you click an event in the calendar, a popup with a hard-coded layout will appear:

To customize this popup, you can register your own popupDetailBody function. You can use the default implementation for inspiration. Here's an example of some code that removes data from the popup and changes the "View details" link text:

<script type="text/javascript">
    /**
    * Custom popup layout. We removed the summary, attendee names, and changed the link text.
    */
    const customDetailBody = (schedule) => {
        let html = [];

        if (schedule.raw.showAttendeeCount && schedule.raw.capacity > 0) {
            html.push('<br/><span><i class="tui-full-calendar-icon tui-full-calendar-ic-user-b"></i></span>');
            html.push(schedule.raw.attendeeCount);
            html.push(' of ');
            html.push(schedule.raw.capacity);
        }

        html.push('<br/><a href="');
        html.push(schedule.raw.url);
        html.push('">Go to event &gt;</a>');

        return html.join('');
    }

    document.addEventListener('calendar-init', function (e) {
        var calendar = e.detail.calendar;
        calendar.setOptions({
            template: {
                popupDetailBody: customDetailBody
            }
        });
    });
</script>

Compatibility

This code is only available for use on Kentico Xperience 13 websites using the .NET Core development model. The CMS and .NET Core applications must be hotfixed to at least the version indicated at the top of the README.

Feedback & Contributing

Check out the contributing page to see the best places to file issues, start discussions, and begin contributing.

License

The repository is available as open source under the terms of the MIT License.