Customizable Year Calendar Plugin For Bootstrap 4

A simple-to-use jQuery plugin used for creating a responsive, highly customizable, multi-language year calendar (with range picker support) for Bootstrap 4 and Bootstrap 3 projects.

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

How to use it:

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,
  maxDay: null,
  maxMonth: null,
  maxDayMessage: 'You can not choose day from future',
  minYear: null,
  minDay: null,
  minMonth: null,
  minDayMessage: 'You can not choose day from past',

  // Bootstrap version
  boostrapVersion: 4,

  // for custom layout
  cols: 12,
  colsSm: 6,
  colsMd: 4,
  colsLg: 3,
  colsXl: 3,

  // max days to choose
  maxDaysToChoose: false,
  maxDaysToChooseMessage: 'Maximum days to choose is: ',

  // classic or rangepicker
  mode: 'classic',

  // adds class to day on click
  addUniqueClassOnClick: false,
  
});

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) {
  // triggered when year is chaned to previous
});

$('.calendar').on('jqyc.changeYearToNext', function (event) {
  // triggered when year is chaned to next
});


$('.calendar').on('jqyc.changeYear', function (event) {
  // triggered when year is changed
});

$('.calendar').on('jqyc.dayChoose', function (event) {
  // triggered when day is clicked
});

$('.calendar').on('jqyc.notMinDayChoose', function (event) {
  // triggered when day out of range is choosen
});

$('.calendar').on('jqyc.notMaxDayChoose', function (event) {
  // triggered when day out of range is choosen
});

8. API methods.

// Appends text to a specific day
$('.calendar').calendar('appendText', ext(string (also accepts html)), year(integer), month(integer), day(integer), classes(string));

// Clears text
$('.calendar').calendar('clearText', year(integer), month(integer), day(integer), classes(string));

// Clears all text
$('.calendar').calendar('clearTextFromAll');

// Recalcs tables height, in case of columns mismatch
$('.calendar').calendar('recalcHeight');

// Adds a date range
$('.calendar').calendar('addRange', startYear(integer), startMonth(integer), startDay(integer), endYear(integer), endMonth(integer), endDay(integer));

Changelog:

2019-06-24

• addRange function

2018-11-26

• bug fixes

2018-03-27

• added range picker

2018-03-07

• added API.

---

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