A simple jQuery calendar plugin to show the date and stuff

For demo go to https://wrick17.github.io/calendar-plugin/

Very basic styling included. It is totally upto you to style it. Of course, so that there is almost no conflict with your own styles. The CSS is put mostly for reference

To initialize it, include jQuery and the calendar.js script file in your HTML.

<script src="/dist/script/jquery.min.js"></script>
<script src="/dist/script/calendar.js"></script>

And the CSS for the default styles

<link rel="stylesheet" href="/style.css">

Then call the calendar function on the element inside which you want your calendar pugin to put itself

$('.calendar-wrapper').calendar();

To use the optional features pass the parameters as options:

$('.calendar-wrapper').calendar({
  date: '05/21/2017',
  enableMonthChange: false
});

And you should be up and running. Most of the code is pretty self explanatory.

To update it, call the updateCalendarOptions function

$('.calendar-wrapper').updateCalendarOptions({
  date: '05/11/2017'
});

Default options go as below:

var options = {
  date: null,
  weekDayLength: 1,
  prevButton: 'Prev',
  nextButton: 'Next',
  monthYearSeparator: ' ',
  onClickDate: function(date){},
  onChangeMonth: function(date){},
  onClickToday: function(date){},
  onClickMonthNext: function(date){},
  onClickMonthPrev: function(date){},
  onClickYearNext: function(date){},
  onClickYearPrev: function(date){},
  onShowYearView: function(date){},
  onSelectYear: function(date){},
  showThreeMonthsInARow: true,
  enableMonthChange: true,
  enableYearView: true,
  showTodayButton: true,
  highlightSelectedWeekday: true,
  highlightSelectedWeek: true,
  todayButtonContent: 'Today',
  showYearDropdown: false
}

Type of each option followed by the description of each of the options...

date - Date / String

The date that you want to be the highlighted date when the plugin is loaded.

weekDayLength - Number

The Number of characters of the week day that you want to show on the header

prevButton - String

The content of the previous button in the header to change month or year. You can also put HTML string.

nextButton - String

The content of the next button in the header to change month or year. You can also put HTML string.

monthYearSeparator - String

The string you want to put in between the month and the year in the month view. You can also put HTML string.

onClickDate - function

The function that is called when any date is clicked in the month view. The date is passed as a parameter to the function as a javascript Date object.

onClickToday - function

The function that is called when you click the today button. Today's date is passed as a parameter to the function as a javascript Date object.

onChangeMonth - function

The function that is called when any month is clicked in the year view. The first day of the month is passed as a parameter to the function as a javascript Date object.

onClickMonthNext - function

The function that is called when you click on the next button in the month view. The first day of the next month is passed as a parameter to the function as a javascript Date object.

onClickMonthPrev - function

The function that is called when you click on the previous button in the month view. The first day of the previous month is passed as a parameter to the function as a javascript Date object.

onSelectYear - function

The function that is called when you select a year from the dropdown in the year view header. The first day of the first month of the selected year is passed as a parameter to the function as a javascript Date object.

onClickYearNext - function

The function that is called when you click on the next button in the year view. The first day of the first month of the next year is passed as a parameter to the function as a javascript Date object.

onClickYearPrev - function

The function that is called when you click on the previous button in the year view. The first day of the first month of the previous year is passed as a parameter to the function as a javascript Date object.

onShowYearView - function

The function that is called when you click on the month header in the month view. The first day of the first month of the current year is passed as a parameter to the function as a javascript Date object.

showThreeMonthsInARow - Boolean

Defaults to true. If set to false, then months will come four in a row in year view.

enableMonthChange - Boolean

Defaults to true. If set to false, then you won't be able to change either month or year.

enableYearView - Boolean

Defaults to true. If set to false, then you won't be able to go to the year view. You can only change the month using the next or previous buttons in the month view.

showTodayButton - Boolean

Defaults to true. If set to false, then the today button won't be visible.

highlightSelectedWeekday - Boolean

Defaults to true. When set to true, all other dates with the same week-day as the selected date will be highlighted. Note that this feature will only apply to the month that the selected date is a part of.

highlightSelectedWeek - Boolean

Defaults to true. When set to true, then the selected week that contains the selected date will be highlighted.

todayButtonContent - String

The content of the today button at the bottom. You can also put HTML string.

showYearDropdown - Boolean

Defaults to false. If set to true, then you can select the year in a dropdown.