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="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Javascripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>

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.

$('.calendar').calendar();

5. Customize the calendar with the following options.

$('.calendar').calendar({
  // 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.

$('.calendar').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');
  console.log(currentYear);
});
$('.calendar').on('jqyc.changeYearToNext', function (event) {
  var currentYear = $(this).find('.jqyc-next-year').data('year');
  console.log(currentYear);
});
$('.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);
  console.log(date);
});

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