Simple jQuery Calendar and Schedule Plugin For Bootstrap - Bic Calendar

File Size: 135KB
Views Total: 64406
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Simple jQuery Calendar and Schedule Plugin For Bootstrap - Bic Calendar

Bic Calendar is a lightweight jQuery plugin that enables you to create a simple and nice Calendar & Schedule with ajax event support using twitter bootstrap.

View more

See Also:

Basic Usage:

1. Include jQuery library and Bic Calendar plugin on your web page

<script src=""></script>
<script src="js/bic_calendar.min.js"></script>
<link href="css/bic_calendar.css" rel="stylesheet" type="text/css">

2. Include twitter bootstrap on the page

<link href="" rel="stylesheet">
<link href="" rel="stylesheet">
<script src=""></script>

3. Markup

<div id="demo"></div>

4. The javascript to activate the date picker

mesos = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

dias = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"];

    nombresMes: mesos,
    dias: dias,
    req_ajax: {
    type: 'get',
    url: '' // External calls

5. The PHP (You'll have to use this for external calls)

header('Access-Control-Allow-Origin: *');

$mes = $_GET['mes'];
$ano = $_GET['ano'];

$array = array(
	array("27/$mes/$ano", 'Getting Contacts Barcelona', ''),
	array("7/$mes/$ano", '2º Getting Contacts Alaquás', '', '#3B4', 'contingut popover'),
	array("17/$mes/$ano", '4º Getting Contacts Barberà', '#', '#3B4', 'contingut popover')

echo json_encode($array);

6. All possible plugin options.


  // array of event objects
  event: [],

  // the date to display, as a string in dd/MM/YYYY format, or as a Date object
  date: new Date(),

  // day names
  dayNames: ["l", "m", "x", "j", "v", "s", "d"],

  // month names
  monthNames: ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"],

  // shows days
  showDays: true,

  // json array of event array
  reqAjax: [],

  // enable select
  enableSelect: false,

  // multiple select
  multiSelect: false,

  // displays month controller
  displayMonthController: true,

  // displays year controller
  displayYearController: true,

  // Bootstrap popover options
  popoverOptions: {},

  // Bootstrap tooltip options
  tooltipOptions: {}

Change log:


  • Add date option to start calendar at a user specified date

v3.1.2 (2013-12-16)

  • added functionality startWeekDay and docs
  • added bic calendar full logic

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