Birthdays and Anniversaries Template | Axero Documentation

The Birthdays and Anniversaries template displays a list of upcoming birthdays and work anniversaries. The template is a built-in template and comes with your Axero site. The template pulls information from the date of birth and hire date profile fields. To use the template:

1. Add a People Widget on a Page Builder page
2. Edit the widget
3. Set the type to Upcoming Birthdays and Anniversaries
4. Select the Birthdays and Anniversaries template in the Template tab

Template HTML

Below is the HTML of this template for your reference.

<div class="axero-widget axero-upcoming-birthdays {{CustomCSSClass}} {{#if HideContainerBorder}}axero-widget-no-border{{/if}}">
    {{#if ShowWidgetHeader}}
    <div class="axero-widget-header">
        <h3>{{{WidgetTitle}}}</h3>
    </div>
    {{/if}}
    <div class="axero-widget-content">
        <div class="list">
        <ul>
        {{#each Contents}}
            <li>
                <div class="axero-section-list-avatar">
                    <a href="{{ProfileURL}}" title="{{{UserInfoDisplayName}}}"><img alt="{{{UserInfoDisplayName}}}" src="{{AvatarImageURL}}" /></a>
                </div>
                <div class="axero-section-list-content{{#if IsBirthday}} bd-name{{/if}}">
                    <div class="axero-section-list-content-title">
                        <a class="axero-user-card-link" data-user="{{UserID}}" href="{{ProfileURL}}" title="{{{UserInfoDisplayName}}}">{{{UserInfoDisplayName}}}</a>
                    </div>
                    <div class="axero-section-list-content-date">
                        <i class='icon-{{#if IsBirthday}}gift{{else}}calendar{{/if}}'></i> {{#if IsBirthday}}{{../Resources.GlobalBirthDayText}}{{else}}{{../Resources.GlobalWorkAnniversaryText}}{{/if}} {{../Resources.GlobalOnText}} {{NextAnniversaryString}} {{#unless IsBirthday}}<span>({{{YearsString}}})</span>{{/unless}}
                    </div>
                </div>
            </li>
        {{/each}}
        </ul>
        </div>
    </div>
    {{#if ShowWidgetFooter}}
    <div class="axero-widget-footer">
        
    </div>
    {{/if}}
</div>