Description

This badge will display a heart cake when the person's anniversary is within the next 7 days. The number of days left until their anniversary appears in the middle of the heart. If today is the person's anniversary, then the number is not displayed and champagne glasses are shown instead of the heart.

The badge tooltip says how many years they've been married and how many days are left until the anniversary date.

The badge is not displayed at all if the person's anniversary is not within the next 7 days.

How To

Building this badge is extremely simple. Just create a new Lava Badge and paste one of the following Lava snippets into the Display Text field. Rock version 14 made some changes to how badges are rendered, so be sure to choose the code that matches your version of Rock.

Pre-Version 14

{%- comment %} Anniversary Badge {% endcomment -%}
{%- assign daysToAnniversary = Person.DaysToAnniversary -%}
{%- assign now = 'Now' -%}
{%- assign anniversaryNum = Person.AnniversaryDate | DateDiff:'Now','Y' | AsString -%}
{%- if daysToAnniversary <= 7  -%}
    {%- assign badgeColor = '#bb3333' -%}
    {%- assign badgeIcon = 'fa fa-heart' -%}
    {%- assign tooltip = Person.NickName -%}
    
    {% if daysToAnniversary == 0 %}
        {%- comment %} change icon to sparkling cider (definitly not champagne ;) {% endcomment -%}
        {%- assign badgeColor = '#eab043' -%}
        {%- assign badgeIcon = 'fa fa-glass-cheers' -%}
    {% endif %}
    
    {%- if anniversaryNum == 0 -%}
        {%- if daysToAnniversary == 1 -%}
            {%- capture tooltip -%}{{ tooltip }} is getting married tomorrow!{%- endcapture -%}
        {%- elseif daysToAnniversary == 0 -%}
            {%- capture tooltip -%}{{ tooltip }} is getting married today!{%- endcapture -%}
        {%- else -%}
            {%- capture tooltip -%}{{ tooltip }}’s wedding is in {{ daysToAnniversary | AsString }} days{%- endcapture -%}
        {%- endif -%}
    {%- else -%}
        {%- if daysToAnniversary == 1 -%}
            {%- capture tooltip -%}Tomorrow is {{ tooltip }}’s {{ anniversaryNum | NumberToOrdinal }} anniversary!{%- endcapture -%}
        {%- elseif daysToAnniversary == 0 -%}
            {%- capture tooltip -%}Today is {{ tooltip }}’s {{ anniversaryNum | NumberToOrdinal }} anniversary!{%- endcapture -%}
        {%- else -%}
            {%- capture tooltip -%}{{ tooltip }}’s {{ anniversaryNum | NumberToOrdinal }} anniversary is in {{ daysToAnniversary | AsString }} days{%- endcapture -%}
        {%- endif -%}
    {%- endif -%}
    
    <style>
        .badge-anniversary 
        { 
            position: relative;
            color: {{ badgeColor }};
        }
        .badge-anniversary .badge-icon { position: relative; z-index: 2; }
        .badge-anniversary .anniversary-days
        {
            position: absolute;
            left: 50%; top: 50%;
            z-index: 3;
            margin-left: -0.5em;
            margin-top: -0.5em;
            width: 1em; height: 1em;
            border-radius: 50%;
            background: {{ badgeColor }};
            color: #fff;
            font-size: 18px;
            text-align: center;
            cursor: default;
        }
    </style>
    
    <div class="badge badge-anniversary{% if daysToAnniversary == 0 %} anniversary-today{% endif %}" data-toggle="tooltip" data-original-title="{{ tooltip }}">
        <i class="badge-icon {{ badgeIcon }}"></i>
        {%- if daysToAnniversary > 0 -%}
            <span class="anniversary-days">{{ daysToAnniversary }}</span>
        {%- endif -%}
    </div>
{%- endif -%}

Version 14+

<!-- Anniversary Badge -->
{%- assign daysToAnniversary = Person.DaysToAnniversary -%}
{%- assign now = 'Now' -%}
{%- assign anniversaryNum = Person.AnniversaryDate | DateDiff:'Now','Y' | AsString -%}
{%- if daysToAnniversary <= 7  -%}
    {%- assign badgeColor = '#bb3333' -%}
    {%- assign badgeIcon = 'fa fa-heart' -%}
    {%- assign tooltip = Person.NickName -%}
    
    {% if daysToAnniversary == 0 %}
        {%- assign badgeColor = '#eab043' -%}
        {%- assign badgeIcon = 'fa fa-glass-cheers' -%}
    {% endif %}
    
    {%- if anniversaryNum == 0 -%}
        {%- if daysToAnniversary == 1 -%}
            {%- capture tooltip -%}{{ tooltip }} is getting married tomorrow!{%- endcapture -%}
        {%- elseif daysToAnniversary == 0 -%}
            {%- capture tooltip -%}{{ tooltip }} is getting married today!{%- endcapture -%}
        {%- else -%}
            {%- capture tooltip -%}{{ tooltip }}’s wedding is in {{ daysToAnniversary | AsString }} days{%- endcapture -%}
        {%- endif -%}
    {%- else -%}
        {%- if daysToAnniversary == 1 -%}
            {%- capture tooltip -%}Tomorrow is {{ tooltip }}’s {{ anniversaryNum | NumberToOrdinal }} anniversary!{%- endcapture -%}
        {%- elseif daysToAnniversary == 0 -%}
            {%- capture tooltip -%}Today is {{ tooltip }}’s {{ anniversaryNum | NumberToOrdinal }} anniversary!{%- endcapture -%}
        {%- else -%}
            {%- capture tooltip -%}{{ tooltip }}’s {{ anniversaryNum | NumberToOrdinal }} anniversary is in {{ daysToAnniversary | AsString }} days{%- endcapture -%}
        {%- endif -%}
    {%- endif -%}
    
    <style>
        .badge-anniversary 
        { 
            color: {{ badgeColor }};
        }
        .badge-anniversary .badge-icon { position: relative; z-index: 2; }
        .badge-anniversary .anniversary-days
        {
            position: absolute;
            left: 50%; top: 50%;
            z-index: 3;
            margin-left: -0.5em;
            margin-top: -0.5em;
            width: 1em; height: 1em;
            border-radius: 50%;
            background: {{ badgeColor }};
            color: #fff;
            font-size: 40%;
            text-align: center;
            cursor: default;
        }
    </style>
    
    <div class="rockbadge rockbadge-icon rockbadge-icon-nobg badge-anniversary{% if daysToAnniversary == 0 %} anniversary-today{% endif %}" data-toggle="tooltip" data-original-title="{{ tooltip }}">
        <i class="badge-icon {{ badgeIcon }}"></i>
        {%- if daysToAnniversary > 0 -%}
            <span class="metric-value anniversary-days">{{ daysToAnniversary }}</span>
        {%- endif -%}
    </div>
{%- endif -%}

Follow Up

Please don't hesitate to leave a comment or hit me up on Rock Chat (@JeffRichmond) if you have questions or find any issues with this recipe.


Change Log

  • 2019-09-19 - Initial Version
  • 2022-09-02 - Handle 0th anniversaries
  • 2022-11-18 - Added variation for Rock version 14