Customizable Year Calendar Plugin For Bootstrap 4

Customizable Year Calendar Plugin For Bootstrap 4

A simple-to-use jQuery plugin used for creating a highly customizable, multi-language year calendar for Bootstrap 4 projects.

For Bootstrap 3, check out our Bootstrap Year Calendar plugin.

1. Include jQuery library and Bootstrap 4 framework on the page.

<!-- Bootstrap CSS -->
<link rel="stylesheet" href=""
      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Javascripts -->
<script src=""></script>
<script src=""
<script src=""

2. Include the Bootstrap 4 Year Calendar's JavaScript and CSS files on the page.

<link rel="stylesheet" href="jquery.bootstrap.year.calendar.css">
<script src="jquery.bootstrap.year.calendar.js"></script>

3. Create a container element for the calendar.

<div class="calendar"></div>

4. The JavaScript library to generate a default calendar inside the container.


5. Customize the calendar with the following options.

  // shows calendar headers
  showHeaders: true,
  // start year
  startYear: currentDate.getFullYear(),
  // max/min year
  maxYear: null,
  minYear: null,
  // for custom layout
  cols: 12,
  colsSm: 6,
  colsMd: 4,
  colsLg: 3,
  colsXl: 3

6. Localize the year calendar.

  i10n: {
    jan: "January",
    feb: "February",
    mar: "March",
    apr: "April",
    may: "May",
    jun: "June",
    jul: "July",
    aug: "Augst",
    sep: "September",
    oct: "October",
    nov: "November",
    dec: "December",
    mn: "Mn",
    tu: "Tu",
    we: 'We',
    th: 'TH',
    fr: 'Fr',
    sa: 'Sa',
    su: 'Su'

7. Event handlers available.

$('.calendar').on('jqyc.changeYearToPrevious', function (event) {
  var currentYear = $(this).find('.jqyc-change-year').data('year');
$('.calendar').on('jqyc.changeYearToNext', function (event) {
  var currentYear = $(this).find('.jqyc-next-year').data('year');
$('.calendar').on('jqyc.dayChoose', function (event) {
  var choosenYear = $(this).data('year');
  var choosenMonth = $(this).data('month');
  var choosenDay = $(this).data('day-of-month');
  var date = new Date(choosenYear, choosenMonth, choosenDay);

This awesome jQuery plugin is developed by zatorck. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 06.03.2018
  • Source