A simple twitter bootstrap calendar / agenda / date picker to mark events
JavaScript CSS
Latest commit e206dd2 Sep 3, 2014 @bichotll Merge pull request #6 from jtsay362/boot3
Add date option to start calendar at a user specified date


BIC Calendar

en - BIC Calendar is a simple calendar to mark events and ranges of dates (and date picker), a jQuery plugin and Twitter Bootstrap. For more info check: http://bichotll.github.io/bic_calendar/

ca - BIC Calendar es un simple calendari per marcar esdeveniments i rangs de dates. Un plugin de jQuery i Twitter Bootstrap. Per mes info: http://bichotll.github.io/bic_calendar/


  • ~jQuery 1.7.2
  • ~Twitter Bootstrap 3.0


  • events (array of event object)

  • date (string or date)

    • default: the current date *The date to display, as a string in dd/MM/YYYY format, or as a Date object
  • startWeekDay (int)

    • default: 0 *1 for english format. Mind the dayNames.
  • dayNames (array)

    • default: ["l", "m", "x", "j", "v", "s", "d"] *Did you change the startWeekDay? Change the order of this days then.
  • monthNames (array)

    • default: ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"]
  • showDays (boolean)

    • default: true
  • reqAjax (json array of event array)

    • reqAjax.type (string) {'get', 'post'}
    • reqAjax.url (string)
  • enableSelect (boolean)

    • default: false
  • multiSelect (boolean)

    • default: false
  • displayMonthController (boolean)

    • default: true
  • displayYearController (boolean)

    • default: true
  • popoverOptions (popover Twitter Bootstrap object)

  • tooltipOptions (tooltip Twitter Bootstrap object)

Event object

  • date(string):
    • "17/8/1989"
  • title (string)
    • "Event BarberĂ "
  • link (string)
  • color(string)
    • "#333"
  • class (string)
    • "activo congreso"
  • content (string)

    • "Text for the content of popover...description of event...image..."
  • if content is not defined it will be a tooltip

Event bicCalendarSelect


  • detail.dateFirst
    • 12/26/1989
  • detail.dateLast
    • 12/12/1992

Example code events

document.addEventListener('bicCalendarSelect', function(e) {
    moment.lang('es'); // default the language to English
    var dateFirst = new moment(e.detail.dateFirst);
    var dateLast = new moment(e.detail.dateLast);



Related forks