test.js

<link href="https://cdn.rawgit.com/dapangmao/a1813e270dec8d1f3383fca7ed0a3e9f/raw/fc2edcd37c839a84fe8ac576ec62b9da5f183870/bs.css" rel="stylesheet">
<script src="https://cdn.rawgit.com/Paul-DS/bootstrap-year-calendar/master/js/bootstrap-year-calendar.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/Paul-DS/bootstrap-year-calendar/master/css/bootstrap-year-calendar.css">

<div class="bootstrap" id="calendar" data-provide="calendar" style="margin-bottom: 30px"></div>


<script>

    $(function () {
        {% for cd in calendar_dates %}
            var arr = "{{cd }}".split("-");
            var dvar{{ forloop.counter }} = new Date(arr[0], arr[1], arr[2] ).getTime();
        {% endfor %}
        $('#calendar').calendar({
            startYear: {{ current_year }},
            customDayRenderer: function (element, date) {
                {% for _ in calendar_dates %}
                    if ( date.getTime() == dvar{{ forloop.counter }} ) {
                        $(element).css('background-color', 'grey');
                        $(element).css('color', 'white');
                        $(element).css('border-radius', '15px');
                    }
                {% endfor %}
            }
        });
    })

</script>