jQuery and Bootstrap 3/4 Year Calendar
This is simple jQuery and Bootstrap 3&4 calendar. Hope some1 will like it.
DEMO
Author
Piotr Zatorski Website: allset.pl
Instalation
Download jquery.bootstrap.year.calendar.min.css and jquery.bootstrap.year.calendar.min.js and include them in right places on your site.
Basic Usage
<div id="calendar"></div> <script> $('#calendar').calendar();</script>Options refenece
Option name: boostrapVersion
Description: choose boostrap compatibile Default: 4
Accepts: *integer * (3 or 4)
Option name: showHeaders
Description: determine if show months name
Default: true
Accepts: boolean
Option name: startYear
Description: start calendar from this year
Default: current year
Accepts: integer
Option name: maxYear
Description: max year to show
Default: null
Accepts: integer
Option name: maxDay
Description: max day able to choose
Default: null
Accepts: integer
Option name: maxMonth
Description: max month able to choose
Default: null
Accepts: integer
Option name: maxDayMessage
Description: Massage to alert when not max day is clicked
Default: You can not choose day from past
Accepts: string or false
Option name: minYear
Description: min year to show
Default: null
Accepts: integer
Option name: minDay
Description: min day able to choose
Default: null
Accepts: integer
Option name: minMonth
Description: min month able to choose
Default: null
Accepts: integer
Option name: minDayMessage
Description: Massage to alert when not min day is clicked
Default: You can not choose day from past
Accepts: string or false
Option name: cols
Description: add bootstrap cols-cols class to months view (IGNORE IT IN BOOTSTRAP 3)
Default: 12
Accepts: integer (1-12)
Option name: colsSm
Description: add bootstrap cols-sm-cols class to months view
Default: 6
Accepts: integer (1-12)
Option name: colMd
Description: add bootstrap cols-md-cols class to months view
Default: 4 Accepts: integer (1-12)
Option name: colsLg
Description: add bootstrap cols-lg-cols class to months view
Default: 3
Accepts: integer (1-12)
Option name: colsXl
Description: add bootstrap cols-xl-cols class to months view (IGNORE IT IN BOOTSTRAP 3)
Default: 3
Accepts: integer (1-12)
Option name: mode
Description: choose mode of using (check mode xxx options reference)
Default: classic
Accepts: string (accepts: classic, rangepicker)
Option name: startFromSunday
Description: choose to start calendar form sunday
Default: false
Accepts: boolean
Mode: classic function refenece
Option name: addUniqueClassOnClick
Description: add class to day on click
Default: false
Accepts: integer
Mode: rangepicker function refenece
Option name: maxDaysToChoose
Description: choose how many days user can choose;
Default: false
Accepts: integer
Option name: maxDaysToChooseMessage
Description: massage to alert when choosen more than maxDaysToChoose in range picker
Default: *Maximum days to choose is: * -here you got maxDaysToChoose integer.
Accepts: string or false
Options example
You need to choose option when initalizing calendar like this
<script> $('#calendar').calendar({ showHeaders: false }); </script>Function refence
Function name: appendText
Description: Append text to specyfic day.
Parameters: (text(string (also accepts html)), year(integer), month(integer), day(integer), classes(string))
Function name: clearText
Description: Clear text to specyfic day.
Parameter: year(integer), month(integer), day(integer), classes(string))
Function name: clearTextFromAll
Description: Clear text from all days.
Parameter: none
Function name: recalcHeight
Description: Recalc tables height, in case of columns mismatch
Parameters: none
Mode: rangepicker functions reference
Function name: addRange
Description: Add range form rangepicker programmatically (eg. for reading from database)
Parameters: startYear(integer), startMonth(integer), startDay(integer), endYear(integer), endMonth(integer), endDay(integer)
Functions example
<div class="calendar"></div> $('.calendar').calendar(); $('.calendar').calendar('appendText', '(3)', 2018, 3, 4);Protip for appendText function
If you want to use it with chaning year funcionality, you need to use event called changeYear. See this example:
<div class="calendar"></div> <script> $('.calendar').calendar(); appendToCalendar(); $('.calendar').on('jqyc.changeYear', function (event) { appendToCalendar(); }); function appendToCalendar() { $('.calendar').calendar('appendText', '(3)', 2018, 3, 4); } </script>Events reference
There are 7 events available at the moment. You can use is simply calling it, like in example.
Event name: jqyc.changeYearToPrevious Tiggered: When year is changed to previous
Event name: jqyc.changeYearToNext . Tiggered: When year is changed to next
Event name: jqyc.changeYear . Tiggered: When year is changed to any
Event name: jqyc.dayChoose . Tiggered: When day in range is choosen
Event name: jqyc.notMinDayChoose . Tiggered: When day out of range is choosen
Event name: jqyc.notMaxDayChoose . Tiggered: When day out of range is choosen
Event name: jqyc.outOfRangeDayChoose . Tiggered: When day out of range is choosen
Mode: rangepicker events reference
Event name: jqyc.rangeChoose . Tiggered: When valid range is choosen
Event example
<div class="container"> <div class="calendar"></div> </div> <script> $('.calendar').calendar(); //tiggered when year is chaned to previous $('.calendar').on('jqyc.changeYearToPrevious', function (event) { var currentYear = $(this).find('.jqyc-change-year').data('year'); console.log(currentYear); }); //tiggered when year is chaned to next $('.calendar').on('jqyc.changeYearToNext', function (event) { var currentYear = $(this).find('.jqyc-next-year').data('year'); console.log(currentYear); }); //tiggered when day is clicked $('.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); }); //tiggered when range is choosen (ONLY FOR MODE: RANGEPICKER) $('.calendar').on('jqyc.rangeChoose', function (event) { var startChoosenYear = $(this).data('rangepicker-start-year'); var startChoosenMonth = $(this).data('rangepicker-start-month'); var startChoosenDay = $(this).data('rangepicker-start-day-of-month'); var startDate = new Date(startChoosenYear, startChoosenMonth, startChoosenDay); console.log(startDate); var endChoosenYear = $(this).data('rangepicker-end-year'); var endChoosenMonth = $(this).data('rangepicker-end-month'); var endChoosenDay = $(this).data('rangepicker-end-day-of-month'); var endDate = new Date(endChoosenYear, endChoosenMonth, endChoosenDay); console.log(endDate); }); </script>l10n
Localization is very easy. You can simply localize Your calendar by passing options at the calendar declaration. See example above.
<div class="calendar"></div> <script> $('.calendar').calendar({ l10n:{ jan: "Styczeń", feb: "Luty", mar: "Marzec", apr: "Kwiecień", may: "Maj", jun: "Czerwiec", jul: "Lipiec", aug: "Sierpień", sep: "Wrzesień", oct: "Październik", nov: "Listopad", dec: "Grudzień", mn: "Pm", tu: "Wt", we: 'Śr', th: 'Cz', fr: 'Pt', sa: 'So', su: 'Nd' } }); </script>Bug report
If You found any bug please report me on github, I will do my best to repeair it.
